盒模型
盒模型：
所谓盒模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。
这些盒子们都要按照可见板式模型在页面上排布。
可见的板式模型主要由三个属性控制：position 属性、display 属性和 float属性。
position属性控制页面上元素间的位置关系。display属性控制元素是堆叠、并排或者不在页面上显示。float属性提供控制的方法，以便于把元素组成成多栏布局。
盒模型讲解：
在默认的情况下，每个盒子的边框是不可见的，背景也是透明的。
所以我们
不能直接的看到页面中的盒子结构。我们先从每个元素的属性开始，这些属性分为3组：
边框(border):可以设置边框的宽度、样式、颜色。内边距(padding):可以设置盒子内容区(content)和边框的间距。外边距(margin):可以设置盒子和邻元素的间距。
换个说法：
- 内容(content)：就是盒子里装的东西。
- 内边距(padding)：怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料。
- 边框(border)：就是盒子的本身。
- 外边距(margin)：就是两个盒子之间的距离。
一个盒子有4条边，因此与边框、内边距、外边距相关联的属性也各有4个，分别是
上(top)右(right)下(bottom)左(left)
- border-top,border-right,border-bottom,border-left
- padding-top,padding-right,padding-bottom,padding-left
- margin-top,margin-right,margin-bottom,margin-left
不用死记，记住
border边框、padding内边距、margin外边距就可以了
简写样式：
CSS为margin,border,padding分别规定了简写属性，通过一条声明就可完成设定。
在每个声明中，属性值得顺序都是上右下左的顺序，想象一下顺时针旋转就可以了。
例如：
div{
margin-top:3px;
margin-right:4px;
margin-bottom:5px;
margin-left:7px;
}
简写：
div{
margin:3px 4px 5px 7px;
}
有时不需要将4个值全部写出，哪一边没写，就用对边的值。{margin:3px 4px 5px;}那么左边的值就和右边的值一样，4px。{margin:3px 4px;}： 上下边框3px，左右边框4px{margin:3px;} ：上下左右边框都是3px
- css
```css
/由于在不同的浏览器中元素的默认的margin和padding值可能不同
建议把下面这条规则作为样式表中的第一条规则。
这条规则把所有元素默认的外边距和内边距都设定为零 /
- {
margin: 0px;
padding: 0px;
}
div {
height:100px;/设置div高度/
width:300px;/设置div宽度/
margin: 10px;/设置外边距/
border: 50px solid #900;/设置盒子的边框 样式 颜色/
padding: 20px;/设置内边距/
font-size: 20px;/设置字体大小/
}
```
- html
<div style="float:left;">div的边框宽50px,实线,红色，内边距为20px，外边距10px </div> <div style="float:left;">div的边框宽50px,实线,红色，内边距为20px，外边距10px </div>在设置盒子样式前提，需要明白，有些行内标签样式（如：span标签）虽然可以设置内外边距，但是在页面中没有办法显示
边框相关属性
宽度(border-width):
可以使用thin,medium,thick等文本值，也可以使用除百分比和负数之外的任何绝对值。
样式(border-style):
| 样式属性 | 说明 |
|--|--|
|none|(无边框)|
|hidden|(隐藏边框)|
|dotted|(点线边框)|
|dashed|(虚线边框)|
|solid|(实线边框)|
|double|(双线边框)|
|groove|(3D凹槽边框)|
|ridge|(3D凸槽边框)|
|inset|(3D凹入边框)|
|outset|(3D凸出边框)|
|...| ...|
颜色(border-color):可以使用任何颜色值，包括RGB,HSL,十六进制颜色值和颜色相关的关键字。
CSS3提供的圆角边框：border-radius：该属性用于指定圆角边框的圆角半径。
| 属性|说明|
|--|--|
|border-top-left-radius:|该属性用于指定左上角的圆角半径。|
|border-top-right-radius:|该属性用于指定右上角的圆角半径。|
|border-bottom-left-radius:|该属性用于指定左下角的圆角半径。|
|border-bottom-right-radius:|该属性用于指定右下角的圆角半径。|
> 示例值：0px
CSS3新增的box-shadow属性为盒模型添加阴影，该属性可用于整个盒模型添加阴影。
box-shadow:是一个复合属性。它含有以下5个属性值。hOffset:该属性值控制阴影在水平方向的偏移。vOffset:该属性值控制阴影在垂直方向的偏移blurLength:该属性值控制阴影的模糊程度。scaleLength:该属性值控制阴影的缩放程度。color:该属性值控制阴影的颜色。div{ box-shadow:10px; }
- css
#divone { width: 300px; height: 300px; margin: 200px auto; padding: 10px; font-size: 25px; text-align: center; line-height: 300px; border: 10px solid #900; border-radius: 40px; /*设置圆角的div*/ box-shadow: 10px 10px 5px #000000;/*对盒子添加阴影*/ } - html
<div id="divone">圆角边框 border-radius</div> <div id="divtwo"></div>盒子外边距
叠加外边距： - 垂直方向上的外边距叠加，取边距较大的值。
- 水平方向上的外边距是两个相邻外边距之和。
<p>Numc tortor ante,accumsan vel malesuada
vulputate,tempus quis dolor .In ut purus nulla.
Etiam tincidunt pharetra metus eget ultricies.
Integer mi ante</p>
<p>Numc tortor ante,accumsan vel malesuada
vulputate,tempus quis dolor .In ut purus nulla.
Etiam tincidunt pharetra metus eget ultricies.
Integer mi ante</p>
<p>Numc tortor ante,accumsan vel malesuada
vulputate,tempus quis dolor .In ut purus nulla.
Etiam tincidunt pharetra metus eget ultricies.
Integer mi ante</p>
- css
*{ margin:0px;padding:0px;} p { height: 50px; border: 2px solid #900; margin-top: 50px; margin-bottom: 30px; }🤩CSS教学往期回顾
