盒模型

最新推荐文章于 2020-09-21 22:55:32 发布

原创最新推荐文章于 2020-09-21 22:55:32 发布 · 185 阅读

CC 4.0 BY-SA版权

文章标签：

22 篇文章

订阅专栏

box:盒子，每个元素在页面中都会生成一个矩形区域（盒子）。

盒子类型：

行盒在页面中不换行，块盒独占一行。

display属性默认值为inline.

浏览器默认样式表设置的块盒：容器元素、h1~h6、p

常见的行盒：span、a、img、video、audio

无论是行盒还是块盒，都由以下几个部分组成，从内到外分别是：

width、height,设置的是盒子内容的宽高。

内容部分通常称作整个盒子的 内容盒 content-box

盒子边框到盒子内容的距离

padding-left、padding-right、padding-top、padding-bottom

padding：简写属性，写法(顺时针)：


padding: ↑ → ↓ ←

padding：10px 20px 10px 20px = padding: 10px 20px

padding：10px 10px 10px 10px = padding: 10px

填充区 + 内容区 = 填充盒 padding-box

边框 = 边框样式 + 边框宽度 + 边框颜色

边框样式： border-style

如有边框，必须先选择边框样式，否则边框其他属性无效。

边框宽度： border-width

边框颜色： border-color

边框颜色默认为字体颜色。

边框样式、边框宽度、边框颜色都为速写属性（简写属性），将四个方向属性都统一设置的属性，当然也可以分开设置，如：border-top-width:40px

除此之外,border属性可以将边框样式、边框宽度、边框颜色一并属性，写法：border ：4px dashed red;

边框区 + 填充区 + 内容区 = 边框盒 border-box

边框到其他盒子的距离

margin-left、margin-right、margin-top、margin-bottom

速写属性margin设置四方向属性。