CSS（五）垂直布局和盒子模型进阶

Fun星渊

于 2022-11-24 21:02:52 发布

阅读量291

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_48000288/article/details/128026579

版权

本文深入探讨CSS中的垂直布局技巧，包括overflow属性的使用、外边距折叠的处理、内联元素盒子的特性，以及默认样式的重置。同时，讲解了盒子模型的大小设定，特别是box-sizing属性的影响，并介绍了阴影和圆角的实现方法。通过两个实例——聚美优品和中心动态列表，进一步巩固了理论知识。

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

1.垂直布局

使用overflow属性设置父元素如何处理溢出的子元素

可选值：

visible 默认值文本正常显示

hidden 裁剪掉多余的内容

scroll 生成双向的滚动条，可以通过滚动条查看完整的内容

auto 根据实际的内容出现滚动条

overflow-x 对水平方向溢出的内容进行设置，垂直方向根据实际需要自动生成

overflow-y 对垂直方向溢出的内容进行设置，水平方向根据实际需要自动生成

    <style>
      .box1 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        /* overflow:auto; */
        overflow-x: hidden;
      }
      p{
        width: 300px;
      }
    </style>

块元素默认情况下，宽度是父元素内容区的100%，高度是被内容撑开

在垂直布局中，一般情况下，我们是不设置高度的，让元素被内容撑开

2.外边距的折叠

垂直外边距的重叠

-兄弟元素

如果两个值都是正值，谁大听谁的

如果两个值是负值，谁小听谁的（绝对值谁大听谁的）

如果是一正一负，那最终的值，两者相加

-父子元素

如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素,

导致父元素的位置发生变化，会影响到父元素下面的布局，

所以这个问题必须要解决

<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: 50px; */
      }

      .inner {
        width: 100px;
        height: 100px;
        background-color: yellowgreen;
        margin-top: 100px;
      }
    </style>