# 盒子模型
[TOC]
当你的浏览器展现一个元素时,这个元素会占据一定的空间。这个空间由四部分组成。
![](https://box.kancloud.cn/ff5f6c42e138e5cdaa94e71a883dc84d_637x349.png)
* **Margin(外边距)**\- 清除边框外的区域,外边距是透明的。
* **Border(边框)**\- 围绕在内边距和内容外的边框。
* **Padding(内边距)**\- 清除内容周围的区域,内边距是透明的。
* **Content(内容)**\- 盒子的内容,显示文本和图像。
## 边框
用 `border` 属性给元素四周指定统一的边框。在属性值中指定边框的宽度(通常是以显示到屏幕上的像素为单位), 样式, 还有颜色。
样式包括:
![](https://box.kancloud.cn/e33db56a089c2bb87901e962766ba594_683x203.png)
你也可以通过设置样式为 `none` 或 `hidden` 来明确地移除边框。
如果一次只指定某一个方向的边框,就用属性:`border-top,border-right, border-bottom,border-left`。
### 边框样式
使用`border-style`属性设置边框样式
![](http://cndpic.dodoke.com/859e891ba9c476e11b7d24614b091534)
~~~css
div {
/*border-top-style:solid;*/
border-style:solid;
}
~~~
>[info] * 指定一个边框样式时,它将会给元素四周加上边框(上、右、下、左)
> * 指定两个边框样式时,第一个边框样式会作用于顶部和底部,第二个边框样式将会作用于右边和左边。
> * 指定四个边框样式时,这四个值依次指定上右下左四个方向的值
>
### 边框宽度
`border-width`属性设置边框宽度
~~~css
div {
border-style:solid;
border-width:2px;
}
~~~
>[info]同样的`border-width`也有一到四个值用法同`border-style`
### 边框颜色
`border-color`设置边框颜色
~~~css
div {
border-style:solid;
border-width:2px;
border-color:lightblue;
}
~~~
>[info]同样的`border-color`也有一到四个值用法同`border-style`
### 简写属性
border属性设置边框的宽度,样式,颜色。
~~~css
div {
border:2px solid lightblue;
}
~~~
## 外边距和内边距
使用外边距和内边距调整元素的位置,并在其周围创建空间。用`margin`属性或者 `padding` 属性分别设置外边距和内边距的宽度。
* 如果你指定一个宽度,它将会作用于元素四周(上、右、下、左)。
* 如果你指定两个宽度, 第一个宽度会作用于顶部和底部,第二个宽度作用于右边和左边。
* 你也可以按照顺序指定四个宽度: 上、右、下、左。
下面的规则通过给元素四周设置红色边框,标记出了类名为 `remark` 的段落元素。
```css
p.remark {
border: 2px solid red;
padding: 4px;
margin-left: 24px;
}
```
结果如下:
![](https://box.kancloud.cn/466794325bec210a9f575f94360c7bef_368x129.png)
> 注意:
>
> * 外边距margin可以为负,内边距不可以为负。
> * 行内元素设置上下边距不影响行高。
> * 边框是可见的,边距是不可见的,只能看到对其他元素的影响。
### 简写属性:
我们可以根据规定顺序,简写属性:
* 设置两个属性值,那么第一个值表示上下边框的属性,第二个值表示左右边框的属性。
* 设置三个属性值,第一个值表示上边框属性,第二个值表示左右边框属性,第三个值表示下边框属性。
* 设置四个值,一次表示上右下左边框的属性。
例如:
```css
h1{margin:10px 0px 15px 5px}
```
## 行内元素的盒子模型
* 行内元素的盒子模型只能得到一行高度的空间,行高由`line-height`属性决定,没有设置该属性则为内容默认高度。
> 如果设置上下边框或者边距,会导致盒子高度超过行高,盒子上下部分将会与其他元素重叠。这就是行内元素不可设置上下边距的原因。
* 综上所述,不推荐对行内元素设置盒子属性,一般先用`display`属性设置内联元素为块级元素显示,再设置盒子属性。
## 元素盒子属性的默认值
* 大多HTML元素的盒子属性默认值都为0。
* 少部分HTML元素盒子属性存在默认值,如:`body`,`p`,`ul`,`li`,`form`标签等,因此我们在需要的时候可以先初始化他们的属性为0。