CSS常见问题

1. position 定位基准

   • absolute, relative, static,fixed

2. 布局模型

   1. 流动模型(Flow)
      • BFC 即 Block Formatting Contexts (块级格式化上下文)
      • 具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素
      • 只要元素满足下面任一条件即可触发BFC特性：
        • body 根元素
        • 浮动元素：float 除 none 以外的值
        • 绝对定位元素：position (absolute、fixed)
        • display 为 inline-block、table-cells、flex
        • overflow 除了 visible 以外的值 (hidden、auto、scroll)
      • 问题案例：margin塌陷问题：在标准文档流中，块级标签之间竖直方向的margin会以大的为准，这就是margin的塌陷现象。可以用overflow：hidden产生bfc来解决
      • 问题案列：高度塌陷问题，在通常情况下父元素的高度会被子元素撑开，而在这里因为其子元素为浮动元素所以父元素发生了高度坍塌，上下边界重合，这时就可以用BFC来清除浮动了
      • 问题案例：div浮动兄弟这该问题：由于左侧块级元素发生了浮动，所以和右侧未发生浮动的块级元素不在同一层内，所以会发生div遮挡问题。可以给右侧元素添加 overflow: hidden，触发BFC来解决遮挡问题。这个方法可以用来实现两列自适应布局，效果不错，这时候左边的宽度固定，右边的内容自适应宽度
   2. 浮动模型(Float)
   3. 层模型（Layer）

3. CSS垂直居中的8种方法

   1. 通过vertical-align:middle实现CSS垂直居中是最常使用的方法，但是有一点需要格外注意，vertical生效的前提是元素的display：inline-block
   2. 父元素display:flex;而子元素align-self:center;
   3. 为父元素添加伪元素:before,vertical-align:middle,display：inline-block
   4. 父元素display:table，子元素display：table-cell的方式实现CSS垂直居中
   5. 创建一个隐藏节点#hide，使得隐藏节点的height值为剩余高度的一半即可
   6. 子元素的position:relative，再通过translateY即可定位到垂直居中的位置
      1. position:relative;top:50%;transform: translateY(-50%);transform中的translate偏移的百分比就是相对于元素本身的尺寸而言的
   7. 子元素的line-height值等于父元素的height（行内元素）

4. CSS一列固定，一列自适应

   1. float + margin
   2. float + overflow
   3. .parent {
      display: table;
      width: 100%;
      table-layout: fixed;
      }
      .left {
      display: table-cell;
      width: 100px;
      }
      .right {
      display: table-cell;
      /宽度为剩余宽度/
      }
   4. .parent {
      display: flex;
      }
      .left {
      width: 100px;
      margin-left: 20px;
      }
      .right {
      flex: 1;
      }

5. flex

   1. flex-basis该属性来设置该元素的宽度。当然，width也可以用来设置元素宽度。如果元素上同时设置了width和flex-basis,那么flex-basis会覆盖width的值
   2. flex-grow该属性来设置，当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何分配父元素的剩余空间。flex-grow的默认值为0，意思是该元素不索取父元素的剩余空间，如果值大于0，表示索取。值越大，索取的越厉害
   3. flex-shrink该属性来设置，当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的。flex-shrink的默认值为1，当父元素的宽度小于所有子元素的宽度的和时，子元素的宽度会减小。值越大，减小的越厉害。如果值为0，表示不减小。