中文权威专家解决方案：实现div位置自适应
本文目录
- 如何使div中的图片自适应宽度和高度，图片不变形，可以超出div，超出部分隐藏？
- 怎么样在div+css中设置一个div的框并出现滚动条？
- flex布局技巧？
- html弹性布局怎么设置居中？
- css自适应原理？
如何使div中的图片自适应宽度和高度，图片不变形，可以超出div，超出部分隐藏？
像你这么说，貌似只有用js来判断了，首先给图片上下左右居中，给父级元素设置overflow:hidden;然后用过js来获取当前图片的宽高，如果宽度大于高度，那么就高度为100%，宽度自适应，反之宽度100%，高度自适应；
怎么样在div+css中设置一个div的框并出现滚动条？
1、打开dw，新建一个html页面，进入html页面编辑。
2、在代码的body中间编写一个div层。
3、将这个新建好的html页面跟编写好的div利用快捷键“ctrl+s”另保存到知道的目录下。
4、点击dw的文件按钮，在弹出的下拉框中，选择“新建”。
5、在新建的窗口中，找到“css”这一栏，点击“css”新建一个css样式。
6、写样式用".pingmu{}"开始写，给它固定宽高，再添加背景色，让div自适应宽高，超过部分显示滚动条。
7、将这个css样式保存到同级目录下，如ceshi.html在c盘，css样式也保存在c盘。
8、保存好样式后，双击这个ceshi.html页面，用浏览器打开后看到100像素宽高的黑块。
flex布局技巧？
最近有个面试，面试官问到，在一个横向布局上，假设有三个div，每个宽度为定宽apx，如果想使两侧宽度为x,中间div间间隔为2x。x可以自适应。
怎么做很简单，两行代码就搞定：
justify-content 常用属性有：flex-start | flex-end | center | space-between | space-around
前三个就是字面意思，向行起始位置对齐，向行结束位置对齐，向行中间位置对齐。
后两个中，space-between ：元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于'flex-start'。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。大白话就是会把第一个元素的位置与行起始位置对其，最后一个元素与行结束位置对其，中间的剩余空间平均分布。
space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于'center'。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。
说到这其实都是废话，这些都是flex布局初始学习就会接触到的。主要是这个面试官又问，如果中间不是2x，是x呢，也就是每个间隙与两侧的间隔相同。也就是这样：
这个问题我一开始想的是两侧设置padding，中间用justify-content: space-between;可是这样在不同的屏幕上看到的两侧padding值肯定是不同的，所以中间的间隙与两侧就不想等了。。。所以最后我也没想出来。回来之后发现justify-content居然还有space-evenly这么个属性！这个属性干嘛用的不言而喻。均匀排列每个元素，每个元素之间的间隔相等。上题就解决了。但是space-evenly的兼容性比起常用的justify-content值来说还是要差不少。
我们不能只满足与解决一道面试题，再实际情况下可能会有很多奇葩的情况，比如说上图4个x改成3个x，一个2x（虽然我是从来没见过这种奇葩的设计。。）那又该怎么办呢？
这里我想到了css3的cacl()，这玩意儿百分比，px值混搭都能计算，强的一批。比如实现上面的要求：
也一样可以达到效果。（假设a的值为100px）而且不管是什么情况都可以计算出你想要的大小，简直不要太爽。
html弹性布局怎么设置居中？
html弹性布局设置居中CSS中需要考虑它的属性，设置居中的属性有两个：align:center;vertical-align:middle，分别代表水平居中和垂直居中，然而这两个属性并不适用所有场景。
align:center适用于标签内的文本内容，如果父元素中包含其他类似于div这种划分区域的标签，那么对于非IE元素就不起作用了，需要用到margin-left:auto;margin-right:auto属性来配合处理兼容。而vartical-align:middle却仅针对内链元素有用，对于块状元素，就没有办法了。
要实现真正地居中，往往要解决高度自适应的问题，高度自适应是比较常见的问题，尤其是 两列结构。然而就算是两列结构，也存在：两列都固定；或者一列高度固定，另一列不固定；或者两列高度都不固定的情况。同理 三列结构 更是如此。那么如何保证不定高度那列因为内容增加高度变化时，其他列能随之改变呢(需要强调：这里说的改变是视觉上的高度的变化 - 如背景色，而实际高度并不一定变化)？
这个时候不管是哪一部分内容增加，这三列在视觉上都会随之增高。这是一个比较典型的例子。从根源上，不管其中任何一个区域内容增加都会促使父元素.main的高度增加,由于父元素内容和边框使用三种不同的底色，所以看上去就是高度自适应。
再换一种思路，假设2列高度(未知)自适应(这两列分别用A，B表示，而P是他们的父元素)，当A或者B高度变化时，会促使父元素P的高度变化，如果P和A都是一样的背景色，那么当B变化时，由于P的高度变化，A自然看起来是高度自适应了。然而当A变化时，虽然P高度也随之变化了，但是由于P与A的背景色一致，因此B却没有任何变化。这样一来，html就能够成功地实现居中了。
css自适应原理？
一. 双浮动法
原理： float不会完全脱离文档流,会占用原空间
二. 绝对定位法
原理： 左右绝对定位,脱离文档流 。 中间不设置宽度,只设置左右边距，自动撑满块级元素一行的剩余空间。
三. 弹性盒子
原理：flex:1 实际上是三个属性的简写 , flex:1; 等同于 flex:1 1 auto;。
简单的说，分别代表：剩余空间 容器缩小时压缩比例 最小宽度。
四. 网格布局 grid
五. 表格布局
六. css计算 、 JS计算
原理：只要把div放在同一行，使用calc计算宽度即可 。