盒子模型
一、盒子模型是什么
盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：内容、内边距、边框、外边距。
二、标准盒子模型
1、概念
标准盒模型采用的W3C标准，盒子的content内容部分由width宽度和height高度决定，添加padding内边距或border外边框后，宽高都会进行相应增长；
2、标准的盒子模型图：
标准盒子模型.png
3、标准盒子模型的css相关属性
（1）content内容
在盒子模型中存放相关的内容，主要包括文本、图片、视频、音频等html元素。
（2）padding内边距
让内容和盒子的边框产生间距，相当于给盒子添加泡沫，即padding是长在盒子与内容之间的。（主要控制子元素在盒子内部的位置）
| 属性值 | 意义 |
|---|---|
| padding:5px | 一个值，代表上下左右 |
| padding:5px 5px | 两个值，第一个值代表上下，第二个值代表左右 |
| padding:5px 5px 5px | 三个值，第一个值代表上，第二个值代表左右，第三个值代表下 |
| padding:5px 5px 5px 5px | 四个值，分别代表上、右、下、左 (顺时针转) |
注意：当给盒子内边距padding值时，盒子会被撑开，为了避免盒子被撑开，最好要给盒子设置box-sizing:border-box属性，内减盒子，防止盒子被内边距撑开
（3）border边框
border可以设置元素的边框。边框有三部分组成：边框宽度（粗细）边框样式 边框颜色
语法：
border:border-width,border-style,border-color
| 属性 | 作用 |
|---|---|
| border-width | 边框粗细，单位px |
| border-style | 边框样式 |
| border-color | 边框颜色 |
边框样式
| 边框样式 | 作用 |
|---|---|
| none | 没有边框 |
| solid | 边框为单实线（最常用） |
| dashed | 边框为虚线 |
| dotted | 边框为点线 |
| double | 边框为双实线 |
（4）margin外边距
margin属性用于设置外边距，即控制盒子和盒子之间的距离。
margin的简写方式代表的意义跟padding完全一致。
外边距可以让块级盒子水平居中，但是必须满足两个条件；
（1）盒子必须指定了宽度（width）。
（2）盒子左右的外边距都设置为auto。
清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素默认的内外边距。
<style>
*{
padding:0;/*清除内边距*/
margin:0;/*清除外边距*/
}
</style>
网友评论