【CSS】盒子模型

叶子与海

已于 2022-10-02 11:08:36 修改

阅读量531

点赞数 30

分类专栏： HTML CSS 文章标签： css 前端

于 2022-09-21 23:19:35 首次发布

本文链接：https://blog.csdn.net/btufdycxyffd/article/details/126982075

版权

HTML CSS 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

CSDN话题挑战赛第2期
参赛话题：学习笔记

文章目录

1.什么是盒子模型？

概念

1.页面的每一个标签，都可以看成一个“盒子”，通过盒子的视角更方便进行布局。

2.在浏览器渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为“盒子”。

记住，所有的元素都可以看成一个盒子。

构成

CSS规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型。

2.内容区

内容区是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他3个部分都是可选的。

内容区有3个属性：width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度。当内容过多超出width和height时，可以使用overflow属性来指定溢出处理方式。overflow属性也可以解决塌陷现象，下面会讲到。

注意元素的宽度（width）和高度（height）是针对内容区而言的。不包括其他padding的内容。

3.边框

语法

/*属性：像素值 线条样式 颜色*/
border: 1px solid #000;

边框属性是复合属性，连写之间有空格，并且不分先后顺序。

单方向设置边框线

/*border+方位名词：属性值*/
border-left: 3px solid #000;

思考：我们定义了盒子的尺寸，在加上边框线之后尺寸会这么变化呢？是溢出还是往内放呢？

答案肯定是溢出，因为上面已经说了，设置盒子的尺寸只是内容区部分，其他边框或者边距都是溢出，会撑大盒子，尺寸=width/height+边框线或者边距。

如：设置了200x200的蓝色内容区，其他为边距区。

4.内边距

内边距，指的是内容区和边框之间的空间，可以看成是内容区的背景区域。

语法

/* 属性四值 上 下 左 右 */
padding:10px 20px 30px 40px;
/* 属性三值 上  左右 下*/
padding:10px 20px 40px;
/* 属性两值 上 下  */
padding:10px 40px;

内边距的属性有5种：padding-top、padding-bottom、padding-left、padding-right以及综合了以上4个方向的简写内边距属性padding。padding同样也是复合属性。

四个属性分别代表了上下左右方向的设置，顺时针顺序依次设置。

总结：顺时针，如果数不够，看对面是什么就是什么。

如padding:10px 40px;

5.外边距

外边距，指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。外边距使得元素之间不必紧凑地连接在一起，是CSS布局的一个重要手段。

外边距的属性和内边距是一模一样的，可以上下左右设置，这里不多言了。

不同的是外边距有一个版心居中的功能

/* 版心居中 上下，左右（auto）*/
margin: 0 auto;

此功能可以让盒子在网页中间，非常常用。

外边距问题：合并现象

现象描述：

在设置外边距的时候，垂直布局的块级元素，上下的margin会合并，结果是两者最终距离为margin的最大值。

解决方法：

可以只设置一个，也可以上下两元素转换成行内块元素，这样就不会出现合并的问题。

注意的是，前面的元素不设置行内块，只有后面的设置，这样后面的是不会跟在前面的后面显示一行的。

外边距问题：塌陷现象

现象描述：

互相嵌套的块级元素，子元素的margin-top会作用在父元素上，导致父元素一起往下移动。

解决方法：

1.给父元素设置border-top或者padding-top

2.给父元素设置overflow:hidden

3.转换行内块元素（两者均可）

4.设置浮动等等（也可以加边框线，不推荐）

举个例子：

我们想要son元素往下移动，但是造成了塌陷现象，解决：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 而加外面大盒子的内边距就不会 */

            /* 解决方法1加border */
            /* border: 1px solid #000; */
            /* 方法2 */
            /* overflow: hidden; */
            /* 方法3 设置行内块元素 */
            display:inline-block;
            /*父子和儿子都可以 */
        }
        .father div{
            width: 50px;
            height: 50px;
            background-color: orange;
            /* 里面盒子不能下移，而是造成大盒子塌陷 */
            margin-top: 30px;          
        }
    </style>
</head>
<body>
    <div class="father">
        <div>son</div>
    </div>
</body>
</html>

行内元素内外边距的问题

我们知道所有元素都能当成一个盒子，行内元素也是，但是margin和padding改变行内元素的垂直位置无法生效。

    <style>
        span{
            margin: 50px;
            padding: 50px;
            /* 设置之后左右生效上下不生效 */
        }
    </style>

解决方法也很简单，只需要行高设置垂直位置即可

6.内减模式

现在我们要求设置一个300x300的盒子，边框10px，上下左右20px的内边距，如何完成？

我们知道，给盒子设置border或padding时，盒子会被撑大，我们不想让它撑大，该如何做呢？

方法1：手动内减

操作：自己计算多余大小，手动在内容中减去

缺点：项目中计算量太大，很麻烦

方法2：自动内减

操作：给盒子设置属性box-sizing:border-box;即可

优点：浏览器自动计算多余大小，自动内减

7.清楚默认样式

浏览器会默认给部分标签设置默认的margin和padding，但一般项目开始前需要先清除这些默认的margin和padding，后续自己设置。

比如：

body标签默认有margin：8px

p标签默认有上下的margin

ul标签默认有上下的margin和padding-left

解决方法：

    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>

利用通配符选择器将默认样式清楚，这两句代码我们在很多网页中都能看到。

8.综合案例：新闻

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            /* 所有标签都内减 */
            box-sizing: border-box;
        }
        .box{
            width: 500px;
            height: 400px;
            margin: 0 auto;
            border: 1px solid #ccc;
            /* 下面可以不给，自己撑开 */
            padding: 42px 30px 0;
        }
        .box h2{
            border-bottom: 1px solid #ccc;
            font-size: 30px;
            /* 行高是一倍就是字号的大小，相当于30px，行高=文字+上下文字边距*/
            /* 先让文字紧贴下框线，在设置内边距 */
            line-height: 1;
            padding-bottom: 9px;
            text-align: center;
        }
        /* 去掉列表圆点（样式） */
        ul{
            list-style: none;
        }
        .box li{
            height: 50px;
            border-bottom: 1px dashed #ccc;
            /* 行高=盒子高度->居中 */
            line-height: 50px;
        }
        .box a{
            text-decoration: none;
            color: #666;
            font-size: 18px;
        }
        .box a:hover{
            color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>New Articles</h2>
        <!-- 内容用列表，如果只用a，不能设置宽高，是行内元素，需要转换 -->
        <ul>
            <li><a href="#">新闻内容</a></li>
            <li><a href="#">新闻内容</a></li>
            <li><a href="#">新闻内容</a></li>
            <li><a href="#">新闻内容</a></li>
            <li><a href="#">新闻内容</a></li>
            <li><a href="#">新闻内容</a></li>

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

效果：

叶子与海

关注

30
点赞
踩
17

收藏

觉得还不错? 一键收藏
打赏
25
评论
【CSS】盒子模型

1.什么是盒子模型？概念1.页面的每一个标签，都可以看成一个“盒子”，通过盒子的视角更方便进行布局。2.在浏览器渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为“盒子”。记住，所有的元素都可以看成一个盒子。
复制链接

扫一扫