面经 | css
CSS
- CSS
- position
- display
- flex: 1
- 元素居中
- flex+align-item+justify-content
- absolute+margin:auto
- align-item vs vertical-align
CSS
position
- static: 默认。就是自然顺序，从上到下，从左到右，爱着你排列；
- absolute：绝对。原点是：最近的非static的父（上级）元素。
- dom是一棵树。当前节点的父节点如果是absolute或relative，那么原点就是父节点，如果不是，那么就找父亲的父亲，而不是找父亲的兄弟，或自己的兄弟。
- fixed: 固定。相对于浏览器。
- relative：相对。相对于正常文档流中的自己。
- inherit：继承父元素
display
- flex 弹性。可以用一些flex盒子的相关属性；align-item justify-content
- table-cell 单元格布局。 把子元素当成td，子元素就被当成了行内元素，好处，比如可以用vertical-align 直接垂直对齐。
flex: 1
flex:1是felx:1 1 0的简写，是flex-grow:1;flex-shirnk:1;flex-basis:0的简写；
- 三个属性取值范围：0 1 auto；
- flex-grow:1 表示，有剩余空间的时候，元素会尽可能拉伸填充； 相反取0，就是有剩余空间的时候也不拉伸；
- flex-shrink:1 表示，有没有剩余空间的时候，元素会尽可能地缩小；相反取0，就是没有剩余空间的时候也不允许压缩。
- flex-basis:0 表示，元素在主轴上的初始宽度为0，往往通过设置为0，保证所有元素分得的宽度是一样的，相反，为1，表示初始状态会保持原来的大小。
- 可能flex-basis不好理解。其实就是flex元素的大小可以由上面三个值控制，你可以给一个初始大小：flex-basis，然后浏览器根据flex-basis来进行grow和shirnk；没特意指定basis的话，basis默认就是元素本身的大小。其实感觉basic为0和1的效果都是一样的，可能a元素本身是10px;b元素是20px;都设置成basic:0不是说两个元素宽度都是0px了，反而是说都一样长
可以在下面网址试一下：
https://codepen.io/kkkaloha/pen/yLdrNxq
元素居中
常见：
常见元素居中实现方法
掌握熟悉上面的一两种写下就行了
flex+align-item+justify-content
display:flex;justify-content:center; // 水平align-items:center; // 垂直
absolute+margin:auto
父元素是非static元素
position:absolute;right:0px;left:0px;top:0px;bottom:0px;margin:auto;
- 详情解释
- 首先absolute是为了让文档脱离文档流，然后用top等属性来控制；如果元素只指定了absolute，那么实际浏览器是不知道元素在哪儿了，所以必须指定top,left,right,bottom。而且你发现，如果你指定了元素的高度和宽度，top:0,bottom:0，那么会往top靠近。同理，往left靠。
- 拿水平举例子，为什么left:0,right:0不能实现水平居中呢？因为left:0,right:0是对元素进行拉伸实现左右边距。如下图，可以看到前后，是拉伸了蓝色元素。
- 那我再次基础上固定宽度呢？width:100px；left:0;right:0; 也不行。不过，由于指定了left和right，所以浏览器至少知道了元素在水平方向上的位置；所以如果这个时候加上margin:auto是可以实现水平居中的。
- margin:auto就是告诉浏览器去计算元素的左右剩余空间然后平均分布一下。虽然指定宽度后，元素还是靠着左边，但实际浏览器看到的是，元素在left:0;right:0的地方，然后到这个地方去计算元素的左右边距情况。也就是left:0;right:0这一块区域都是元素的，但元素可能由于width限制了，没有撑满，然后margin会去计算这个区域类，元素的边距情况，然后均分；
- 所以，同理，告诉浏览器，在top:0和bottom:0这个区域内去均分剩余空间。
- 切记，你不指定top这些方位，虽然元素看起来停留在左上角，好像是有坐标什么，实际是没有的。指定了，margin才能生效。
- margin:auto就是均匀分配上下左右四个方向；margin:0 auto只均分左右方向。
align-item vs vertical-align
- 效果都是垂直居中；只不过作用的元素和使用的环境不同。
- align-item是flex容器的属性，适用于flex容器中的所有元素
- vertical-align作用于行内(inline)元素和表格单元格：span a img input label 等等；div是块状元素，不过可通过inline设置成行内元素；
- 与之对应的就是 justify-content vs text-align；应该大差不差