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

css盒子模型第二章(margin padding border content)

news 来源：原创 2025/5/14 21:11:26

盒子模型(第二章)

一、盒子的组成部分

CSS 会把所有的元素将作为块级元素显示。元素将作为内联元素显示。元素将作为行内块元素显示。 HTML 元素都看成一个盒子，所有的样式也都是基于这个盒子。

margin（外边距）：盒子与外界的距离
border（边框）：盒子的边框。
padding（内边距）：紧贴内容的补白区域。
content（内容）：元素中的文本或后代元素都是它的内容。

图示

在这里插入图片描述

结论

盒子的大小 = content + 左右 padding + 左右注意：外边距 border 。

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

示例

<style>
     div {
      /* 内容区宽 */
       width: 400px;
       /* 内容的高 */
       height: 400px;
       /* 内边距 */
       padding: 20px;
       /* 边框 */
       border: 10px solid transparent;
       /* 外边距 */
       margin: 50px;
       font-size: 20px;
       background-color: gray;

     }
  </style>
</head>
<body>
    <div>你好啊，盒子模型</div>
</body>

二、盒子内容区域 content

CSS 属性名	功能	属性值
width	设置内容区域宽度	长度
max-width	设置内容区域的最大宽度	长度
min-width	设置内容区域的最小宽度	长度
height	设置内容区域的高度	长度
max-height	设置内容区域的最大高度	长度
min-height	设置内容区域的最小高度	长度

注意

max-width、min-width 一般不与 width 一起使用。 max-height、min-height 一般不与 height一起使用。

三、盒子内边距（padding）

CSS 属性名	功能	属性值
padding-top	上内边距	长度
padding-right	右内边距	长度
padding-bottom	下内边距	长度
padding-left	左内边距	长度
padding	复合属性	长度，可以设置 1 ~ 4 个值

使用规则

padding: 10px; 四个方向内边距都是 10px。
padding: 10px 20px; 上10px，左右20px 。（上下、左右）
padding: 10px 20px 30px; 上10px，左右20px，下30px。（上、左右、下）
padding: 10px 20px 30px 40px; 上10px，右20px，下30px，左40px。（上、右、下、左）

使用注意事项

padding 的值不能为负数
行内元素的左右内边距是没问题的，上下内边距不能完美的设置
块级元素、行内块元素，四个方向内边距都可以完美设置

示例

   <style>
      div {
         width: 400px;
         height: 400px;
          /* 复合属性， 代表的是四个方向 */
         /* padding: 40px; 
         padding-left: 20px;*/
         /* 上内边距 
         padding-top: 30px;*/
         /* 右侧内边距 
         padding-right: 40px;*/
         /* 底边 内边距 
         padding-bottom: 50px;*/

         /* 复合属性 ，写两个值  上下  左右 */
         /* padding: 10px 20px; */

         /* 复合属性，三个值   上  左右 下 */
         /* padding: 10px 20px 30px; */

         /* 复合属性，四个值   上 右 下 左 */
         padding: 10px 20px 30px 40px;

         font-size: 30px;
        
         background-color: skyblue;
      }

      span {
         background-color: yellow;
         font-size: 30px;
         /*  */
         padding-left: 20px;
         /* 行内右边起作用 */
         padding-right: 50px;
         /* 上边距没有用  对于行内元素 */
         padding-top: 40px;
         /* 下边距没有用  对于行内元素 */
         padding-bottom: 50px;

      }

   </style>
</head>
<body>
  <div>内边距padding</div>
  <hr>
  <span>内边距span</span>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, minima atque facere corporis et laboriosam expedita nihil accusantium autem modi similique iste recusandae cupiditate velit placeat? Autem, maiores laudantium? Dignissimos numquam cumque quod a ex odit hic magni repellendus sit nisi quo illum iure natus, earum tempore atque. Laudantium, ex!</div>
</body>

四、盒子边框 (border)

CSS 属性名	功能	属性值
border-style	边框线风格复合了四个方向的边框风格	none：默认值 solid：实线 dashed：虚线 dotted：点线 double：双实线
border-width	边框线宽度复合了四个方向的边框宽度	长度，默认3px
border-color	边框线颜色复合了四个方向的边框颜色	颜色，默认黑色
border	复合属性	值没有顺序和数量要求。
border-left border-left-style border-left-width border-left-color border-right border-right-style border-right-width border-right-color border-top border-top-style border-top-width border-top-color border-bottom border-bottom-style border-bottom-width border-bottom-color	分别设置各个方向的边框

复合属性

边框相关属性共 20个

border-style 、border-width、border-color其实也是复合属性

示例

<style>
     div {
       width: 400px;
       height: 400px;
       background-color: aqua;
       /* border: 1px solid pink; */

       /* border-width: 10px; */
       border-left-width: 10px;
       border-top-width: 20px;
       border-right-width: 30px;
       border-bottom-width: 40px;

       /* border-color: pink; */
       border-left-color: red;
       border-top-color: orange;
       border-right-color: green;
       border-bottom-color: purple;

       /* border-style: dashed; */
       border-left-style: solid;
       border-top-style: dashed;
       border-right-style: double;
       border-bottom-style: dotted;

       /* 复合属性  不挑顺序 */
       border-left: 30px pink solid;
       border-top: 20px skyblue dashed;
       border-right: 10px aqua double;
       border-bottom: 40px gray dotted;

      
      
       
     }
  </style>
