盒子模型：了解元素内部结构

原创

Y编程者

发布于 2024-08-10 18:27:43

2900

文章被收录于专栏：前端前端

盒子模型：元素本质属性不同的成为盒子模型

盒子模型的分类：

1.块级元素（标签盒子）：独占一行，对宽度，高度支持 div p ul li h1-h6

2..内联级元素：不独占一行，对宽度，高度不支持 span a

3..内联块级元素：不独占一行，对宽度，高度支持 img input

4.弹性盒子:无论能否可以存放得下子元素，子元素始终横向布局

/*块级元素*/<div>hello</div>
/*内联级元素*/ <span>hello</span>
/*内联块级元素*/<img src="img/0809.jpg" width="100px">

div,span{
    background: aqua;
}

<div>
        <img src="img/0809.jpg" >
        <img src="img/0809.jpg" >
        <img src="img/0809.jpg" >
        <img src="img/0809.jpg" >
        <img src="img/0809.jpg" >
        <img src="img/0809.jpg" >
    
    </div>
   div{
    width: 300px;
    display: flex;
}
img{
    width: 200px;
}
/*弹性盒子*/

弹性布局 display: flex; 将元素变成弹性盒子

display: block; 将元素变成块级元素

display: inline; 将元素变成内联级元素

display: inline-block; 将元素变成内联块级元素

<div>hello</div>
<span>hello</span>
<img src="img/0809.jpg" width="100px">
    
   

div{
    width: 300px;
    display: inline;
    background: aqua;
    
}
img{
    width: 200px;
}
span{
    display: block;
    background: aqua;
    
}

元素的内部结构划分：

内容区可以通过width height两个属性进行设置

div{
    width: 100px;
    height: 100px;
    background: aqua;
    
}

填充区可以通过padding属性进行设置

从上开始，顺时针进行旋转没有就进行对称

padding：50px

div{
    width: 100px;
    height: 100px;
    background: aqua;
    padding: 50px; 
}

从上开始，顺时针进行旋转没有就进行对称

padding：50px

div{ width: 100px; height: 100px; background: aqua; padding: 50px; }

padding:50px 10px

padding: 50px 10px 20px;

padding: 50px 10px 20px 30px;

单独设置 padding-top padding-bottom padding-left padding-right*/

padding-top: 20px;

边框区 border 复合属性：需要由多方面综合进行设置

border-color设置边框颜色

border-width设置边框宽度

border-style设置边框样式 solid实线 dashed虚线 dotted点状 double双实线

div{
    width: 100px;
    height: 100px;
    padding-top: 20px; 
    border-color: rgba(204, 0, 255, 0.805);
    border-width: 30px;
    border-style: solid;

简化写法 border: double blueviolet 3px; 无顺序要求四个方向都设置

方向单独设置 border-top border-bottom border-left border-right

border-top-color单独对某一方向的某一方面进行设置

示例：border-bottom: dotted blueviolet 5px;

外边距设置元素和元素之间的样式 margin 从上开始，顺时针进行旋转没有就进行对称

margin:auto会使元素居中只可以水平方向居中前提元素要有宽度

box-sizing：border-box 默认针对整个盒子

div{
    width: 100px;
    height: 100px;
    background:aqua;
    padding: 20px;
    border: 10px blue solid;
    box-sizing: border-box;
    
}

box-sizing：content-box 默认针对内容区

div{
    width: 100px;
    height: 100px;
    background:aqua;
    padding: 20px;
    border: 10px blue solid;
    box-sizing: content-box;
    
}

margin：0；

padding：0去除留白

没加之前，可以看到展示出来是有一些留白的

加之后

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html

登录后参与评论

0 条评论

热度