前端笔记——CSS常见问题及解决方案

• 问题一：外边距合并问题

问题描述：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者;

解决方法：
1、使用这种特性
2、设置一边的外边距，一般设置margin-top
3、将元素浮动或者定位

• 问题二：margin-top 塌陷问题

问题描述：在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败；

解决方法：
1、外部盒子设置一个边框
2、外部盒子设置 overflow:hidden
3、使用伪元素类：

此代码就是用伪元素类方式解决的；
.clearfix:before{
    content: '';
    display:table;
}

• 问题三：css元素溢出问题

问题描述: 当子元素的尺寸超过父元素的尺寸时出现此问题；

解决方法：
需要通过overflow来设置父元素显示溢出的子元素的方式；

overflow的设置项： 
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有    清除浮动、清除margin-top塌陷的功能。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余  的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5、inherit 规定应该从父元素继承 overflow 属性的值。

• 问题四：内联元素间隙问题

解决内联元素间隙的方法 :
1、去掉内联元素之间的换行
2、将内联元素的父级设置font-size为0，内联元素自身再设置font-size

*问题五：浮动问题

问题描述：父元素如果没有设置尺寸(一般是高度不设置)，父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动；

解决清除浮动的方法：
1、父级上增加属性overflow：hidden
2、在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）
3、使用成熟的清浮动样式类，clearfix

.clearfix:after,.clearfix:before{ content: "";display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;}
或
.con2{... overflow:hidden}
或
<div class="con2 clearfix">