盒子布局知识

最新推荐文章于 2025-11-25 15:30:00 发布

原创最新推荐文章于 2025-11-25 15:30:00 发布 · 124 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

文章详细阐述了CSS中的盒子模型，包括水平方向上影响元素大小和位置的7个属性，浏览器在过度约束情况下的调整策略，以及如何实现元素居中。此外，还讨论了垂直方向上的布局，如高度设置、溢出处理和滚动条控制。对于垂直外边距重叠问题，文章提供了处理父子元素间外边距的方法。最后提到了内联元素的盒子特性，强调其宽高受内容限制，以及内联元素的边距和边框行为。

一、水平方向上，有7个值可以改变盒子的大小及位置

margin-left 
border-left 
padding-left 
width
padding-right 
border-right
margin-right

margin-left +border-left +padding-left +width+ padding-right +border-right+ margin-right=父元素内容区的宽度

浏览器规定水平方向这七个值相加必须要等于其父元素内容区的宽度，如果这7个值相加不等于父元素内容区的宽度，浏览器就会改变某些值，让其成立，这个过程称作“过度约束”

浏览器调整：

1.如果水平方向7个值中没有auto，默认调整的是margin-right

0+0+0+100+0+0+500 = 60

2、7个值当中，有3个值可以被设置为auto，分别是margin-left，width，margin-right

（1）、1个auto

谁是auto就调整谁

margin-left为auto，

auto+0+0+100+0+0+0= 600 auto=500

width为auto

0+0+0+auto+0+0+0= 600 auto=600

margin-right为auto

0+0+0+100+0+0+auto= 600 auto=500

（2）、2个auto

margin-left，width为auto 调整width

auto+0+0+auto+0+0+0px= 600

width，margin-right为auto 调整width

margin-left，margin-right为auto 同时调整，各一半

简写为：margin:0 auto; 可以让元素居中

（3）、3个auto

margin-left，width，margin-right为auto 调整width

总结：

1、调整的顺序: width>margin-right/margin-left

2、margin:0 auto; 可以让元素居中,前提是width是固定的

二、垂直方向上

默认情况下，父元素的高度是被内容撑开的，如果设置了，设置多少就是多少可以利用overflow属性设置溢出内容

可选值：

visible ：多余的内容正常显示默认值

hidden：裁剪多余

auto ：根据内容需要自动生成滚动条

scroll ：生成双向滚动条

如何去除滚动条

      .box1 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
      }

三、垂直外边距重叠问题

-兄弟元素

1、下外边距和上外边距重叠了，如果都是正值的，用绝对值大的

2、如果都是负值，也用绝对值大的

一般情况下，兄弟元素的外边距重叠，有助于我们开发，不用做特殊处理

-父子元素

如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素,从而影响页面的布局这种情况必须要处理

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        margin-bottom: 50px;
      }
      .box2 {
        width: 100px;
        height: 100px;
        background-color: green;
        margin-top: 30px;
      }
      .outer {
        width: 200px;
        height: 200px;
        background-color: yellow;
        /* margin-top: 100px; */
        /* 方案一：不用margin，用padding实现 */
        /* padding-top: 100px; */
        /* 方案二：outer加个边框,隔开父子的上外边距 */
        /* border: 1px solid transparent; */
        /* 方案三：给元素添加BFC(块级格式化)隐含属性 */
        overflow:hidden;

      }

      .inner {
        width: 100px;
        height: 100px;
        background-color: yellowgreen;
        margin-top: 100px;

      }
    </style>
  </head>
  <body>
    <!-- 兄弟元素 -->
    <!-- <div class="box1"></div>
    <div class="box2"></div> -->
    <!-- 父子元素 -->
    <div class="outer">
      <div class="inner"></div>
    </div>
  </body>
</html>

四、内联元素盒子

1、内容区它的宽高都是被内容撑开的，不能自定义设置

2、内边距可以设置，但垂直方向不会挤别的元素

3、边框可以设置，但垂直方向不会挤别人

4、外边距水平方向可以设置，垂直方向设置，没有变化

五、盒子大小和边框

盒子大小怎么设置？都有属性值？

默认情况下：盒子可见宽的大小由内容区，内边距，边框共同决定

box-sizing 用来设置盒子尺寸的计算方式 width/height 指的是谁

可选值：

content-box 内容区默认值

border-box 宽度和高度用来设置整个盒子可见框的大小，包括边框，padding，内容区