代码在这。
建议运行一遍,熟练熟练
/* 盒子模型 */
/* 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;
}