CSS基础（三）——盒子模型

最新推荐文章于 2024-04-27 21:35:02 发布

pro1822

最新推荐文章于 2024-04-27 21:35:02 发布

阅读量1k

点赞数

分类专栏： HTML+CSS基础文章标签： css

本文链接：https://blog.csdn.net/qq_41523175/article/details/123765195

版权

HTML+CSS基础专栏收录该内容

15 篇文章 6 订阅

订阅专栏

一、什么叫作盒子模型？

简单来说，盒子模型就是将一个个元素都看成一个个盒子。

        元素的嵌套，就是大盒子套着小盒子。

        元素的并列，就是大盒子与小盒子放在一起，最多靠紧，在空间上没有重叠的部份。

        想象桌子上有两个盒子，一个是空的，一个装有礼物。

                那么两个盒子之间，他们就存在着外边距（margin）。外边距有四个属性（margin-left，margin-right，margin-top，margin-bottom）。

                装有礼物的盒子，礼物就是盒子的内容（content）。那么内边距指的就是盒子与礼物之间的距离。同样，内边距也有四个属性（padding-left，padding-right，padding-top，padding-bottom）。

                 边框的宽度（border-width）指的就是盒子的厚度。边框（border）还有其它属性。

同样，我们通过一组代码来理解。

<!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>Demo03</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }

        .container{
            width: 800px;
            height: 300px;
            border: 1px solid red;
            margin: 0 auto;
            margin-top: 30px;
        }

        .families{
            width: 600px;
            height: 100px;
            margin: 0 auto;
            margin-top: 30px;
            border: 1px solid blue;
        }

        .friends{
            width: 600px;
            height: 100px;
            margin: 0 auto;
            margin-top: 30px;
            border: 1px solid green;
        }

        /* 让ul位于内部 */
        .families ul,.friends ul{
            list-style: inside;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="families">
            <h3>家庭成员</h3>
            <ul>
                <li>爸爸</li>
                <li>妈妈</li>
                <li>姐姐</li>
            </ul>
        </div>
        <div class="friends">
            <h3>同学</h3>
            <ul>
                <li>小明</li>
                <li>小红</li>
                <li>李华</li>
            </ul>
        </div>
    </div>
</body>
</html>

分析：

1、通配符选择器是为了消除默认存在的一些内边距、外边距，并将其置为0；

2、border的三个属性可以合并在一起写，宽度（border-width），样式（border-style），颜色（border-color）。通常我们按照这样的顺序来写，例如：border : 1px solid red。

3、margin（外边距）的四个属性同样可以合并在一起写。只有1个时，指的是四个属性共用。有两个时，指的是上下边距和左右边距。有四个时，指的是上右下左。我们可以使用auto来设置左右边距，使元素居中。

4、padding（内边距）的三种写法同margin。