CSS传统布局基础

摘自 https://mp.weixin.qq.com/s/-LcNZWFFty2lWuND6uuNNA

传统布局方案：浮动、定位等手段

flex布局方案

grid布局方案

传统布局方案来源于CSS2，兼容性好

flex方案通过父元素单方面配置相关的CSS属性来决定子元素的布局规则，

且大多数情况下无需子元素的参与，学习成本低，代码更加简练。但是要到

IE10才开始支持 ，且需要使用-ms-前缀（IE11无需）。

grid布局方案由微软提出，由IE10开始支持，但需要使用-ms-后缀（IE11+

不再需要）。

目前传统布局方案对用户最友好，有一定适用性，这里讲的就是传统布局方案。

box-sizing（CSS3属性）

box-sizing是CSS3属性，在IE8+（包含IE8）开始支持，在W3C标准中,box-sizing

的值仅有content-box和border-box（firefox则额外支持padding-box）。

当box-sizing的值为content-box（默认值）时，有：

width = content-width;

height = content-height;

当box-sizing的值为border-box时，有：

width = content-width + padding-left + padding-right + border-left-width + border-right-width;

height = content-height + padding-top + padding-bottom + border-top-height + border-bottom-height;

块级元素

1、独占一行（width默认100%，hieght为0）；

2、可以设置任何尺寸相关的属性（width、padding、margin和border）；

行内级元素

可置换行内元素：其展示内容是通过元素的src、value等属性或CSS content属性从外部

引入得到的，可被替换的。随着内容来源或数量的变化，可置换元素本身也会有水平和垂

直方向上尺寸的变化。典型的可替换元素有<img>、<object>、<video>、<embed>，表单

类的可替换元素有<textarea>和<input>，某些元素只在一些特殊情况下表现为可替换元素。

例如<audio> 、<object>、<canvas>和<applet>..

特别地，通过CSS contenr属性来插入的对象又被称作匿名可置换元素。

不可置换行内元素

“不可置换行内元素”其实就是我们常见的行内元素，有<a>和<span>等。“不可置换行内元素”

是相对于“可置换行内元素”的，其展示的内容是在CSS作用域范围内的，是不可替换的。

行内级元素有如下几个布局特性：

1、在一行内可以与多个同类型的元素按从左到右的顺序排列；

2、不可置换行内元素不能设置width、height和垂直方向上的margin，而可置换行内元素则可以；

3、在水平和垂直方向上的对齐方式，行内级元素分别受父元素的text-align属性和自身vertical-align

属性的控制 （父元素是table-cell元素时，也受父元素的vertical-align属性控制） ，在水平方向上默认左对齐，在垂直方向上默认在行框的baseline基线上显示 （“行框”的概念，会在后面深入讲解)；

行内块级元素

1、排列方式与行内级元素同，不独占一行，在一行内按从左到右的顺序排列；

2、水平和垂直方向上的对齐方式与行内级元素同；

3、和块级元素一样，可以设置任何尺寸属性（但width默认为0）；

格式化上下文

是一个独立封闭的渲染区域，在这个区域的所有元素，从区域的顶部起，一个接一个地根据自身的布局特性进行排列。

创建BFC元素的方式有如下几种（摘自MDN BFC）：

• 根元素或其它包含它的元素
• 浮动元素 (元素的 float 不是 none)
• 绝对定位元素 (元素的 position 为 absolute 或 fixed)
• 内联块 (元素具有 display: inline-block)
• 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
• 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
• overflow 值不为 visible 的块元素
• display: flow-root
• contain为以下值的元素: layout, content, 或 strict
• 弹性项 (display: flex 或 inline-flex元素的子元素)
• 网格项 (display: grid 或 inline-grid 元素的子元素)
• 多列容器 (元素的 column-count 或 column-width 不为 auto， 包括 column-count: 1的元素)
• column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。

BFC元素有如下特性：

1. 解决边距重叠问题；

为了避免这些问题，兄弟元素间尽量不要设置相邻的margin，子元素也不要使用margin来隔离父元素，这样能尽量保证你的CSS代码，在各种版本的浏览器都有较好的兼容性（显示一致）。

2.避免浮动元素父元素高度塌陷

3、占据文档流的BFC元素（可使用overflow:auto创建）

说明

• 文档流中的BFC元素, width为auto时，会占满当前行的剩余宽度；

文档流

作者定义：文档流，是页面元素默认存放的“容器”。

脱离文档流

其实就意味着：元素脱离了默认存放的容器，换到另外一个容器存放。 一个元素脱离了文档流，这样会导致： 其父元素无法识别其，其也不参与父元素高度的计算 。若有一个父元素的所有子元素都脱离文档流，则会出现“高度塌陷”问题。常见的脱离文档流的方法有：

• 将元素设置为浮动元素
• 将元素设置为absolute、fixed元素

清除浮动

清除浮动，其作用是改变 “当前元素” 与“ 前一个声明的浮动元素” 之间的默认布局规则，这种改变主要体现为： 让当前元素换行显示 。

使用者： 当前元素（浮动元素或者非浮动元素的块级元素）

作用对象（清除谁的浮动）： 前一个声明的浮动元素

目的（作用）： 让当前元素换行显示

clear属性的取值可以是left、right、both，

清除浮动后的margin合并问题

1）两个浮动元素之间，其垂直方向上的margin不会发生合并：

2）非浮动的块级元素和浮动元素之间，其垂直方向上的margin会发生合并：

5.6.3.4. 清除浮动的特殊应用：解决父元素高度塌陷问题

当一个父元素里面的所有元素都是浮动元素时，此时父元素无法识别这些浮动子元素，会进一步导致父元素发生高度塌陷问题。一种通用的解决方案就是在父元素内部的尾部append一个非浮动的、尺寸为0的块级元素（后面简称fix元素），然后使用clear：both，让这个fix元素换行显示，进而让父元素能够识别前一行的高度。

这种朴素的方案其实就是clearfix的基本原理，clearfix只是更加优雅地用:after来实现fix元素。

特别说明：解决父元素高度塌陷问题，还可以通过将父元素声明为BFC元素来实现。