【面试系列】=＞ [H5C3]

1.display和visibility的区别是什么？

一:空间占据

display:none;是彻底消失,不再文档流种占位置,浏览器也不会被解析该元素

visibility:hidden 是视觉上消失了,可以理解为透明度为0的效果,再文档流中占位,浏览会解析该元素

visibility:hidden比display:none性能要好,display:none切换显示,页面会产生回流(页面重新构建,此时就是回流),而visility切换是否显示则不会引起回流

二:子元素继承

display:none不会被子元素继承,但是父元素都不在了,子元素自然也就不在了

visibility:hidden会被子元素继承,可以通过设置子元素visibility:visible使子元素显示出来

opactiy:0也会被子元素继承,但是不能通过设置子元素opacity:0是的其重新显示

三:事件绑定

display:none的元素都不在页面存在了,自然也无法触发上面绑定的事件了

visibility:hidden 元素绑定的事件也无法触发

opacity:0元素上面绑定的事件可以触发

四:过渡动画

transition对于display无效
transition对于visibility无效
transition对于opacity有效

2.CSS中的盒子模型

盒模型是CSS中核心的概念,描述了元素如何显示.

盒模型由:元素内容conten+内边距padding+边框border+外边距margin组成

盒子的宽度:padding和border的设置会影响元素width的计算

• 在box-sizing属性为conten-box的时候,width=元素内容区
• 在box-sizing属性为border-box的时候,width=元素内容区+padding+border

3.css引入的方式有哪些，link和@import的区别是什么?

一、 css引入的方式的四种方法

1.链入外部样式表,就是把样式表保存为一个样式文件.css,然后再页面中使用

<link rel="stylesheet" type="text/css" href="***.css">

2.内部样式表

<style type="text/css">
	div { height: 100px; }
</style>

3.导入外部样式表,用@import在内部样式表之间

<style type="text/css">
	@import "***.css"
</style>

4.内嵌式,在标签内写入style=""

<div style="background: #000"></div

二、 link和@import的区别

1)link是xhtml标签,除了加载css外,还可以定义事务;@import只能加载CSS

2)Link在引入CSS时,在页面在如图同时加载;@import需要页面完全载入后加载

3)Link是XHTML标签,无兼容性问题;@import不兼容低版本浏览器

4)link支持使用js控制DOM改变样式,而@import不支持

4.清除浮动的几种方法

为什么要清楚浮动?清除浮动的本质是什么?

清除浮动主要是为了解决父元素因为子元素浮动引起的内部高度为0的问题

清除浮动的方法:
1.额外标签发: 给谁清除浮动,就是在其后面额外添加一个空白标签.
优点:通俗易懂,书写方便(不推荐使用)
缺点:添加许多无意义标签,结构化比较差

.clear{clear:both}
<div class="clear"></div>

2.父级添加overflow:hidden
优点:代码简洁
缺点:内容增多时容易造成不会自动换行导致内容被隐藏,无法显示需要溢出的元素

3.使用after伪元素清除浮动：
优点:符合闭合浮动思想,结构语义化正确
缺点:由于IE6-7不支持,使用ZOOM: