CSS盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距（margin），边框（border），填充(padding)，和实际内容(content)。

• Margin(外边距) - 外边距是透明的，它是本元素和其他元素之间的距离。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 也叫做填充，内边距是透明的，他指的是内容与边框之间的距离。
• Content(内容) - 盒子的内容，显示文本和图像。

在HTML中，存在四种类型的盒子，其中弹性盒子使用最广，下面分别来介绍这四种盒子：

1.块级盒子

  特点：独占一行，对宽度高度支持

  div ul li h1~h6 都是此类盒子

  css中设置使用display:block;

2.内联级盒子

  特点：不独占一行，对宽度和高度不支持

  span a 都是此类盒子

  设置使用display:inline；
 3.内联块级盒子

  特点：不独占一行，对宽度高度支持

  img input 都是此类盒子

  设置使用 display:inline-block;

4.弹性盒子

  特点：不论父级元素能不能放下子元素，子元素始终横向布局,放不下会压缩

  设置使用display:flex;

/* 
盒子模型分为四个区域

内容区
设置内容区域的宽高
width:200px;
height:100px;
box-sizing:content-box  默认宽高只针对内容区域设置
           border-box  宽高针对整个盒子设置


填充区padding（也叫内边框）
从上开始，按照顺时针进行旋转，没有了设置为对称位置的值
padding:50px 40px 30px 20px ;
可以结合上下左右进行对某一个方向单独设置
padding-top: 50px;
padding-bottom: 40px;
padding-left: 30px;
padding-right: 20px;

边框区border
可以设置边框的样式颜色与宽度
可通过border进行复合设置，也可单独对某一属性进行设置
复合设置：
border: solid 10px blue;属性值不区分顺序 用空格隔开
单独设置：
border-style:边框样式
border-color:边框颜色
border-width:边框宽度
对于边框还可以进行上下左右单独设置
border-top:solid 10px blue;
border-bottom: dashed 10px red;
border-left: dotted 10px pink;
border-right: solid 10px green;

综上，可以对边框进行三个方面四个方向组合设置，共十二种情况
border-top-color:red;
border-bottom-style:solid;
.......


外边距margin
从上开始，按照顺时针进行旋转，没有了设置为对称位置的值
margin:50px 40px 30px 20px ;
可以结合上下左右进行对某一个方向单独设置
margin-top: 50px;
margin-bottom: 40px;
margin-left: 30px;
margin-right: 20px;
auto:设置水平方向居中，用于块级元素(必须设置块级元素的宽度)
*/

/* html中标签默认都会有一些边距 通过*设置内外边距为0*/
*{
  padding: 0;
  margin: 0;
}