一、盒模型
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和更低版本中的元素会不正确地扩展以适应它们的内容,所以设置小的高度不会影响实际高度)