当前位置：首页 > news >正文

CSS盒子模型

news 来源：原创 2025/5/9 5:08:04

1.盒子模型的组成

CSS 会把所有的 HTML 元素都看成一个盒子，所有的样式也都是基于这个盒子。

1. margin （外边距）： 盒子与外界的距离。

2. border （边框）： 盒子的边框。

3. padding （内边距）： 紧贴内容的补白区域。

4. content （内容）： 元素中的文本或后代元素都是它的内容。

盒子的大小 = content + 左右 padding + 左右 border 。

注意：外边距 margin 不会影响盒子的大小，但会影响盒子的位置。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型的组成</title>
    <style>
        div{
            background-color: skyblue;
            font-size: 30px;
            /* 内容区的高 */
            height: 200px;
             /* 内容区的宽*/
            width: 200px;
             /* 内边距，设置的背景颜色会填充内边距区域 */
             padding: 20px;
              /* 边框，设置的背景颜色会填充边框区域 */
              border: 20px solid transparent;
              margin: 50px;
        }
    </style>
</head>
<body>
    <div>你好啊</div>
    
</body>
</html>

内容区：

加上内边距

加上边框

加上外边边距

2.盒子内容区（content）

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子内容区</title>
    <style>
        div{
           /* width: 400px;  */
           min-width: 500px;
           /* height: 300px; */
           min-height: 200px;
           background-color: green;
        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, facilis. Eveniet distinctio asperiores consectetur vero facilis enim facere natus possimus blanditiis accusamus quo provident dolorem culpa assumenda aliquam excepturi amet maxime doloribus esse vel, et unde. Nisi voluptatibus dolor velit quibusdam sit perspiciatis quidem ipsum numquam. Repudiandae esse omnis laboriosam est eos unde voluptatibus temporibus nemo, deleniti, pariatur obcaecati dicta quam recusandae porro in architecto delectus nam. Nesciunt qui eveniet ab voluptatem explicabo animi necessitatibus, debitis molestias numquam dolorum nulla nihil optio. Nam perspiciatis sint voluptas, neque quia quam praesentium quis placeat, quas esse debitis dolorem deserunt excepturi est similique impedit quasi maiores corrupti, dolore ratione! Quaerat omnis velit illum neque sequi modi aut distinctio quam, ullam magnam? Optio hic nulla, sint repellat dignissimos consequatur alias, deserunt sunt quod sapiente porro dicta, quo adipisci. Ullam pariatur reiciendis minima nostrum laudantium mollitia provident ipsum nulla, rem quo, quis impedit inventore quod debitis saepe necessitatibus deserunt totam qui ducimus. Amet, deserunt natus ea sunt cupiditate deleniti soluta aut animi numquam tenetur maiores laudantium aliquam mollitia sequi nisi qui a ab quod quo? Natus asperiores voluptatibus quos, amet nihil quo ipsa odio. Harum cum enim expedita quos, tenetur excepturi. Nam ab quo a id. Animi deserunt commodi repellat, ea optio adipisci qui itaque, sunt quidem sapiente nulla facere consectetur numquam quos, neque vitae est id corrupti corporis cumque maiores eos dignissimos. Provident mollitia tempore iusto, beatae perspiciatis ullam hic, maiores quos doloremque ad recusandae tempora ex eligendi aliquid molestias sit odio distinctio repellat. Magni in, culpa consequuntur adipisci quod ad harum perferendis esse ratione quisquam aspernatur exercitationem suscipit illum fugit! Ratione maiores non enim exercitationem minus accusantium, porro qui voluptatum laudantium numquam hic consectetur saepe, officia illo. Aliquam nulla nostrum obcaecati libero tenetur, et quis, ipsa modi nesciunt aut iure? Ipsum quo ipsam voluptas maxime aut? In dolores laudantium iure porro ut, maxime, et nihil suscipit sit reprehenderit accusamus, culpa est cum dolorum illo. Ullam autem omnis optio tenetur ratione, nobis sed consectetur veritatis repudiandae earum perferendis officiis cum similique quo ipsa dolorem quae laborum ut amet, id impedit beatae. Hic, corrupti et natus ut, ratione eveniet eos id dolorum repellat quas rerum blanditiis expedita voluptatum quae dicta voluptas soluta dolore temporibus consectetur tempore totam laboriosam? Ipsam quae ducimus voluptas, sunt, veritatis voluptates natus at recusandae nobis error tempora. Praesentium quia doloribus commodi eveniet placeat saepe sapiente explicabo, numquam reprehenderit repudiandae consectetur repellendus ullam temporibus doloremque quisquam, distinctio non dolorem accusamus. Necessitatibus totam ratione, sapiente deserunt aliquam libero fuga sed facere voluptates laboriosam, cupiditate similique reprehenderit natus consequatur nesciunt. Corrupti dolores quae sequi voluptatem repellat est perferendis sed magni quaerat laboriosam? Aliquam eum a sunt laudantium animi molestias deserunt porro cumque optio laboriosam odit asperiores non repellendus nesciunt, voluptatum tempora ullam minus accusamus quam atque. Enim rem officiis veritatis magni dignissimos dicta culpa vitae animi iste possimus! Praesentium esse dignissimos quod fugiat quasi doloremque placeat? Itaque, aspernatur, iste quidem aliquam obcaecati numquam dolore ex corrupti facilis deserunt ratione consequuntur minima, velit inventore. Aspernatur?
    </div>
</body>
</html>

3.关于默认宽度

所谓的默认宽度，就是不设置 width 属性时，元素所呈现出来的宽度。

总宽度 = 父的 content — 自身的左右 margin 。

内容区的宽度 = 父的 content — 自身的左右 margin — 自身的左右 border — 自身的左右

padding 。

margin不能改变盒子的大小，前提是盒子没有事先定死宽度

没有加margin之前

            height: 200px;
            background-color: aqua;
            font-size: 20px;

加上margin=50px

加上width: 100px;就算加了margin: 50px;也没有用

加上border不加with还是原来的

加上 padding: 5px; 不加with还是原来的

验证了总宽度只和margin有关

总宽度 = 父的 content — 自身的左右 margin 。

上述代码如下

div{
            height: 200px;
            background-color: aqua;
            font-size: 20px;
            /* width: 100px;  */
             margin: 50px;
          
             border: 10px solid black;
             padding: 5px;  
        }

             height: 200px;
             background-color: aqua;
            font-size: 20px;

加上margin: 50px;

加上 border: 10px solid black;

加上 padding: 5px;

验证了

内容区的宽度 = 父的 content — 自身的左右 margin — 自身的左右 border — 自身的左右

padding 。

4.盒子内边距

padding: 10px 20px 30px 40px ; 上 10px ，右 20px ，下 30px ，左 40px 。（上、右、

下、左）

1. padding 的值不能为负数。

2. 行内元素 的左右内边距是没问题的，上下内边距不能完美的设置。

3. 块级元素 、 行内块元素 ，四个方向 内边距 都可以完美设置。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子内边距</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            /* 上右下左 */
            padding: 10px 30px 20px 25px;
            background-color: chocolate;
        }
    </style>
