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属性从外部

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

直方向上尺寸的变化。典型的可替换元素有、