CSS元素区域与盒子模型

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;

}

元素的区域图：