# 盒子模型
页面布局要学习三大核心，盒子模型，浮动和定位.学习好盒子模型能非常好的帮助我们布局页面.
盒子模型组成部分：
- 外边距
- 内边距
- 边框
- 内容
# 边框
border
border可以设置元素的边框。边框有三部分组成：边框宽度（粗细）边框样式边框颜色
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式 |
| border-color | 边框颜色 |
# border-style
| 属性 | 说明 |
|---|---|
| none | 无边框。与任何指定的border-width值无关 |
| hidden | 隐藏边框。IE不支持 |
| dotted | 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否为实线 |
| dashed | 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为线。否则为实钱 |
| solid | 实线边框 |
| double | 双线边框。两条单线与其间隔的和等于指定的border-width值 |
| groove | 根据border-color的值画3D凹槽 |
| ridge | 根据border--color的值画菱形边框 |
| inset | 根据border--colo的值画3D凹边 |
| outset | 根据border-colore的值画3D凸边 |
# border-collapse
border-collapse属性控制浏览器绘制耒格边框的方式。它控制相邻单元格的边框。
- collapse单词是合并的意思
- border-collapse:collapse
表示相邻边框合并在起
<table cellspacing="0">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>18</td>
</tr>
<tr>
<td>李四</td>
<td>19</td>
</tr>
</table>
</body>
<style>
table {
width: 500px;
height: 240px;
border-collapse: collapse;
}
table,td,th {
border: 1px solid black;
}
td {
text-align: center;
}
</style>
# 内边距
padding
属性用于设置内边距，即边框与内容之间的距离。
<body>
<div>
内容
</div>
</body>
<style>
div {
padding: 0px 20px;
border: 1px solid black;
width: 200px;
height: 200px;
}
</style>
# 外边距
margin属性用于设置外边距，即控制盒子和盒子之间的距离。
<body>
<div>
内容
</div>
<div>
内容
</div>
</body>
<style>
div {
padding: 0px 20px;
border: 1px solid black;
width: 200px;
height: 200px;
margin-bottom: 20px;
}
</style>
# 外边距合并-嵌套块元素塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：
- 可以为父元素定义上边框。
- 可以为父元素定义上内边距。
- 可以为父元素添加overflow.hidden。
<body>
<div class="parent">
<div class="son"></div>
</div>
</body>
<style>
.parent {
background-color: rgb(241, 239, 199);
width: 500px;
height: 500px;
/* border-top: 1px solid transparent; */
/* padding: 1px; */
overflow: hidden;
}
.son {
margin-top: 50px;
width: 200px;
height: 200px;
background-color: rgb(169, 226, 248);
}
</style>
# 圆角边框
在CSS3中，新增了圆角边框样式，这样我们的盒子就河以变圆角了。
border-radius
<body>
<div class="radius"></div>
</body>
<style>
.radius {
width: 100px;
height: 100px;
border-radius: 5px;
background-color: skyblue;
}
</style>
# 盒子阴影
CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊距离。 |
| spread | 可选。阴影的尺寸。 |
| color | 可选。阴影的颜色。请参阅CSS颜色值。 |
| inset | 可选。将外部阴影(outset)改为内部阴影。 |
<body>
<div class="radius"></div>
</body>
<style>
.radius {
width: 100px;
height: 100px;
border-radius: 5px;
background-color: skyblue;
box-shadow: 10px 10px 0 0 rgba(0, 0, 0, 0.1);
}
</style>
# 文字阴影
在CSS3中，我们可以使用text-shadow属性将阴影应用于文本。
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色。参阅CSS颜色值。 |
# 浮动
网页布局的本质一用CSS来摆放盒子。把盒子摆放到相应位置
CSS提供了三种传统布局方式（简单说就是盒子如何进行排列顺序）
flot 属性用于创建浮动框，将其移动到一边，直到佐边缘或右边缘触及包含块或另一个浮动框的边缘。
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动（默认值） |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
<body>
<div class="flot-left"></div>
<div class="flot-right"></div>
</body>
<style>
.flot-left {
width: 100px;
height: 100px;
background-color: skyblue;
float: left;
}
.flot-right {
width: 100px;
height: 100px;
background-color: paleturquoise;
float: right;
}
</style>
# 特性
- 浮动元素会脱离标准流（脱标）
- 浮动的元素会一行内显示并且元素顶赔部对齐
- 浮动的元素会具有行内块元素的特性
# 清除浮动
语法：
选择器：{
clear: both;
}
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
清除浮动方法
- 额外标签法也称为隔墙法，是W3C推荐的做法。
- 父级添加overflow属性
- 父级添加after伪元素
- 父级添加双伪元素
# 额外标签法
必须是块元素
<body>
<div class="parent">
<div class="flot-left"></div>
<div class="flot-right"></div>
<div class="clear-fix"></div>
<div class="footer"></div>
</div>
</body>
<style>
.footer {
height: 200px;
background-color: black;
}
.flot-left {
width: 100px;
height: 100px;
background-color: skyblue;
float: left;
}
.flot-right {
width: 100px;
height: 100px;
background-color: paleturquoise;
float: left;
}
.clear-fix {
/*如果不加上这个clear，会高度坍塌*/
clear: both;
}
</style>
# 父级添加 overflow
可以给父级添加overflow属性，将其属性值设置为hidden、.auto或scroll。
注意是给父元素添加代码
<body>
<div class="parent">
<div class="flot-left"></div>
<div class="flot-right"></div>
</div>
<div class="footer"></div>
</body>
<style>
.parent {
overflow: hidden;
width: 800px;
}
.flot-left {
width: 100px;
height: 100px;
background-color: skyblue;
float: left;
}
.flot-right {
width: 100px;
height: 100px;
background-color: paleturquoise;
float: left;
}
.footer {
width: 800px;
height: 200px;
background-color: black;
}
</style>
# :after伪元素法
:after方式是额外标签法的升级版。也是给父元素添动加
<body>
<div class="parent clear-fix">
<div class="flot-left"></div>
<div class="flot-right"></div>
</div>
<div class="footer"></div>
</body>
<style>
.clear-fix::after {
content: '';
display: block;
height: 0;
clear: both;
overflow: hidden;
}
.clear-fix {
/* IE6 IE7 专有 兼容 */
*zoom: 1;
}
.parent {
overflow: hidden;
width: 800px;
}
.flot-left {
width: 100px;
height: 100px;
background-color: skyblue;
float: left;
}
.flot-right {
width: 100px;
height: 100px;
background-color: paleturquoise;
float: left;
}
.footer {
width: 800px;
height: 200px;
background-color: black;
}
</style>
# 双伪元素
也是给给父元素添加
<body>
<div class="parent clear-fix">
<div class="flot-left"></div>
<div class="flot-right"></div>
</div>
<div class="footer"></div>
</body>
<style>
.clear-fix::before,.clear-fix::after {
content: '';
display: table;
}
.clear-fix::after {
clear: both;
}
.clear-fix {
*zoom: 1;
}
.parent {
overflow: hidden;
width: 800px;
}
.flot-left {
width: 100px;
height: 100px;
background-color: skyblue;
float: left;
}
.flot-right {
width: 100px;
height: 100px;
background-color: paleturquoise;
float: left;
}
.footer {
width: 800px;
height: 200px;
background-color: black;
}
</style>