文章目录
什么是盒子模型
1，html的所有的元素都可看作一个嵌套的盒子，可以设置下图中任何一个有文字表示的内容
从外到内分别由content，padding填充，border边框，margin
2.盒子模型的最简单的实例：发现实际上有颜色的部分和页面边距相差50px
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
<style>
div {
background-color: lightgrey;
border: 25px solid green;
padding: 25px ;
margin: 25px ;
}
</style>
边框 border
边框样式， border-style 属性
默认无边框，不继承父元素
| 值 | 描述 |
|---|---|
| none | 定义无边框。 |
| hidden | 与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 |
| dotted | 定义点状边框。在大多数浏览器中呈现为实线。 |
| dashed | 定义虚线。在大多数浏览器中呈现为实线。 |
| solid | 定义实线。 |
| double | 定义双线。双线的宽度等于 border-width 的值 |
| groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值。 |
| ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值。 |
| inset | 定义 3D inset 边框。其效果取决于 border-color 的值。 |
| outset | 定义 3D outset 边框。其效果取决于 border-color 的值。 |
| inherit | 规定应该从父元素继承边框样式。 |
2实例
<style>
#t1{border-style: none}
#t2{border-style:solid}
#t3{border-style:double}
#t4{border-style:dotted}
#t5{border-style:dashed}
#t6{border-style:groove}
#t7{border-style:ridge}
#t8{border-style:outset}
#t9{border-style:inset}
</style>
边框宽度，border-width 属性
1.可用参数
默认为medium，不继承父元素
| 值 | 描述 |
|---|---|
| thin | 定义细的边框。 |
| medium | 默认。定义中等的边框。 |
| thick | 定义粗的边框。 |
| length | 允许您自定义边框的宽度。 |
| inherit | 规定应该从父元素继承边框宽度。 |
2.实例
<style>
p{border-style: solid}
#t1{border-width: thin}
#t2{border-width:thick}
#t3{border-width:medium}
#t4{border-width:50px}
</style>
边框图片，border-image属性
http://www.runoob.com/cssref/css3-pr-border-image.html
圆角边框，border-radius属性
1.给定值
给四个值，分别表示左上，右上，右下，左下角
给三个值，分别表示左上，左下和右上，右下角
给两个值，分别表示左上右下，左下和右上角
给一个值，表示四个角
http://www.runoob.com/cssref/css3-pr-border-radius.html
相当于角那里有个小圆，border-radius是小圆的半径，小圆与边框相切，小圆外面多余的部分被裁掉，所以就成圆角了
边框颜色，border-color 属性
1.可用参数
默认是透明的，不从父元素继承
| name | 指定颜色的名称，如 “red” |
|---|---|
| colo | r 指定背景颜色。在CSS颜色值查找颜色值的完整列表 |
| transparent | 指定边框的颜色应该是透明的。这是默认 |
| inherit | 指定边框的颜色，应该从父元素继承 |
2.实例
<style>
p{border-style: solid}
#t1{border-color: #FF0000}
#t2{border-color: transparent}
</style>
边框的简写方法
可以设置的属性分别（按顺序）：border-width, border-style,和border-color.。如果没有设置就按照默认值。
2.实例
边框为20p的实线红色边框
<style>
p{border:20px solid #FF0000}
</style>
边框上下左右部分都可以设置
1。一般情况下，如果只设置border，所有上下左右的border都是一个样式。为了灵活我们可以设置每个边上的border的样式
border-left/right/bottom/top设置某个边上的整体样式
border-left/right/bottom/top-color/style/width设置某个边上的某个样式
2.实例
<style>
p{
border-left:20px solid #000000;
border-right:10px solid #FF0000;
border-bottom:5px solid #00FF00;
border-top:25px solid #0000FF;
}
</style>
outline，在border外面再加上一层边框
1，与border的属性相同，唯一的不同就是不能单独设置某个边的样式。
不会增加个元素的宽度，相当于借用margin的空间。如果margin不够还是会显示outline的宽度
2.实例
<style>
#t1{
outline: #FF0000 dotted 10px;
border: #00FF00 solid 10px;
margin: 0px;
}
</style>
margin和padding
1.特点，margin和padding只能指定宽度，不能指定其他值。默认都是0
2.区别：padding（填充）指定border与content间的间隙，margin指定border外边的和其他元素的间隙。
3.相同点：
（1）都可设置整体的margin和padding，用%多少表示或者固定长度表示
（2）一般情况下，如果只设置margin和padding，所有上下左右的margin和padding都是一个样式。为了灵活我们可以设置每个边上的margin和padding的样式
4.实例
（1）设置整体的margin和padding
<style>
#t1{margin:200px;
border: 20px solid #FF0000;
}
#t2{padding:200px;
border: 20px solid #FF0000;}
</style>
（2）设置某个边上的margin和padding
<style>
#t1
{
border: 20px solid #FF0000;
margin-left: 10px;
margin-right: 20px;
margin-bottom: 50px;
margin-top: 5px;
}
#t2
{
border: 20px solid #FF0000;
padding-left: 10px;
padding-right: 20px;
padding-bottom: 50px;
padding-top: 5px;
}
</style>
阴影设置
总结盒子模型
1.content表示内容的样式
2.padding表示内容和边框之间的距离
3.border表示边框的样式
4.margin表示边框外的距离
5.outline表示margin里的border外的边框