css-02

1. 表格边框重叠导致变粗问题

border-collapse:collapse;

可89=================以使相邻边框合并在一

2.padding问题

盒子的宽=width+padding+border
padding的设置会使盒子被撑大
解决：通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小
padding不影响盒子大小的情况
若果没有给一个盒子指定宽度，此时，如果给这个盒子指定padding，则不会撑开盒子。

3.块级盒子水平居中

条件

盒子必须指定了宽度
左右外边距都设置为auto
常用的三种写法

margin-left:auto;margin-right:auto;
margin:auto;
margin:0 auto;

4. 相邻元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下边距margin-bottom，下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和，而是取两个值中的较大者

微信截图_20200916172325.png

解决方法：尽量只给一个盒子添加margin值

5. 嵌套块元素垂直外边距合并（塌陷）

对于两个嵌套关系的块元素，若果父元素没有上内边距及边框
父元素的上外边距会与子元素的上外边距发生合并
合并后的外边距为两者中的较大者

微信截图_20200916172629.png

解决方法：

可以为父元素定义上边框
可以为父元素定义上内边距
可以为父元素添加overflow:hidden.
等等

6. css布局的三种机制

普通流（标准流）
- 块级元素会独占一行，从上向下顺序排列；
  - 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
- 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；
  - 常用元素：span、a、i、em等
浮动
- 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。
定位
- 将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。

7. 浮动（float）

概念：元素的浮动是指设置了浮动属性的元素会

脱离标准普通流的控制
移动到指定位置。

作用

让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。
可以实现盒子的左右对齐等等..
浮动最早是用来控制图片，实现文字环绕图片的效果。

浮动后块级元素默认相当于转换为了inline-block

注意：浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

8. 清除浮动

清除浮动本质：

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

清除浮动的方法

clear:both;
是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。

优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差。

父级添加overflow属性方法
可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。
优点：代码简洁
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
使用after伪元素清除浮动

 .clearfix:after {  
content: ""; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;  
}   
 .clearfix {
*zoom: 1;
}   /* IE6、7 专有 */

优点：符合闭合浮动思想结构语义化正确
缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

使用双伪元素清除浮动

.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

优点：代码更简洁
缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。