css 盒子模型

代码在这。

建议运行一遍，熟练熟练

/* 盒子模型  */


 /* 1、块级元素(标签，盒子) 特征:独占一行，对宽度高度支持 举例: div p h1h6 ul li display: block; -->
 2、内联级元素(标签，盒子) 特点: 不独占一行，对宽度高度不支持 举例: span a display: inline;-->
 3、内联块级元素 (标签，盒子) 特点: 不独占一行,对宽度高度支持 举例: img input display: inline-block;
 <+>- 4、弹性盒子 特征:默认不管父级元素能不能放下子元素们，子元素都横着布局 display: flex;--> */

 /* 1、内容区 width: 180px; height: 100px;
 默认针对内容区
 box-sizing: content-box(针对内容区设置宽高)border-box (针对整个盒子设置宽高) ; */

 /* 2、填充区
 padding可以同时设置上下左右四个方向的填充度，从上开始，顺时针旋转
padding: 3opx;
padding: 30px 60px;
padding: 30px 60px 80px;
padding: 3px 60px 80px 100px;
结合 top bottom left right可以单独对某一个方向进行设置
padding-top: 50px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 50px;
*/


  /* 3、边框区 border 复合属性 :有一个属性的不同方面综合进行设置
 三个方面，四个方向
 结合 top bottom left right可以单独对某一个方向进行设置
 border-style: 边框样式 ;solid实线 dashed虚线
 border-width: 边框宽度;
 border-color: 边框颜色;
-->简化写法 border:solid pink 2px;无顺序要求 */





 /* 4、外边距
 margin可以同时设置上下左右四个方向的填充度，从上开始，顺时针旋转
 margin: 40px;
 margin: 40px 80px;
 margin: 40px 80px 120px;
 margin: 40px 80px 120px 200px;
 结合 top bottom left right可以单独对某一个方向进行设置
 margin-top: 30px;
 margin-bottom: 50px;
 margin-left: 7opx;
 margin-right: 10px;
 auto居中，只能识别左右，不能识别上下 ,块级元素
 */

 div {
background: yellow;
box-sizing: border-box;
width: 180px;
height: 100px;
padding: 30px;
border: 20px solid pink;
margin: 40px auto;
 }