css元素
/* 1,内容区 width:180px;height:100px;
默认针对内容区
box-sizing:content-box(针对内容需设置宽高)border-box(针对整个盒子设置宽高) */
/* 2,填充区 padding:30px上下左右都是30
padding:30px 60px 上下30左右60
padding:30px 60px 80px 上30 右60 下80 左60
按照顺时针的顺序
padding-top/bottom/left/right单独对一个方向进行设置 */
/* 3,边框区 border 复合属性,少设置一个就加载不出
border-style:边框样式 solid直线 dotted点 dashed虚线 double双直线
border-widt:边框宽度
border-color:边框颜色*/
/* 4,外边距 margin 可以同时设置四个方向的填充,从上开始,顺时针旋转
margin-top/bottom/left/right单独对一个方向进行设置
auto居中,只能识别左右不能识别上下,只能对块级元素使用*/
盒子模型
<!-- 盒子模型 -->
<!-- 1,块级元素display:block 特点:独占一行,对宽高支撑
举例:div,p,h1-h6,ul,li-->
<!-- 2,内联级元素display:inline 特点:不独占一行,对宽高不支撑
举例:span,a-->
<!-- 3,内联块级元素display:inline-block 特点:不独占一行,对宽高支撑
举例img,input-->
<!-- 4,弹性盒子display:flex 特点:默认不管父级能不能放下子级,子元素都横着布局
-->
示例:
div {
background: yellow;
width: 180px;
height: 100px;
padding: 30px;
/* border-style: solid;
border-width: 10px;
border-color: aqua; */
border: solid 10px pink;
margin: 30px auto;
box-sizing: border-box;
}
元素的区域图: