什么是盒子模型？

盒子模型就是布局网页的一种手段包括边框（border）、外边距（margin）、内边距（padding）、网页元素（content）、宽（width）、高（height）等元素。

 边框border：

1. 边框颜色：border-color：

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：

浏览器兼容性：

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;  }

总结：