CSS盒子模型:
对一个文档进行布局时,浏览器的渲染引擎会把每个元素看作是一个一个的矩形盒子,而这个盒子是由4部分组成,内容content、内边距padding、边框border、外边距margin。
content:实际内容大小,用来显示文字或图像。
padding:内边距,让边框和内容之间有间距。
border:边框,它有样式、粗细、颜色三个属性。
margin:外边距,会让自身与其他元素之间有间距。
盒子模型分为标准盒模型和怪异盒模型:
标准盒模型:盒子的宽属性就是内容content的宽度。也就是说,当给一个盒子设置了宽属性、内边距和边框,那么这个宽就只是内容的宽度,不会包含内边距和边框。即盒子的总宽度=盒子内容的width+左右padding+左右border,高度也是这样。所以,就是说padding和border就会撑大盒子。
怪异盒模型:盒子的宽属性不是内容content的宽度,而是元素的内容、内边距和边框的宽度之和。如果给一个元素设置了width属性,那么盒子的总宽度就是这个width。这个width就包含了内容content的width+左右padding+左右border。
当实际使用时,给一个盒子设置了宽高以及padding时,它的总宽高就会加上padding的值,会总体撑大盒子的尺寸,影响页面的布局。
为了解决有了padding和border撑大盒子的现象,所以CSS就提出了box-sizing:border-box(怪异盒模型)来解决,让盒子总宽高包含padding和border。
box-sizing: content-box(默认标准盒模型),它的总宽就是content内容的宽度。