CSS知识点总结2

一、盒模型

1、盒模型由内容、内边距、边框、外边距组成。

2、在CSS中，width和height指的是内容区域的高度和宽度，增加内边距、边框和外边距的高度和宽度不会影响内容区域的内容区域的尺寸，但会增加元素框的总尺寸。

3、在IE中width指的是内容、内边距和边框的和

 

二、div水平垂直居中的方法

1、  margin-left:auto;  margin-right:auto;（水平居中）

2、  假定有个父div和一个子div，要让子div相对于父div水平垂直居中

 

 

 

三、固定布局、流式布局和弹性布局的区别：

固定布局：宽度以像素为单位

流式布局：尺寸用百分数而不是像素设置

弹性布局：用自号来设置元素宽度

 

 

四、常见bug及其修复方法

1、  双外边距浮动bug

Windows上的IE6及其更低版本使浮动元素上的外边距加倍，解决方法：display:inline

 

2、  3像素文本偏移bug

当文本与一个浮动元素相邻时，文本在相邻的地方会出现3像素间隙。

 

正常情况：

IE6及以下：

 

解决方法：

浮动元素非图片

浮动元素是图像：

IE5.x下：

Img .myFloat{

 margin:0-3px;

}

IE6下

Img .myFloat{

 margin:0;

}

 

3、  IE6的重复字符bug

当在一系列浮动元素的第一个和最后一个元素之间有多个注释时，就会出现这个bug。前两个注释没有影响，后续的每个注释会导致两个字符重复出现。3个注释导致2个重复字符，4个注释导致4个重复字符，5个注释导致6个重复字符。

 

解决方法：去掉HTML中的注释。

 

 

4、  IE6的藏猫猫bug

一个浮动元素后面跟着一些非浮动元素，然后是一个清理元素，所有这些元素都包含在一个设置了背景颜色或图片的父元素中。如果清理元素碰到了浮动元素，那么中间的非浮动元素看起来消失了，隐藏到了父元素的背景颜色或图像后面，只有在刷新页面时才重新出现。

 

解决方法：

1、  避免清理元素与浮动元素接触

2、  给容器元素设定尺寸（之前是没有设定尺寸的）

3、  给容器指定行高。

4、  将浮动元素和容器元素的position设置为relative。

 

5、  相对容器中的绝对定位

IE5.x对相对容器中的绝对定位元素的绝对定位方式不正确，绝对元素会错误地相对于视口对框进行定位。(原因在于相对定位的元素没有获得IE?win内部的hasLayout属性)

解决方案：

使用条件注释过滤IE5和IE6，为容器布局提供一个任意的高度

.container{

 Height:1%;

}

（这会让容器拥有布局，但是因为IE6和更低版本中的元素会不正确地扩展以适应它们的内容，所以设置小的高度不会影响实际高度）