一.垂直外边距的重叠（兄弟元素）
在网页中垂直方向的相邻外边距会发生外边距的重叠（兄弟元素）取最大值而不是两个之和 ，
父盒子的高度是217=100+100+15+2
解决垂直外边距重叠：
1）中间添加一个元素如a让其不相邻外边距就会使两个外边距之和
240=100+100+15+5+18（a的宽度）+2
二，垂直外边距（父子元素）
如果父子元素的垂直外边距相邻，则子元素的外边距会设置给父元素
父子盒子都会向下移15px
解决方法
1）给父元素设置border:1px solid red
2) 给父元素设置padding-top:1px （父盒子的高度会增大）
浏览器为在页面中没有样式时，也可以有一个比较好的显示效果，为很多元素设置了一些默认的margin和padding这些样式在默认情况下，我们是不需要的所以需要清除默认样式
三，内联元素和块级元素
1）内联元素不能设置width 和height可设置水平方向的内边距，padding-left：10px；padding-right:10px行内元素中的内容会水平居中显示，
2）行内元素可设置垂直方向内边距，但不会影响页面布局（会把下面的内容遮住）
3）支持水平方向margin(left,right)两个内联元素一个Left一个right外边距不会重叠，不支持垂直方向外边距
四,元素隐藏和显示
display:none 元素不会再网页中显示也不会占据位置
visibility:hidden/visible 元素隐藏后仍会占据位置
五，overflow使用
子元素默认是存在父元素内容区中，理论上子元素最大可等于父元素内容区域大小，如果子元素的大小超过了父元素的内容区域，则超过的部分会在父元素以外的位置显示（溢出）
overflow可设置父元素如何处理溢出的内容：
visible:默认值，不对溢出内容做处理，子元素会在父元素以外的位置显示
hidden:溢出内容会被修剪，不显示
scroll：为父元素加滚动条，该属性不管内容是否溢出，都会添加水和垂直双方向的滚动条
auto：根据需求自动添加滚动条，需要水平就添加水平
六，元素在文档流中的特点
文档流：网页时多层的，我们能看到的是顶层。文档流处在网页的最底层，表示的是一个页面中位置（如：地基）
所创建的元素都处在文档流中
块元素在文档流中的特点：
1）块元素在文档流中独占一行，
2）块元素在文档流中默认宽度是父元素的100%
3）块元素在文档流中的高度默认被内容撑开
内联元素在文档流中的特点：
1）内联元素在文档流中只占自身的大小
2）在文档流中内联元素的宽高默认都被内容撑开
给块元素设置浮动后
float浮动元素，使元素脱离文档流，
display:inline-block 给每个元素设置块元素可让它们水平排布，但这些块元素的代码若是换行了，则每个块元素之间都会有一个小空隙，（代码写一行就没有事）
如元素脱离文档流后，它后面的元素会立即上浮直到遇到父元素的边框
七，元素脱离文档流后带来的问题
当元素脱离文档流后，高度和宽度都是被内容撑开，（内联元素脱离文档流后可设置宽，高=>块元素）
脱离文档流后带来的问题：高度塌陷
来源：CSDN
作者：后来的我们没有了后来
链接：https://blog.csdn.net/qq_33345511/article/details/103811831