当前位置：网站首页>盒子模型中垂直分布的基本内容

盒子模型中垂直分布的基本内容

2022-08-09 05:23:00 【Y-琼眸】

overflow属性

今天来学习一下盒子模型中的垂直分布。

默认情况下，块元素的宽高被内容撑开。如果自定义了，那就听你设置的

如果父元素设置的宽高，小于内容区，内容会溢出，这个时候我们就可以用overflow属性来设置。

 overflow: scroll;

overflow属性设置

可选值：

visible 默认值内容正常显示，设不设一样的

hidden 裁剪多余的内容

scroll 生成双侧（右下）滚动条一般横向不要有滚动条

auto 按实际情况生成滚动条

overflow-x: ; 单独设置水平方向

overflow-y: ; 单独设置垂直方向

垂直外边距重叠问题

在设置垂直布局中的外边距时，我们可能会遇到垂直外边距重叠的问题，那我们该如何解决呢？

如果是兄弟元素

如果外边距都是正值的话，外边距的设置谁大听谁的

如果一正一负，外边距的设置是两者相加

两个都是负值，外边距的设置听绝对值大的

注意：兄弟元素外边距重叠，一般不需要特殊处理，有利于开发的

 .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 120px;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-top: 100px;

如果是父子元素

如果父子元素的垂直外边距相邻了，则子元素的外边距会传给父元素，导致页面混乱

解决方案：

1.隔开父子相邻的外边距可以用边框

但边框会改变盒子大小，也会改变页面布局

2.开启元素的BFC属性：用overflow：非visible的值

 .box3{
            width: 200px;
            height: 200px;
            background-color: red;
            /* border: 1px solid transparent; */
            overflow: hidden;
        }
        .box4{
            width: 100px;
            height: 100px;
            background-color: green;
            margin-top: 100px;   
        }