CSS

Posted on
| Words count in article: 1,076

BFC

  • BFC(Block formatting context)，即块级格式化上下文
  • 一个新创建的BFC盒子是独立布局的，盒子内元素的布局不会影响到盒子外元素
  • 有时会有副作用，可以使用最新的 display: flow-root 来触发BFC

触发条件

  • float不为none（浮动元素）
  • overflow不为visible
  • position: absolute/fixed
  • display: inline-block/table-cell/flex/inline-flex
  • display: flex/inline-flex（弹性元素的直接子元素）

用途

  • 防止margin合并
  • 清除浮动（用BFC可以包住它内部的浮动元素）
  • float+div 左右自适应布局

eg.1 创建BFC包住内部浮动元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="demo1">
    <div class="child"></div>
</div>

<style>
    #demo1 {
        border: 5px solid red;
        overflow: hidden;
    }
    .child {
        background: green;
        float: left;
        height: 100px;
        width: 100px;
        margin-top: 10px;
    }
</style>

eg.2 做左右自适应布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="demo2">
    <div class="left"></div>
    <div class="right"></div>
</div>

<style>
    #demo2 .left{
        border: 5px solid green;
        min-height: 300px;
        width: 400px;
        float: left;
        margin-right: 20px;
        }
    #demo2 .right{
        border: 5px solid pink;
        min-height: 300px;
        overflow: auto;  /*触发BFC*/
    }
</style>

垂直居中

  • 若父元素的 height 没写死，只需padding: 10px 0; 就可将子元素垂直居中
  • 若父元素的高度写死，则需要其他方式来实现垂直居中
  • 一般建议能不写死height就不写死

实现垂直居中的方式

  1. flex布局

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <div class="parent">
        <div class="child">
          一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
        </div>
    </div>

    <style>
    .parent{
        height: 600px;
        border: 3px solid red;
        
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .child{
        border: 3px solid green;
        width: 300px;
    }
    </style>

  2. translate -50%

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .parent{
      height: 600px;
      border: 1px solid red;
      position: relative;
    }
    .child{
      border: 1px solid green;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }

  3. margin-top -50%

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    .parent{
      height: 600px;
      border: 1px solid red;
      position: relative;
    }
    .child{
      border: 1px solid green;
      width: 300px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -150px;
      height: 100px;
      margin-top: -50px;
    }

  4. 绝对定位 + margin: auto + 上下左右 0

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    .parent{
      height: 600px;
      border: 1px solid red;
      position: relative;
    }
    .child{
      border: 1px solid green;
      position: absolute;
      width: 300px;
      height: 200px;
      margin: auto;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

  5. table自带功能

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <table class="parent">
        <tr>
            <td class="child">
                一些内容一些内容
            </td>
        </tr>
    </table>

    <style>
        .parent {
            border: 2px solid green;
            height: 600px;  /* 父元素写死高度 */
        }
        .child {
            border: 2px solid pink;
        }
    </style>

  6. 让div变成table

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <div class="table">
        <div class="td">
            <div class="child">
                一些文字一些文字一些文字
            </div>
        </div>
    </div>

    <style>
        div.table {
            display: table;
            height: 600px;
            border: 2px solid green;
        }
        div.td {
            display: table-cell;
            border: 2px solid yellow;
            vertical-align: middle;
        }
        div.child {
            border: 1px solid pink;
        }
    </style>

  7. 利用父元素的伪类（100%高度的伪类 + inline block）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <div class="parent">
        <div class="child">
            一些内容一些内容一些内容一些内容一些内容一些内容一些内容一些内容一些内容一些内容
        </div>
    </div>

    <style>
        .parent {
            border: 2px solid green;
            height: 600px;
            text-align: center;
        }
        .child {
            border: 2px solid pink;
            display: inline-block;
            width: 200px;
            vertical-align: middle;
        }
        .parent:before {
            content: '';
            outline: 1px solid blue;
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
        .parent:after {
            content: '';
            outline: 1px solid blue;
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
    </style>

css优先级

  • 选择器越具体，优先级越高
  • 相同优先级，出现在后面的覆盖前面的
  • 属性后加 !important 优先级最高，但要少用
  • 加权算法

清除浮动

  • 给父元素加.clearfix

    1
    2
    3
    4
    5
    .clearfix:after {
        content: " ";
        display: block;
        clear: both;
    }

  • 给父元素加 overflow: hidden;（触发BFC）

CSS盒模型

  1. content-box，width指定的是content（仅内容）区域宽度，而非实际宽度。
  • 实际宽度 = width + padding + border
  1. border-box，width指定的是左右边框外侧距离。
  • 实际宽度 = width（包含了padding和border）
  1. 通常来说设置box-sizing: border-box更好用，这样能将border和padding包含进元素的宽度中，例如设置元素宽度300px，那就是300px，里面再怎么折腾都可以
0%