06-CSS盒子模型

孙小明的测试修炼手册

已于 2023-06-24 22:06:10 修改

阅读量52

点赞数

分类专栏：前端实战-HTML&CSS 文章标签： css 前端 html

于 2023-06-24 19:26:45 首次发布

本文链接：https://blog.csdn.net/weixin_44431329/article/details/131365488

版权

前端实战-HTML&CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章详细介绍了CSS的选择器优先级，包括优先级的计算规则和权重叠加方法。同时，深入讨论了盒子模型，包括内容区域、内边距、边框和外边距，并提供了示例代码进行解释。此外，还提到了Chrome调试工具的使用以及如何处理外边距折叠和塌陷问题。

摘要由CSDN通过智能技术生成

1、CSS三大特性-优先级

1、特性：不同的选择器具有不同的优先级、由优先级高的选择器样式会覆盖优先级低选择器的样式
2、优先级公式

继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式

1、权重叠加计算

2、权重叠加计算公式

比较规则
1. 先比较第一级数字，如果比较出来了，之后的统统不看
2. 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后统统不看
3. …
4. 如果最终所有数字都相同，表示优先级相同，则比较层叠行(谁写在下面谁说的算 )

2、权重叠加计算解题步骤

先判断选择器是否能够直接选中标签，如果不能选中就是继承，优先级是最低的直接pass
通过权重计算公式，谁的权重更高

注意点

实际开发中，选择标签需要精准，尽量避免多个选择器，选中同一个标签的情况，不要自己难为自己

3、Chrome调试工具

查错流程(遇到样式调试不出来，要学会通过调试工具找错)

4、盒子模型

盒子的概念

页面中的每一个标签，都可以看成一个盒子。通过盒子的视角可以更方标的进行布局
浏览器在渲染网页时，会将网页中的元素看做是一个个的矩形区域，我们也可以形象的称为盒子

盒子模型

CSS中规定每个盒子分别由内容区域（content）、内边距区域（padding）、边框区域(border) 外边框区域(margin)构成，这就是盒子模型
记忆：可以联想现实中的包装盒子

1、案例讲解

代码
html中新增一个div标签，并设置长宽高为100 背景色为红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

展示

2、盒子模型详解

通过上述案例，可以对盒子模型有一个大概的了解，下方表格为为归总

盒子模型	属性	备注
内容区域：content	利用 width 和 height 属性默认设置是盒子内容区域的大小属性 1. width/height 长宽高 2. 数字+px
边框区域：border		快捷键 bd + table
内边框区域：padding
外边框区域：margin

3、border-边框

1、border-单个属性

2、border连写形式

属性名：boder
属性值：单个取值的连写，取值之间可以用空格隔开
举例：boder:10px solid red;

3、边框单方向设置

场景：只给盒子的某个方向设置单独设置边框
属性名：boder-方位名词
属性值：连写的取值

属性值	作用
border-top	设置上内边距
border-bottom	设置下内边距
border-left	设置左内边距
border-right	设置右内边距

案例
给div标签的内边距设置上下左右颜色分别为红绿粉黑颜色
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            border-top: 5px solid  yellow;
            border-bottom: 5px solid  green;
            border-left: 5px solid  pink;
            border-right: 5px solid  black;

        }
    </style>
</head>
</head>
<body>
    <div></div>
</body>
</html>

展示

4、padding-内边距

作用：设置边框与内容区域之间的距离
属性名：padding
常见取值

记忆规则：从上开始赋值，然后顺时针进行赋值，如果没有赋值看对面

1、padding-内边距单方向设置

属性值	作用
padding-top	设置上内边距
padding-bottom	设置下内边距
padding-left	设置左内边距
padding-right	设置右内边距

案例：给内边距上右下左设置10px 20px 30px 40px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        div{
            width: 100px;
            height: 100px;
            padding: 10px 20px 30px 40px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

展示

5、margin-外边距

作用：设置边框以外，盒子与盒子之间的距离
属性：margin
常见取值：

记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面

1、margin-单方向设置

场景：只给盒子的某个方向单独设置外边距
属性名：margin-方位名词
属性值：数字+px

5、清楚默认内外边距

场景：浏览器会默认给部分标签设置默认的maring和padding，但在一般在项目之前需要先清除这些标签默认的margin和padding后续自己设设置

例如：body标签默认有margin:8px
例如:p标签有上下margin

解决办法：

*{
margin:0
padding:0
}

6、盒子大小计算公式

需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
注意：设置width和height是内容的宽高！② 设置border会撑大盒子 ③ 设置padding会撑大盒子
计算公式

盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框

解决方式1
自己计算多余大小手动内减
解决方式2：自动內减
操作：给盒子属性设置 box-sizing:boder-box

7、外边距折叠现象-合并效果

场景：垂直布局的块元素，上下的margin会合并
结果：取两者距离为margin的最大值
解决办法:避免就好或者只给一个盒子设置margin
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            margin-bottom: 50px;
            background-color: pink;
        }
        .box2{
            width: 100px;
            height: 100px;
            margin-top: 60px;
            background-color: red;

        }
    </style>
</head>
<body>
    <div class="box">

    </div>
    <div class="box2">

    </div>
</body>
</html>

展示：

8、外边距折叠现象-塌陷效果

场景：相互嵌套的块元素，子元素的margin-top会作用在父元素上
结果：导致父元素一起往下移动
解决办法：

给父元素设置border-top或者padding-top（分割父子元素的margin-top）
给父元素这是overflow:hidden 解决塌陷
父元素转换为行内块元素
设置浮动

扩展：overflow:hidden 可以解决 1. 超出部分隐藏，超出内容显示省略号 2. 清除浮动原因当父元素和子元素都设置浮动时，子元素会脱离标准流不占位父元素检测不到子元素的高度，父元素高度为0 3.解决外边框塌陷，当父子元素嵌套时，给子元素设置margin-top样式,那么子元素也会下来

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .son{
            width: 50px;
            height: 50px;
            margin-top: 50px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son"></div>
    </div>
</body>
</html>