盒子模型要点

本质上CSS和html的组合就是对网页上各个元素（盒子）进行布局和样式加工。

每个网页元素都是一个盒子，我们需要掌握的就是如何去对盒子进行布局、修改盒子的样式。

布局要考虑的问题	样式需要考虑的问题
该部分由几个盒子组成	盒子的大小（宽、高）
用什么盒子（标签）最好	有无边框
如何定位	有无padding，盒子之间的间距margin
	有无背景（图片、颜色）
	文字和图片的相关样式设置

网页设计时，先思考布局方面的问题，再思考样式方面的问题。

CSS3的盒子新特性：

1.box-sizing:content-box   盒子大小为width+padding+border(以前默认的)

2.box-sizing:border-box     盒子大小为width。添加padding+border不会撑大盒子，即不会影响盒子大小。

关于布局方式对样式的影响：

不同布局方式对样式的影响主要体现在盒子宽高设定和不同盒子的排列上。

 

布局方式	宽高设置与盒子排列
传统pc端（标准流）	通过指定具体像素值来实现。
百分比布局（移动端）	通过指定宽的属性值为百分比，高度一般仍沿用具体像素值。（京东）
flex布局（移动端）	通过flex属性的设置达到自动摆放盒子的目的，其过程往往较少指定盒子具体的宽。高度仍需要指定具体像素大小。（携程）
rem布局（移动端）	rem是一个单位。1rem=html元素中的font-size。以html中的font-size为基准进行宽度的设定。（苏宁）
vx布局（移动端）	vx是一个单位。1vx=0.01屏幕宽度。（b站）

不同布局方式是可以混用的，主要是兼容性的问题。

CSS 兼容性查询网站http://www.caniuse.com/