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