Css的两种盒模型

在进行网页的搭建时，通常会用到很多的标签，可以形象的把这些标签看成是一个个矩形，这些矩形盒子搭建成了网页。在描述盒子模型前先来介绍一下盒子的一些属性。

盒子通常指的是块元素（但是行内元素在浏览器的查看器内也会出现盒子模型的图片），一个完整的盒子由四个部分组成，它们分别是：

margin   外边距

        代表盒子四周的区域。相邻元素的边距会合并

border    边框

​        设定介于padding的外边缘与margin的内边缘之间，默认值为0

padding   内边距

        在任何定义的边界内的元素内容周围生成空间

width & height    

​    内容区域的宽与高，可以在标签的样式代码里直接设置

在html文件里定义了一个div标签，然后在浏览器里按F12查看一下

 

 在浏览器内按F12后再按shift+ctrl+c  选中div    可以在右侧的查看器内看到定义的盒子模型

 而同样的  设置的a标签和p标签也有

 

 在浏览器查看器里的盒子模型可以很清楚的看到盒子的具体组成

由外向里分别是   margin  外边距-->border  边框-->padding  内边距-->内容区域content

下面开始介绍属性的设置

1.margin  外边距， 用来控制当前元素与其他元素或者浏览器边框的距离， 例如：

 这里为绿色背景色的div添加了200px大小的左边距

 浏览器内的div离浏览器左侧偏移了200px（因为当前div元素左侧没有同级元素，所以参照物变成了浏览器）

设置其他方向上的边距大小：

margin-left 左边距

margin-right 右边距

margin-top 上边距

margin-bottom  下边距

有一种快捷的设置方法

margin：a,b,c,d    这里a代表上边距，b代表右边距，c代表下边距,d代表左边距，按照一个顺时针的顺序来进行排序

 

 或者直接border: a  b;  这里a是上下边距，b是左右边距

 

 2.border 边框

边框是环绕在标签宽度和高度上的线条

border的常见用法：

border-width 设置边框宽度 

border-color 设置边框颜色

border-style 设置边框样式，它的常用取值有：

边框样式取值： ​

none 定义无边框。 ​

hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。

​solid 定义实线。 ​

double 定义双线。双线的宽度等于 border-width 的值。 ​

举个例子：

 

 这里设置了颜色为黑色，宽为5px的实线边框

在写的时候一般直接使用快捷的写法

border:(边框宽度) (边框样式) (边框颜色)；

 

在上面的连写中，宽度跟颜色都可以省略（颜色默认是黑色），样式不可以省略
 

注意连写也可以用在写单独的一条边框

border-top: 边框的宽度 边框的样式 边框的颜色;

​ border-right: 边框的宽度 边框的样式 边框的颜色;

​ border-bottom: 边框的宽度 边框的样式 边框的颜色; ​

border-left: 边框的宽度 边框的样式 边框的颜色;

3.padding  内边距

 边框和内容之间的距离就是内边距

padding的设置跟margin类似

​ padding-top: ;

padding-right: ;

​ padding-bottom: ; ​

padding-left: ;

.给标签设置内边距之后, 标签占有的宽度和高度会发生变化 ​

.在给标签设置内边距之后, 内边距也会有背景颜色

 给这个边长300px的正方形盒子添加一个padding属性

 

可以看到盒子被拉长了

连写的格式 ​ padding: 上 右 下 左;

盒子模型：

在Css中有两种盒子模型，一种是内容盒子，一种是边框盒子。内容盒子是默认盒子，在创建一个新盒子时盒子类型默认为内容盒子

内容盒子：

在给标签（默认情况下，也就是内容盒子）设置宽高时，width和height设置的是盒子模型中的content的width和height,边框以及内边距是往外挤压的，这些部分会占据外面没有定义给当前盒子的部分。例如

 

 

 可以看到，内容盒子的边框跟内边距会影响该标签在浏览器内占据的区域

总结一下就是

内容区的宽

width

内容区的高

height

盒子的宽

width+paddingLeft+paddingRight+borderLeft+borderRight

盒子的高

height+paddingTop+paddingBottom+borderTop+borderBottom

所占屏幕空间的宽

width+paddingLeft+paddingRight+borderLeft+borderRight +marginLeft+marginRight

所占屏幕空间的高

height+paddingTop+paddingBottom+borderTop+borderBottom+marginTop+marginBottom

 

在理解时最好参考盒子模型的图片

第二种盒子模型是边框盒子  border-box   两种盒子的转换需要用box-sizing来实现

边框盒子最大的特点就是它的border和内边距padding都是向内挤压的，即它只会占据设置给它的width和height

例如

 

将鼠标移到该元素的盒子模型中的padding，可以看到padding也是向内进行挤压，总结一下就是

内容区的宽

width-paddingLeft-paddingRight-borderLeft-borderRight

内容区的高

height-paddingTop-paddingBottom-borderTop-borderBottom

盒子的宽

width

盒子的高

height

所占屏幕空间的宽

width+marginLeft+marginRight

所占屏幕空间的高

height+marginTop+marginBottom

 以上就是Css的两种盒子模型