一.盒模型介绍
所谓的盒模型，是CSS中的一个重要的概念, 用来布局和设计页面。
由：margin(外边距)、border(边框)、padding(内边距)、content(内容),四部分组成。
Html的所有元素都可以当成盒子来对待
如下图
二. CSS3中对盒模型扩展
2.1 在css中影响盒子大小的因素：
我们知道在css中影响盒子大小的因素有border、padding、content.
margin只能改变盒子与盒子之间的距离，不会影响盒子大小
通过设置标签元素的width, height，改变的只是盒子中content的大小
盒子实际的width：
左边框 + 左内边距 + 内容宽度 + 右内边距 + 右边距
盒子实际的height：
上边框 + 上内边距 + 内容宽度 + 下内边距 + 下边距
如下图
2.2 css3中引入了box-sizing，来对盒子模型进行扩展
box-sizing有两个值：content-box 和 border-box
① content-box
盒子的实际宽度=width + 左右border + 左右padding之和
示例代码
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> /*② 设置盒子样式*/ div { /*width height 设置的是content 的宽高*/ width: 300px; height: 300px; /*盒子与盒子之间的距离*/ margin: 0px; /*设置边框*/ border: 10px solid black; /*内边距*/ padding: 10px; box-sizing: content-box; } </style> </head> <body> <!--① 创建一个div盒子--> <div></div> </body> </html>效果
② border-box
盒子的实际宽度就等于设置的width值，通过改变border 和 padding 值，不会影响盒子的大小。
示例代码
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> /*② 设置盒子样式*/ div { /*width height 设置的是content 的宽高*/ width: 300px; height: 300px; /*盒子与盒子之间的距离*/ margin: 0px; /*设置边框*/ border: 10px solid black; /*内边距*/ padding: 10px; box-sizing: border-box; } </style> </head> <body> <!--① 创建一个div盒子--> <div></div> </body> </html>运行效果
