CSS之盒子模型的布局

幻阳梦天

已于 2022-10-19 19:39:50 修改

阅读量469

点赞数

分类专栏： HTML 文章标签： css 前端 vscode

于 2022-10-18 20:05:04 首次发布

本文链接：https://blog.csdn.net/qq_53977993/article/details/127394445

版权

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

摘要由CSDN通过智能技术生成

水平布局

过度约束

什么是过度约束？

浏览器规定一个元素水平方向的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>

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

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