什么是盒子模型？
盒子模型就是布局网页的一种手段包括边框（border）、外边距（margin）、内边距（padding）、网页元素（content）、宽（width）、高（height）等元素。
边框border：
1. 边框颜色：border-color：
| 属性 |
说明 |
示例 |
| border-top-color |
上边框颜色 |
border-top-color:#369; |
| border-right-color |
右边框颜色 |
border-right-color:#369; |
| border-bottom-color |
下边框颜色 |
border-bottom-color:#fae45b; |
| border-left-color |
左边框颜色 |
border-left-color:#efcd56; |
| border-color |
四个边框为同一颜色 |
border-color:#eeff34; |
| 上、下边框颜色：#369 左、右边框颜色：#000 |
border-color:#369 #000; |
|
| 上边框颜色：#369 左、右边框颜色：#000 下边框颜色：#f00 |
border-color:#369 #000 #f00; |
|
| 上、右、下、左边框颜色： #369、#000、#f00、#00f |
border-color:#369 #000 #f00 #00f; |
四条边框写颜色时的顺序是顺时针的：上、右、下、左，如果只设置两个值的话看对边。
2. 边框粗细：border-width
Thin（细）、medium（中间）、thick（粗）、像素值
border-top-width:5px;
border-right-width:10px;
border-bottom-width:8px;
border-left-width:22px;
四条边框写粗细时的顺序也是顺时针的：上、右、下、左，如果只设置两个值的话看对边。
border-width:5px ; 【上5、右5、下5、左5】
border-width:20px 2px; 【上20、右2、下20、左2】
border-width:5px 1px 6px; 【上5、右1、下6、左1】
border-width:1px 3px 5px 2px; 【上1、右3、下5、左2】
3. 边框样式：border-style
none（没有）、hidden（隐藏）、dotted（点线）、dashed（虚线）、solid（实线）、double（双线）、groove（凹槽边框）、ridge（垄状边框）、inset（嵌入边框）、outset（外凸边框）
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
四条边框写类型时的顺序也是顺时针的：上、右、下、左，如果只设置两个值的话看对边。
border-style:solid ; 【上实、右实、下实、左实】
border-style:solid dotted; 【上实、右点、下实、左点】
border-style:solid dotted dashed; 【上实、右点、下虚、左点】
border-style:solid dotted dashed double; 【上实、右点、下虚、左双】
4. 同时设置边框的粗细、样式和颜色
border:1px solid #3a6587;
border: 1px dashed red;
外边距margin：
1. margin-top、margin-right、margin-bottom、margin-left、margin
例如：
margin-top: 1 px
margin-right : 2 px
margin-bottom : 2 px
margin-left : 1 px
四个外边距写距离时的顺序也是顺时针的：上、右、下、左，如果只设置两个值的话看对边。
margin :8px; 【上8、右8、下8、左8】
margin :3px 5px; 【上3、右5、下3、左5】
margin :3px 5px 7px; 【上3、右5、下7、左5】
margin :3px 5px 7px 4px; 【上3、右5、下7、左4】
2. 外边距的妙用
margin:0px auto;
网页居中对齐的必要条件：块元素并且必须固定宽度。
内边距padding：
1. padding-left、padding-right、padding-top、padding-bottom、padding
padding-left:10px;
padding-right: 5px;
padding-top: 20px;
padding-bottom:8px;
四个内边距写距离时的顺序也是顺时针的：上、右、下、左，如果只设置两个值的话看对边。
padding:10px; 【上10、右10、下10、左10】
padding:10px 5px; 【上10、右5、下10、左5】
padding:30px 8px 10px ; 【上30、右8、下10、左8】
padding:20px 5px 8px 10px ; 【上20、右5、下8、左10】
默认边距：
在HTML5中很多元素都有默认的外边距或者内边距。
比较特殊的是div，没有外边距或者内边距，其他的都有。
去掉边距的方法有：
margin:0;
padding:0;
（清除默认样式）
清除所有元素的边距方法：
*{ margin:0; padding:0; }
（*就是表示包括了所有的元素）
盒子型模的尺寸：
盒子模型总尺寸=border+padding+margin+内容宽度
box-sizing：
浏览器兼容性：
| 属性名 |
IE |
Firefox |
Chrome |
Opera |
Safari |
| box-sizing |
8+ |
1.5+ |
1.0+ |
9.0+ |
3.1+ |
p{
width: 100px;
height: 100px;
padding: 5px;
margin: 10px;
border: 1px solid red;
box-size: content-box}
content-box就是默认值写了和没写一样
此时盒子总范围：112px *112px
p{
width: 100px;
height: 100px;
padding: 5px;
margin: 10px;
border: 1px solid red;
box-size: border-box }
border-box就是把设置的width: 100px;和height: 100px;直接设为盒子的总范围：
此时为100px *100px
圆角边框：
border-radius: 20px 10px 50px 30px;
四个属性值按顺时针排列，如果只设置两个值的话看对角。
border-radius: 20px; 【右上20、右下20、左下20、左上20】
border-radius: 20px 10px; 【右上20、右下10、左下20、左上10】
border-radius: 20px 10px 50px; 【右上20、右下10、左下50、左上10】
border-radius: 20px 10px 50px 30px; 【右上20、右下10、左下50、左上30】
使用border-radius制作特殊图形：
1. 圆形
利用border-radius属性制作圆形的两个要点：
① 元素的宽度和高度必须相同
② 圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%
div{ 或者： div{
width: 100px; width: 100px;
height: 100px; height: 100px;
border: 4px solid red; border: 4px solid red;
border-radius: 50%; } border-radius: 54px; }
运行结果：
2. 半圆形
利用border-radius属性制作半圆形的两个要点：
① 制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值
② 制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值
上半圆：
div{
width: 100px;
height: 50px;
border: 4px solid red;
border-radius: 54px 54px 0 0; }
下半圆：
div{
width: 100px;
height: 50px;
border: 4px solid red;
border-radius: 0 0 54px 54px; }
左半圆：
div{
width: 50px;
height: 100px;
border: 4px solid red;
border-radius: 54px 0 0 54px; }
右半圆：
div{
width: 50px;
height: 100px;
border: 4px solid red;
border-radius: 0 54px 54px 0; }
3. 扇形
利用border-radius属性制作扇形遵循“三同，一不同”原则：
① “三同”是元素宽度、高度、圆角半径相同
② “一不同”是圆角取值位置不同
左上扇形：
div{
width: 50px;
height: 50px;
border: 4px solid red;
border-radius: 54px 0 0 0; }
右上扇形：
div{
width: 50px;
height: 50px;
border: 4px solid red;
border-radius: 0 54px 0 0; }
右下扇形：
div{
width: 50px;
height: 50px;
border: 4px solid red;
border-radius: 0 0 54px 0; }
左下扇形：
div{
width: 50px;
height: 50px;
border: 4px solid red;
border-radius: 0 0 0 54px; }
盒子阴影：
浏览器兼容性：
| 属性名 |
IE |
Firefox |
Chrome |
Opera |
Safari |
| box-shadow |
9+ |
3.5+ |
2.0+ |
10.5+ |
4.0+ |
Inset是内阴影
不设置就是外阴影
例如：
情况一：（此时有inset）
div{
margin: 20px auto;
width: 200px;
height: 200px;
background-color: lightskyblue;
box-shadow: inset 10px 10px 3px blue; }
运行结果：
情况二：（此时没有inset）
div{
margin: 20px auto;
width: 200px;
height: 200px;
background-color: lightskyblue;
box-shadow: 10px 10px 3px black; }
运行结果：
情况三：（此时应有inset值的地方值为0）
div{
margin: 20px auto;
width: 200px;
height: 200px;
background-color: lightskyblue;
box-shadow: 0 10px 10px 3px black; }
运行结果：
情况四：（此同时有内阴影和外阴影）
div{
margin: 20px auto;
width: 200px;
height: 200px;
background-color: lightskyblue;
box-shadow: inset 10px 10px 3px blue, 10px 10px 3px black; }
运行结果：
