【玩转CSS】垂直布局

默认情况下，块元素的高度是被内容撑开，如果是自定义高度大于内容区，听自定义的

        如果父元素高度设置，小于内容区，则会溢出

            Overflow:  可选值

                visible     默认值

                hidden      裁剪多余的内容

                scroll      生成垂直和水平的滚动条

                auto        按实际情况生成滚动条

        补充：如何去除滚动条样式？

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

            overflow-x      单独设置水平方向的滚动条

            overflow-y      单独设置垂直方向的滚动条

扫描二维码关注公众号，回复： 14639682 查看本文章

一：垂直外边距重叠问题

1、兄弟元素的外边距重叠

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

            2、一正一负，则外边距的设置是两者相加

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

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

2、父子元素的外边距重叠

            如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素，从而导致页面布局的改变

            1、隔开父子相邻的外边距 用边框

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

            2、开启元素的BFC属性：

                BFC：元素的属性

                开启BFC的属性其中之一的方式：

                overflow属性设置为一个非visible的值

二、内联元素的盒模型

            1、内容区

                默认情况下，不可以自定义内容区的大小

            2、内边距

                默认情况下，可以设置内边距，但垂直方向不影响整个页面的布局

            3、边框

                默认情况下，可以设置边框，但垂直方向的边框不影响整个页面的布局

            4、外边距

                默认情况下，不可以自定义垂直方向的外边距大小，水平方向可以设置，且水平方向的外边距不会重叠