</head>
<body>
   <div>你好啊！</div>
</body>

五、盒子外边距(margin)

CSS 属性名	功能	属性
margin-left	左外边距	CSS中的长度值
margin-right	右外边距	CSS中的长度值
margin-top	上外边距	CSS中的长度值
margin-bottom	下外边距	CSS中的长度值
margin	复合属性，可以写1~4个值，规律同padding（顺时针）	CSS中的长度值

注意事项

子元素的margin，是参考父元素的content计算的。（因为是父亲的content中承装着子元素）
上margin、左margin：影响自己的位置；下margin、右margin：影响后面兄弟元素的位置。
块级元素、行内块元素，均可以完美地设置四个方向的margin；但行内元素，左右 margin可以完美设置，上下margin设置无效。
margin的值也可以是 auto，如果给一个块级元素设置左右margin都为 auto，该块级元素会在父元素中水平居中。
margin的值可以是负值。

示例

  <style>
      .outer {
         width: 400px;
         height: 400px;
         padding: 50px;
         background-color: bisque;
      }
      .inner {
         width: 100px;
         height: 100px;
         margin: 50px;
         background: orange;
      }
  </style>
</head>
<body>
  <!-- 子元素的margin是参考父元素content元素计算的 -->
   <div class="outer">
      <div class="inner"></div>
   </div>
   
------------------------------
  <style>
      .box {
         width: 200px;
         height: 200px;
      }

      .box1 {
          background-color: red;
      }
      .box2 {
         margin-top: 50px;
         margin-bottom: 50px;
          background-color: yellow;
      }
      .box3 {
          background-color: green;
      }

  </style>
</head>
<body>
   <!--上margin 左margin会影响自身位置，下 marin右margin 会影响兄弟元素原子 -->
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <hr>
  <img src="../../个人总结md/1盒子模型图片/image-20250315204614337.png" alt="111" >
  <img src="../../个人总结md/1盒子模型图片/image-20250315204614337.png" alt="" srcset="">
  <img src="../../个人总结md/1盒子模型图片/image-20250315204614337.png" alt="" srcset="">
</body>

--------------------------
<style>
         #d1 {
             width: 400px;
             height: 400px;
             margin: 50px;
             background-color: deeppink;
         }
         img {
            margin: 50px;
         }
         .one {
             background-color: deepskyblue;
         }
         .two {
             background-color: darkred;
             margin-left: 50px;
             margin-right: 50px;
             /* 行内元素 上下margin设置无效  */
             margin-top: 4000px;
         }
         .three {
             background-color: skyblue;
         }
    </style>
</head>
<body>
    <!-- 对于行内元素来说，左右的margin是可以设置的，上下的margin设置后是无效的 -->
    <div id="d1">我是一个块级元素</div>
    <img src="./image/image-20250315204614337.png" alt="">
    <div>我是一段文字</div>
    <hr>
    <span class="one">人之初</span>
    <span class="two">性本善</span>
    <span class="three">性相近</span>
    
    -----
    <style>
        div {
            width: 800px;
            height: 100px;
            /* margin-left: auto;
            margin-right: auto; */
            /* 块元素 水平居中了 */
            margin: 10px auto;

            background-color: deepskyblue;

        }

        span {
            background-color: blueviolet;
            margin: 10px auto;

        }
    </style>
</head>
<body>
    <!-- margin的值可以是auto，给一个块级元素左右margin设置auto可以实现该元素在其父元素内水平居中 -->
   <div>margin注意四</div>
   <span>好好学习，我是内联元素</span>

五、margin 塌陷问题

什么是 margin 塌陷

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

如何解决margin 塌陷

给父元素设置不为 0 的padding。
给父元素设置宽度不为 0 的border。
给父元素设置 css 样式 overflow:hidden

示例

<style>
       .outer {
         width: 400px;
         height: 400px;
         background-color: gray;
         /* overflow: hidden; */
       } 

       .inner1 {
          width: 100px;
          height: 100px;
          background-color: aqua;
          margin-top: 50px;
          
       }

       .inner2 {
          width: 100px;
          height: 100px;
          background-color: red;
          margin-bottom: 50px;
       }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner1">inner1</div>
        <div class="inner2">inner2</div>
    </div>

    <div>我是一段测试代码</div>
</body>

六、margin 合并问题

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

如何解决

写上边的时候直接把值加上下边，相当于只写一个值，用上边距+下边距;

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

示例

<style>
     .box {
       width: 200px;
       height: 200px;
     }
     .box1 {
       background-color: pink;
       margin-bottom: 50px;
     }
     .box2 {
       background-color: deeppink;
       margin-top: 60px;
     }
     .test {
       width: 200px;
       height: 200px;
       display: inline-block;
     }
     .testa {
        background-color: aqua;
        margin-right: 50px;
     }
     .testb {
        background-color: deepskyblue;
        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>