</head>
<body>
    <DIV>
        你好啊
    </DIV>
</body>
</html>

5.盒子边框

默认的边框大小应该是3，这个和电脑的缩放比例有关

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子的边框</title>
    <style>
        div {
            width:  400px;
            height: 400px;
            border-style: dashed;
            /* border-width: 10PX;
            border-color: antiquewhite;
            border-style: double; */
            /* 复合属性 */
            /* border: 10px solid red; */
            border-left-width: 10px;
            border-right-width: 20px;
            border-top-width: 30px;
            border-bottom-width: 40px;


            border-left-color: red;
            border-right-color: gold;
            border-top-color: green;
            border-bottom-color: blue;

            border-left-style: dotted;
            border-right-style: double;
            border-top-style: solid;
            border-bottom-style: hidden;

            border-left: 50px solid purple;
            border-right: 40px double red;
            border-top: 30px dotted brown;
            border-bottom: 20px  groove gold;

        }
    </style>
</head>

<body>
    <div>你好啊</div>
</body>

</html>

6.盒子外边距

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子的外边距</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            margin: 50px;
            background-color: antiquewhite;
            /* margin: 40px 30px;
            margin: 20px 30px 40px;
            margin: 20px 30px 40px 50px; */
        }
    </style>
</head>

<body>

    <div>你好啊</div>

</body>

</html>

7.margin 注意事项

第一点

子元素的 margin ，是参考父元素的 content 计算的。（因为是父亲的 content 中承装着

子元素）

子元素的margin是从父元素的content开始算

第二点

上 margin 、左 margin ：影响自己的位置；下 margin 、右 margin ：影响后面兄弟元素

的位置。

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin的注意事项2</title>
    <style>
        .box {
            width: 200px;
            height: 200px
        }
        .box1{
            background-color: skyblue;
        }
        .box2{
            background-color: gold;
            margin-top: 50px;
            margin-left: 50px;
            margin-bottom: 50px;
            margin-right: 50px;
        }
        .box3{
            background-color: greenyellow;
          
        }
    </style>
