面经 | css

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；应该大差不差

原文地址：https://blog.csdn.net/YuuuPeeiiiii/article/details/142487226

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！