css 布局规则 (盒模型，文档流，BFC)

lankongclub
492 阅读3分钟

这是我参与8月更文挑战的第10天，活动详情查看：8月更文挑战

前言

弄明白 css 布局规则，理论上我们就可以随心所欲的布局了

css 盒模型

从 css 角度可以把 HTML 元素看成是一个个盒子的排列

盒子 = 内容 + 内边距 + 边框 + 外边距

image.png

  1. content：盒子的内容，显示任意内容
  2. padding：介于内容和边框之间的区域，透明
  3. border：介于内边距和外边距的区域，可着色
  4. margin：边框之外的区域，透明

盒子可以分为标准盒模型和 ie盒模型

标准盒模型

盒子的 width = content

image.png

ie 盒模型

盒子的 width = content + padding + border

image.png

box-sizing

  1. box-sizing: content-box; 将盒子设置成 标准盒模型
  2. box-sizing: border-box; 将盒子设置成 ie盒模型

文档流

文档流可以分为普通流、绝对定位和浮动

普通流

行间块级元素

  1. 所占宽度：整行
  2. 设置宽度：有效，当宽度小于行宽也会有 margin 顶上
  3. 典型标签：div
.box {
    display: block;
}

行内元素

  1. 所占宽度：内容 + 内边距 + 边框
  2. 设置宽度：无效
  3. 典型标签：span
.box{
    display: inline;
}

行内块级元素

  1. 所占宽度：内容 + 内边距 + 边框 + 外边距
  2. 设置宽度：有效
  3. 典型标签：input
.box{
    display: inline-block;
}

绝对定位 position

  1. position: absolute;
  2. position: fixed;

浮动 float

浮动属性是可以使得元素脱离文档流，左右移动至另一个浮动元素或边界。边界指的是包裹浮动元素盒子的padding

  1. position设置 absolute 或 fixed 会使得浮动失效
  2. 浮动会使得元素display属性变成 block；宽度同行内元素方式；
  3. 浮动会导致内容塌陷，合理使用清除浮动

BFC

BFC 块格式化上下文，css 布局规则之一。布局过程中一些条件会触发盒子形成 BFC，BFC 有着特定的一些规则

触发方式

  1. html标签
  2. float 为 left, right
  3. overflow 为 auto, scroll, hidden
  4. diplay 为 flex, inline-block, tabel-cell, table-caption table, inline-table, inline-flex, grid, inline-grid
  5. position 为 absolute, fixed

约束规则

  1. BFC 的子元素，不会对外界产生影响，同样也不受外界的影响
  2. BFC 中相邻的两个子元素的 margin 短边被遮挡，和普通流一致
  3. BFC 元素不会与浮动元素重叠
  4. BFC 元素内自元素的 margin 与 BFC border 接触

例子

1. margin 重叠 & 解决

image.png

<div class="wrap">
    <div class="item item1">item1</div>
</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>

.wrap{
  /* overflow 触发形成 BFC */
  overflow: hidden;
}
.item{
  width: 100px;
  height: 100px;
  background: skyblue;

}
.item1{
  background: orange;
  margin-bottom: 50px;
}
.item2{
  margin-top: 50px;
  margin-bottom: 50px;
  background: orchid;

}
.item3{
  margin-top: 50px;
  margin-bottom: 50px;
}

item2 和 item3 的 margin 发生了重叠，即本来有 200px 现在只有 100px

item1 被 wrap 包裹，wrap 利用 overflow: hidden; 生成 BFC。BFC 区域不受外界影响，item1 和 item2 之间的距离保持 200px

2. 两栏布局

<div class="side">side</div>
<div class="main">main</div>

.side{
    width: 200px;
    height: 500px;
    float: left;
}

.main{
    overflow: hidden;
    height: 500px;
}

如果 main 不设置 overflow: hidden; 那么 main 的部分会被 side 遮挡。将 main 设置成 BFC ，就不会和其他元素重叠

3. 清除浮动

<div class="wrap">
    <div class="float">float</div>
</div>

<div>123</div>

.wrap{
    overflow: hidden;
}

.float{
    float: left
}

设置 wrap 为 BFC，就可以清除 wrap 内的浮动元素，避免别其他元素重叠

总结

  1. 盒模型可以结合我们生活中的🎁礼品盒理解。两个盒子之间的距离叫做外边距；盒子的壳是边框；盒子的壳距离礼品空白是内边距；礼品就是内容

  2. 默认的盒模型是标准盒模型，但是我喜欢设置成 box-sizing: border-box;，这样可以更好的控制盒子宽度，避免内容溢出

  3. 个人现在用的布局 flex 基本可以处理所有的情况，但是并不是所有情况用 flex 是最优解

  4. BFC 可以理解成 css 布局规则之一。结合 margin 重叠之类的问题去理解这种特性会比较容易

avatar
文章
阅读
粉丝