</head>

<body>
   <!-- 上margin 左margin会影响自身位置。下右margin 会影响兄弟元素的位置 -->
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
</body>

</html>

3. 块级元素、行内块元素，均可以完美地设置四个方向的 margin ；但行内元素，左右

margin 可以完美设置，上下 margin 设置无效。

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin的注意事项2</title>
    <style>
 #d1 {
            width: 400px;
            height: 400px;
            margin: 50px;
            background-color: deepskyblue;
        }
        img {
            margin: 50px;
        }
        .one {
            background-color: skyblue;
        }
        .two {
            background-color: orange;
            margin-left: 50px;
            margin-right: 50px;
            margin-top: 3000px;
            margin-bottom: 3000px;
        }
        .three {
            background-color: green;
        }
    </style>
</head>

<body>
    <!-- 3. 块级元素、行内块元素，均可以完美地设置四个方向的 margin ；但行内元素，左右
    margin 可以完美设置，上下 margin 设置无效。 -->
    <!-- 对于行内元素来说，左右的margin是可以完美设置的，上下的margin设置后是无效的。 -->
    <div id="d1">我是一个块级元素</div>
    <div>我是一段文字</div>
    <hr>
    <img src="../悟空.jpg" alt="悟空">
    <div>我是一段文字</div>
    <hr>
    <span class="one">人之初</span><span class="two">性本善</span><span class="three">性相近</span>
    <div>我是一段文字</div>
</body>

</html>

4.margin 的值也可以是 auto ，如果给一个 块级元素 设置左右 margin 都为 auto ，该块级

元素会在父元素中水平居中。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>14_margin的注意事项4</title>
    <style>
        div {
            width: 800px;
            height: 100px;
            /* margin-left: auto; 
            margin-right: auto; */
            margin: 100px auto;

            background-color: deepskyblue;
        }
        span {
            background-color: purple;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <!-- margin的值也可以是auto，给一个块级元素左右margin设置auto可以实现该元素在其父元素内水平居中 -->
    <div>你好啊</div>
    <span>好好学习</span>
</body>
</html>

5. margin 的值可以是负值。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>15_margin的注意事项5</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
        }
        .box1 {
            background-color: skyblue;
        }
        .box2 {
            margin-top: -200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box box1">1</div>
    <div class="box box2">2</div>
</body>
</html>

8.margin 塌陷问题

什么是 margin 塌陷？

第一个子元素的上 margin 会作用在父元素上，最后一个子元素的下 margin 会作用在父元素上。

如何解决 margin 塌陷？

方案一：给父元素设置不为 0 的 padding 。

方案二：给父元素设置宽度不为 0 的 border 。

方案三：给父元素设置 css 样式 overflow:hidden

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin塌陷问题</title>
    <style>
        .outer{
            width: 400px;
            /* height: 200px; */
            background-color: gray;

        } 
        .inter1{
            width: 100px;
            height: 100px;
            background-color: gold;
            /* .outer .inter1 .inter2整体下移 */
            margin-top: 50px;

        }
        .inter2{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
      
            margin-bottom: 50px;

        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inter1">inter1</div>
        <div class="inter2">inter2</div>

    </div>
    <div>我是一段測試文字</div>
    
</body>
</html>

第一个子元素的上 margin 会作用在父元素上，最后一个子元素的下 margin 会作用在父元素上。

解决方案：父元素加上 overflow: hidden;

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin塌陷问题</title>
    <style>
        .outer{
            width: 400px;
            height: 200px;
            background-color: gray;
            overflow: hidden;

        } 
        .inter1{
            width: 100px;
            height: 100px;
            background-color: gold;
            /* .outer .inter1 .inter2整体下移 */
            margin-top: 50px;

        }
        .inter2{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
      
            margin-bottom: 50px;

        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inter1">inter1</div>
        <div class="inter2">inter2</div>

    </div>
    <div>我是一段測試文字</div>
    
</body>
</html>

9.margin 合并问题

什么是 margin 合并？

上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。

如何解决 margin 塌陷？

无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>17_margin合并问题</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
        }
        .box1 {
            background-color: deepskyblue;
            margin-bottom: 550px;
        }
        .box2 {
            background-color: orange;
            margin-top: 550px;
        }
        .test {
            width: 200px;
            height: 200px;
            display: inline-block;
        }
        .testa {
            background-color: purple;
            margin-right: 50px;
        }
        .testb {
            background-color: tomato;
            margin-left: 50px;
        }
    </style>
</head>
<body>
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <hr>
    <div class="test testa">a</div><div class="test testb">b</div>
</body>
</html>