CSS布局：盒子模型与垂直布局解析-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_53977993/article/details/127394445

本文探讨了CSS中的盒子模型，包括过度约束、垂直布局、外边距重叠以及行内元素的特性。重点讲解了浏览器如何处理过度约束的情况，并介绍了去除滚动条的方法。同时，还讨论了不同元素隐藏方式的区别以及默认样式、盒子大小的控制，特别是box-sizing属性的应用。此外，文章还阐述了阴影和圆角的实现技巧，包括创建圆形和特定形状的矩形边框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

水平布局

过度约束

什么是过度约束？

浏览器规定一个元素水平方向的7个值相加必须要等于其父元素内容区的宽度，如果不等于的话，浏览器就会强制调整这7个值，让其相等。我们管这个过程叫过度约束。

浏览器如何调整？

1、如果水平方向7个值当中没有auto，那么浏览器自动调整就是margin-right。

2、水平方向7个值当中，有三个值可以被设置为auto(width、margin-left、margin-right)，只有1个auto时，谁是auto就调整谁。

3、有2个auto时：width、margin-left 为auto，调整的是width；width、margin-right 为auto，调整的是width；margin-left、margin-right 为auto，margin-left、margin-right各占一半，把元素挤到中间。

4、有3个auto时，width、margin-left、margin-right都为auto，调整的是width。

总结：有auto的话，width>margin-left=margin-right。

垂直布局

在垂直布局中，我们一般使用overflow属性。

overflow:visible   默认值  正常显示
         hidden    剪裁多余
         auto      自动根据内容显示是否出现滚动条
         scroll    生成双向滚动条

那么如何去除滚动条呢？

   ::-webkit-scrollbar{display:none;}

这个样式只能去除滚动条，却不能让文本继续滚动。如果你有好的建议，欢迎私信我！

垂直外边距的重叠

<!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>
        .box1 {
        width: 200px;
        height: 200px;
        background-color: red;
        margin-bottom: 100px;
      }
        .box2 {
        width: 100px;
        height: 100px;
        background-color: green;
        margin-top: -50px;
      }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

在兄弟元素中，如果两个外边距都是正值，谁大听谁的；如果两个都是负值，绝对值谁大听谁的；如果一正一负，两者相加，听最终结果的。

总结：兄弟元素的外边距重叠，对我们开发来讲，一般是有利的，所以不用做特殊调整。

<!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>
        .box1 {
        width: 200px;
        height: 200px;
        background-color: red;
      }
        .box2 {
        width: 100px;
        height: 100px;
        background-color: green;
      }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

在父子元素中，父子两个外边距重叠时，它会影响页面的其他元素，所以必须进行要调整。

如何调整？

1、不用margin-top，给父元素用padding-top，同时减小父元素的高度

.box1 {
        width: 200px;
        height: 100px;
        background-color: red;
        padding-top: 100px;
      }

2、在父子之间用边框隔开

        .box1 {
        width: 200px;
        height: 200px;
        background-color: red;
        border: 1px solid transparent;
      }
        .box2 {
        width: 100px;
        height: 100px;
        background-color: green;
        margin-top: 100px;
      }

3、开启元素的BFC（隐含属性）：overflow:hidden;。

        .box1 {
        width: 200px;
        height: 200px;
        background-color: red;
        overflow:hidden;
      }
        .box2 {
        width: 100px;
        height: 100px;
        background-color: green;
        margin-top: 100px;
      }

行内元素的盒子模型

1、行内元素的内容区不能设置宽高，是被内容撑开的；

2、内边距可以进行设置，但垂直方向不会改变页面的布局(也就是不会挤别人)；

3、边框也可以进行设置，但垂直方向不会改变页面的布局(不会挤别人)；

4、外边距不能设置垂直方向，可以设置水平方向，而且水平方向外边距不会重叠。

隐藏元素的方式有几种？

1、 display 用来设置元素显示的类型。

display:none          默认值 元素不在页面中显示（隐藏一个元素）
        inline        将元素设置为行内元素
		block         将元素设置为块元素
		inline-block  行内块块元素（即可以设置宽高，又不会独占一行）
		table         将元素设置为一个表格

2、visibility 用来设置元素的显示状态。

visibility:visible 默认值  元素在页面中正常显示
		   hidden  元素不在页面中显示（隐藏一个元素），位置依然保留

3、transparent 用来设置透明色。

background-color: transparent;

几者区别是什么？

        1、display：none；       删除了元素，元素位置不保留
		2、visibility：hidden；  元素位置保留
		3、将元素变为透明         元素位置保留

默认样式

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding等等，而它的这些默认样式，正常情况下我们是不需要使用的。所以我们往往在编写样式之前需要将浏览器中的默认样式都去除。

    <style>
          *{
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
          }
    </style>

方式一：1、清除浏览器的默认样式，手写，这种方式只适用于结构简单，小的练习。

<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>
    <link rel="stylesheet" href="./reset.css" />
    <style type="text/css"></style>
</head>

方式二：2、引入重置样式表(专门用来对浏览器的样式进行重置)。

注意：1、引入reset.css文件，前提是这个文件要有；2、引入reset.css文件一定是在你写的样式之前引入。

盒子的大小

说一说box-sizing，有几种情况？

默认情况下：盒子可见框的大小由内容区，内边距，边框共同决定。 box-sizing是用来设置盒子尺寸的计算方式。

box-sizing:content-box 内容区 默认值
           border-box  宽度和高度用来设置整个盒子可见框的大小
                       (包括边框，padding，内容区)

阴影和圆角

阴影

box-shadow可以用来设置元素的阴影效果，不会影响到页面的布局。

                box-shadow:10px 10px 10px red;
                第一个值：水平偏移量  正->左  负->右 ，必选
                第二个值：垂直偏移量  正->下  负->上 ，必选
                第三个值：模糊半径    默认0px，可选
                第四个值：颜色        默认是黑色，可选

圆角

border-radius可以用来设置圆角。

             borde-top-right-radius:50px;          右上角设圆角
             border-top-left-radius:50px;          左上角设圆角
             border-bottom-left-radius:50px;       左下角设圆角
             border-bottom-right-radius:50px;      右下角设圆角

一个圆形怎么做？

.box1{
        width: 200px;
        height: 200px;
        background-color:orange;
        border-radius: 50%;
     }

上下半圆中间矩形怎么做？

     .box1{
        width: 200px;
        height: 400px;
        background-color:orange;
        border-top-left-radius: 100px;
        border-top-right-radius: 100px;
        border-bottom-left-radius: 100px;
        border-bottom-right-radius: 100px;
     }

左右半圆中间矩形怎么做？

.box1{
        width: 400px;
        height: 200px;
        background-color:orange;
        border-top-left-radius: 100px;
        border-top-right-radius: 100px;
        border-bottom-left-radius: 100px;
        border-bottom-right-radius: 100px;
     }