1、简述一下CSS盒模型
当对一个文档布局的时候&＃xff0c;浏览器渲染引擎会将所有的元素表示为一个矩形盒子&＃xff0c;这个矩形盒子就是盒模型。如下图所示&＃xff1a;
1-1、盒模型
盒模型分为标准盒模型和IE盒模型&＃xff1b;
标准盒模型&＃xff1a;标准盒模型主要由以下4部分组成&＃xff0c;包含margin、border、padding和content&＃xff1b;
IE盒模型&＃xff1a;IE盒模型主要由以下2部分组成&＃xff0c;包含margin和content&＃xff1b;在IE盒模型中&＃xff0c;元素的content值包含了元素的border值和padding值。
1-2、元素的宽高值的计算
在一个盒模型中&＃xff0c;元素的实际宽高值不包含margin值&＃xff1b;如果我们计算一个元素的占位宽高值&＃xff0c;则应该包含margin值&＃xff1b;如果计算一个元素的实际宽高值&＃xff0c;则不包含margin值。在IE盒模型中&＃xff0c;元素的实际width值就是内容的width值。实际的计算如下&＃xff1a;
- 标准盒模型占位宽高值的计算&＃xff1a;元素的占位width值 &＃61; margin * 2 &＃43; border * 2 &＃43; padding * 2 &＃43; content[设置的元素的width值]元素的占位height值 &＃61; margin * 2 &＃43; border * 2 &＃43; padding * 2 &＃43; content[设置的元素的height值]
- IE盒模型的占位宽高值的计算&＃xff1a;元素的占位width值 &＃61; margin * 2 &＃43; content[包含元素的border值和padding值]元素的占位height值 &＃61; margin * 2 &＃43; content[包含元素的border值和padding值]
1-3、盒模型中margin、border、padding的取值
margin可以为负值&＃xff0c;也可以设置为百分比&＃xff0c;设置百分比时参考的是当前元素的父元素&＃xff0c;而不是元素自身设置。
padding不可以设置负值&＃xff0c;可以设置百分比&＃xff0c;设置百分比时参考的是当前元素的父元素&＃xff0c;而不是元素自身设置。
border取值必须是实际的值&＃xff0c;不能是百分比。
2、box-sizing的取值有哪些&＃xff1f;区别是什么&＃xff1f;
box-sizing属性用于更改计算元素宽高的默认的CSS盒子模型&＃xff1b;它的取值有5个&＃xff1a;content-box、border-box、inherit、initial、unset&＃xff1b;实际应用中&＃xff0c;用的比较多的两个属性值就是content-box和border-box。
2-1、属性出现的背景
在CSS中&＃xff0c;为一个元素的设置宽高属性值时&＃xff0c;只会应用到这个元素的内容区域。如果这个元素设置了padding值和border值&＃xff0c;绘制到屏幕上的盒子的宽度和高度值就会加上设置的padding值和border值&＃xff0c;浏览器就需要去重新计算盒子的宽高值&＃xff0c;这种设置非常不利于响应式布局。
2-2、content-box和border-box的区别
1> content-box
默认值。内容区域的宽高值不包含元素的padding和border值&＃xff0c;也就是说&＃xff1a;假如我们给元素设置了一个width值为50px&＃xff0c;那么这个元素的内容区域的width值就是50px&＃xff1b;元素设置的padding值和border值不包含在这个设置的width中。【content-box就相当于是标准盒模型。】
2>、border-box
内容区域的宽高值包含元素的padding和border值&＃xff0c;也就是说&＃xff1a;假如我们给元素设置了一个width值为50px&＃xff0c;那么这个元素的内容区域的width值小于等于50px&＃xff1b;元素设置的padding值和border值会包含在这个设置的width值50px中。【border-box就相当于是IE盒模型】
3、CSS隐藏元素的方式有哪些&＃xff1f;区别是什么&＃xff1f;
3-1、opacity
用法&＃xff1a;opacity: 0;
说明&＃xff1a;该属性的意思是检索或设置对象的透明度&＃xff1b;当opacity的值为0时&＃xff0c;元素在视觉上消失了&＃xff0c;但是它仍然占据这那个位置&＃xff0c;并且会对页面布局起作用&＃xff1b;
3-2、display
用法&＃xff1a;display: none;
说明&＃xff1a;该属性设置为none时&＃xff0c;会将元素直接从文档中删除&＃xff1b;不利于SEO&＃xff1b;使用该属性设置元素的隐藏&＃xff0c;不占页面空间&＃xff0c;对页面布局没有影响&＃xff1b;
3-3、visibility
用法&＃xff1a;visibility: hidden;
说明&＃xff1a;该属性只是将元素隐藏&＃xff0c;不会将元素从文档中移除&＃xff1b;隐藏的元素仍然占据位置&＃xff0c;会影响页面布局&＃xff1b;该属性会继承&＃xff0c;如果父元素使用了该属性&＃xff0c;子元素也会被隐藏&＃xff1b;
3-4、position
用法&＃xff1a;position:absolute;left: -10000px;
说明&＃xff1a;使用了定位方式的元素&＃xff0c;只要将元素的4个方向的值设置足够大&＃xff0c;超出浏览器的可视区域范围&＃xff0c;元素就会处于隐藏状态&＃xff1b;
4、简单说一下CSS元素分类&＃xff1a;块元素和行内元素
4-1、CSS元素主要分为块级元素和行内元素
块级元素&＃xff1a;div dl dd dt h1~h6 header footer form ul ol li hr p table
行内元素&＃xff1a; a img em strong i label input textarea select sub sup b
4-2、块状元素和内联元素的区别
块级元素是其他元素的容器&＃xff0c;可以容纳内联元素和其他块状元素&＃xff0c;可以为其设置宽高值
内联元素只能容纳文本和其他内联元素&＃xff0c;不能设置宽高值
4-3、块级元素和内联元素可以通过display属性来转换
1> 将一个块级元素的&＃96;display&＃96;属性设置为inline&＃xff0c;块级元素就被转换成了内联元素&＃xff1b;
2> 将一个内联元素的&＃96;display&＃96;属性设置为block&＃xff0c;内联元素就被转换成了块级元素&＃xff1b;
3> 将元素的&＃96;display&＃96;属性的值设置为inline-block&＃xff0c;也可以为元素设置宽高值&＃xff1b;但是该值不支持IE6/7
5、CSS清除浮动的几种方式
浮动的认识&＃xff1a;https://blog.csdn.net/mengStudents/article/details/84893505
5-1、使用空标签清除浮动
在浮动元素的后边添加空标签
5-2、在浮动元素之后添加一个空元素来清除浮动
这种方式不兼容IE6&＃xff0c;在IE6下&＃xff0c;会将小于19px的元素的高度都默认设置为19px&＃xff0c;解决方法如下&＃xff1a;
.clear{height:0;font-size:0;//使用这种方式设置之后&＃xff0c;仍然存在2px的偏差clear:both;
}
5-3、给浮动元素的父级添加属性-overflow:hidden
使用这种方式清除浮动&＃xff0c;需要配合zoom属性一起使用&＃xff0c;只有设置了zoom属性&＃xff0c;才会触发IE浏览器的haslayout
父元素{overflow:hidden/auto;zoom:1;
}
注意&＃xff1a;
在IE6/7下&＃xff0c;浮动元素的父级有高度&＃xff0c;就不需要清除浮动;
在IE6/7下&＃xff0c;两个元素并在同一行&＃xff0c;需要给两个元素都加浮动
5-4、给父元素添加浮动&＃xff1a;不推荐使用
5-5、给父元素添加属性
display:inline-block;
5-6、定义一个单独的类清除浮动
.clear{zoom:1;//兼容IE6
}
.clear:after{display:block;content:"";clear:both;height:0;
}
6、CSS元素居中
参考&＃xff1a;https://blog.csdn.net/mengStudents/article/details/76222838
7、写出IE6 bug的几种解决方式
7-1、常见的普通兼容性问题
1>、问题描述
在IE6下&＃xff0c;如果希望两个块级元素并列排在一行&＃xff0c;需要给两个元素都添加浮动样式&＃xff1b;如果给一个元素添加了浮动样式&＃xff0c;另一个元素通过margin值来设置&＃xff0c;在IE6下会存在3px的偏差&＃xff1b;
解决办法&＃xff1a;给两个块级元素都添加浮动
2>、元素嵌套问题
P标签嵌套h3标签&＃xff0c;将P元素设置宽高后&＃xff0c;会出现两个块状元素
解决办法&＃xff1a;注意元素的嵌套问题
3>、IE6最小高度问题&＃xff1a;
当一个元素的高度小于IE6的最小高度19px时&＃xff0c;会默认将元素的最小高度设置为19px;
解决办法&＃xff1a;使用overflow:hidden;来设置使用font-size:0;来设置
4>、margin值传递&＃xff1a;
在任何浏览器下&＃xff0c;子元素的margin值会传递的父元素的margin值
在标准浏览器下&＃xff0c;父级或子级浮动都不会出现问题
解决办法&＃xff1a;在使用overflow:hidden;时&＃xff0c;在标准浏览器下显示正确&＃xff0c;IE6下不起作用&＃xff08;没有触发IE6的haslayout&＃xff09;&＃xff1b;在IE6下&＃xff0c;需要结合zoom:1&＃xff0c;一起使用&＃xff0c;zoom用来触发IE6的haslayout
5>、问题描述
在IE6下&＃xff0c;父级有边框&＃xff0c;子元素的margin值会消失
解决方式&＃xff1a;触发父元素的haslayout&＃xff0c;即添加zoom:1
6>、a标签伪类&＃xff1a;
在IE6浏览器下&＃xff0c;只支持a标签的伪类&＃xff1b;标准浏览器下支持所有标签的hover类
解决方式&＃xff1a;使用JS中的onmouseover方法实现hover伪类
7-2、float浮动出现的bug
1>、IE6下的双边距bug
当IE6下的块元素同时设置浮动和横向margin值时&＃xff0c;块元素会存在双边距bug&＃xff0c;这时横向margin值就会被放大为两倍&＃xff1b;
当有多个块元素浮动时&＃xff0c;设置margin-left时&＃xff0c;左边第一个会有双边距&＃xff1b;设置margin-right时&＃xff0c;右边第一个会有双边距
解决办法&＃xff1a;使用display:inline;来实现
2>、IE6下的li问题
在IE6、7下&＃xff0c;li元素本身不浮动&＃xff0c;li下的子元素浮动&＃xff0c;那么li就会产生间隙
解决办法&＃xff1a;
a、给li添加浮动、设置li的宽度
b、给li添加vertical-align&＃xff1a;top
3>、在IE6下&＃xff0c;当元素的最小高度和li的间隙共同存在时&＃xff0c;需要给li元素同时添加浮动和overflow属性
4>、给添加浮动的多个DIV添加margin值时&＃xff08;上下左右都设置&＃xff09;&＃xff0c;在IE6下&＃xff0c;下margin值会消失
原因&＃xff1a;当一行子元素占有的宽度之和与父元素的宽度值相差超过3px时&＃xff0c;或者不满一行时&＃xff0c;最后一行的下margin值就会失效&＃xff0c;目前这种bug没有解决方案
5>、IE6下的文字溢出bug
当子元素与父元素的宽度差值小于3px时&＃xff0c;文字就会溢出&＃xff0c;两个元素都是浮动元素
溢出情况&＃xff1a;两个浮动元素中间有注释或者内嵌元素时的出现
解决办法&＃xff1a;父元素的宽度大于子元素的宽度&＃xff0c;且宽度差值大于3px&＃xff1b;在两个浮动元素中间添加块元素
6>、浮动和定位
当浮动元素和绝对定位元素是并列关系时&＃xff0c;在IE6下绝对定位元素会消失
解决办法&＃xff1a;给绝对定位元素添加父元素包裹起来
7-3、定位问题
1>、相对定位问题
在IE6、7下&＃xff0c;当子元素有相对定位时&＃xff0c;父级的overflow:hidden;包不住子级的高度
解决办法&＃xff1a;给父级添加相对定位
2>、绝对定位问题
在IE6下&＃xff0c;绝对定位元素的父级宽高为奇数时&＃xff0c;right和bottom属性有1px的偏差
3>、固定定位
固定定位在IE6下不兼容
7-4、IE6中的边框问题
IE6不支持1px的点线&＃xff0c;支持2px及以上的点线边框
需要点线边框时&＃xff0c;利用背景图来实现
7-5、透明度兼容性
标准浏览器下&＃xff0c;使用opacity设置透明度
IE6 7 8下&＃xff0c;透明度的设置&＃xff1a;filter&＃xff1a;alpha(opacity&＃61;50)&＃xff1b;
7-6、表单兼容性
1>、input标签
在IE6 7下&＃xff0c;输入类型的表单控件上有1px的间隙
解决方法&＃xff1a;给input添加浮动
2>、 input下的图片背景问题
在IE6 7下&＃xff0c;背景图片会随着文字的输入而发生移动
解决办法&＃xff1a;给父级添加背景&＃xff0c;且父级的宽度与子级的宽度一致&＃xff0c;清除本身的背景色
3>、border问题
在IE6 7下设置border:none;无效&＃xff0c;
解决办法&＃xff1a;给input重新添加背景
7-7、图片格式问题
1>、gif&＃xff1a;背景图片全透明部分可以显示&＃xff0c;半透明部分会失效
2>、jpg&＃xff1a;jpg格式的图片显示出来是不透明的
3>、png8&＃xff1a;与gif合适的图片一样
4>、png24&＃xff1a;全透明和半透明效果都会保留
注意&＃xff1a;png格式的图片在IE6下不支持
解决方法&＃xff1a;
引入script库&＃xff1a;DD_belatedPNG_0.0.8a.js
在IE6下可以使得浏览器兼容png图片,调用.fix方法&＃xff1a;DD_belatedPNG.fix(".类名")
7-8、CSS hack
IE代码解析&＃xff1a;<[endif]-->给浏览器添加特殊标识&＃xff0c;限定当前CSS样式只能在某些浏览器下被解析
* &＃43; 表示被IE7以下的IE浏览器解析
\9&＃xff1a;IE10以下的浏览器解析
_&＃xff1a;下划线表示IE6之前的浏览器解析
谷歌浏览器的CSS hack:&＃64;media screen and (-webkit-min-device-pixel-ratio:0){.box{color:red;}}
7-9、important
修饰CSS样式&＃xff0c;提升样式的优先级&＃xff0c;添加important的CSS样式的优先级最高&＃xff0c;大于行内样式
但是在IE6下&＃xff0c;在important样式后边添加一条同样的样式之后&＃xff0c;这个样式会失效&＃xff0c;会按照原来默认的优先级设置样式
7-10、margin值的设置
在使用margin赋值时&＃xff0c;如果使用负值设置&＃xff0c;在IE6下超出父级的部分会被父级隐藏
解决方法&＃xff1a;给子元素添加position&＃xff1a;relative;
7-11、IE的haslayout
当元素本身有高度时&＃xff0c;就会触发IE浏览器的haslayout
7-12、IE及标准浏览器中的div居中问题
标准浏览器中设置margin:0 auto可以设置元素居中&＃xff0c;在IE中&＃xff0c;不起作用
标准浏览器中设置text-align:center;可以设置文本居中&＃xff0c;但是在IE浏览器中&＃xff0c;他会默认一切居中&＃xff0c;包括标签
在IE中&＃xff0c;如果不想设置其他元素的文本居中&＃xff0c;在可以在父级设置text-align:left;就可以恢复为默认属性&＃xff0c;其他浏览器不会受影响
7-13、margin值
外边距会出现上下叠压&＃xff1b;
父子级嵌套问题&＃xff1a;自己的margin会传递给父级&＃xff0c;一般使用padding值来替代margin值
8、CSS 选择符有哪些&＃xff1f;哪些属性可以继承&＃xff1f;优先级算法如何计算&＃xff1f; CSS3新增伪类有那些&＃xff1f;CSS3有哪些新特性&＃xff1f;
参考&＃xff1a;http://www.cnblogs.com/SHERO-Vae/p/5795729.html
9、CSS伪类和伪元素
参考&＃xff1a;https://blog.csdn.net/mengStudents/article/details/85267678
京公网安备 11010802041100号