了解盒子模型

Zhu_S W

已于 2024-05-12 12:06:18 修改

阅读量582

点赞数 20

分类专栏：前端学习文章标签：前端 html css

于 2024-05-12 12:04:42 首次发布

本文链接：https://blog.csdn.net/weixin_73735141/article/details/138750343

版权

前端学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1、块级元素（标签，盒子）特点：独占一行，对宽度高度支持举例：div p h1~h6 ul li display:block;

2、内联级元素（标签，盒子）特点：不独占一行，对宽度高度不支持举例：span a display:inline;

3、内联块级元素（标签，盒子）特点：不独占一行，对宽度高度支持距离：img input display:inline-block;

4、弹性盒子特点：默认不管父级元素能不能放下子元素们，子元素都横着布局

display:block;

1、内容区

width:180px;  
height:100px;

默认针对内容区

box-sizing:content（针对内容区设置宽高）;
box-sizing:border-box（针对整个盒子设置宽高）;

2、填充区

padding可以同时设置上下左右四个方向的填充度，从上开始，顺时针旋转

padding:30px;
padding:30px 60px;
padding:30px 60px 80px;
padding:30px 60px 80px 100px;

结合 top bottom left right 可以单独对某一个方向进行设置

padding-top:50px;
padding-bottom:10px;
padding-left:100px;
padding-right:50px;

3、边框区

border 复合属性：对一个属性的不同方面综合进行设置

三个方面，四个方向

结合 top bottom left right 可以单独对某一个方向进行设置

border-style:边框样式;   /*soild实线  dashed虚线*/
border-width:边框宽度;
border-color:边框颜色;

/*简化写法：*/
border:solid pink 20px;  /*无顺序要求*/

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:70px;
margin-right:10px;
/*auto居中，只能识别左右，不能识别上下，块级元素*/

综合示例：

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