HTML、HTTP、Web综合面试题（五）

1.display: none; 与 visibility: hidden;的区别

• display:none ;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden ;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内 容不可⻅
• display: none ;是⾮继承属性，⼦孙节点消失由于元素从渲染树消失造成，通过修改⼦孙节点属性⽆法显示 ；visibility: hidden; 是继承属性，⼦孙节点消失由于继承 了 hidden ，通过设置 visibility: visible; 可以让⼦孙节点显式
• 修改常规流中元素的 display 通常会造成⽂档重排。修改visibility属性只会造成 本元素的重绘。
• 读屏器不会读取 display: none ;元素内容；会读取 visibility: hidden; 元素内容

2.link 与 @import 的区别

• link 是 HTML ⽅式， @import 是CSS⽅式
• link 最⼤限度⽀持并⾏下载， @import 过多嵌套导致串⾏下载，出现 FOUC (⽂档样式 短暂失效)
• link 可以通过 rel="alternate stylesheet"指定候选样式
• 浏览器对 link ⽀持早于 @import ，可以使⽤ @import 对⽼浏览器隐藏样式
• @import 必须在样式规则之前，可以在css⽂件中引⽤其他⽂件，总体来说： link 优于 @import

3.display、float、position的关系

如果 display 取值为 none ，那么 position 和 float 都不起作⽤，这种情况下元素不 产⽣框 否则，如果 position 取值为 absolute 或者 fixed ，框就是绝对定位的， float 的计 算值为 none ， display 根据下⾯的表格进⾏调整。 否则，如果 float 不是 none ，框是浮动的， display 根据下表进⾏调整 否则，如果元素是根元素， display 根据下表进⾏调整 其他情况下 display 的值为指定值 总结起来：绝对定位、浮动、根元素都需要调整 display

4.display有哪些值

• block 转换成块状元素。
• inline 转换成⾏内元素。
• none 设置元素不可⻅
• inline-block 象⾏内元素⼀样显示，但其内容象块类型元素⼀样显示。
• list-item 象块类型元素⼀样显示，并添加样式列表标记。
• table 此元素会作为块级表格来显示
• inherit 规定应该从⽗元素继承 display 属性的值

5.⾏内元素float:left后是否变为块级元素

⾏内元素设置成浮动之后变得更加像是 inline-block （⾏内块级元素，设置 成这个属性的元素会同时拥有⾏内和块级的特性，最明显的不同是它的默认宽 度不是 100% ），这时候给⾏内元素设置 padding-top 和 padding-bottom或者 width 、 height 都是有效果的

6.CSS不同选择器的权重

• ！important 规则最重要，⼤于其它规则
• ⾏内样式规则，加 1000
• 对于选择器中给定的各个 ID 属性值，加 100
• 对于选择器中给定的各个类属性、属性选择器或者伪类选择器，加 10
• 对于选择其中给定的各个元素标签选择器，加1
• 如果权值⼀样，则按照样式规则的先后顺序来应⽤，顺序靠后的覆盖靠前的规则

7.水平居中的方法

• 元素为⾏内元素，设置⽗元素 text-align:center
• 如果元素宽度固定，可以设置左右 margin 为 auto ;
• 如果元素为绝对定位，设置⽗元素 position 为 relative ，元素设left:0;right:0;margin:auto;
• 使⽤ flex-box 布局，指定 justify-content属性为center
• display 设置为 tabel-ceil

8.垂直居中的发法

• 将显示⽅式设置为表格， display:table-cell ,同时设置 vertial-align：middle
• 使⽤ flex 布局，设置为 align-item：center
• 绝对定位中设置 bottom:0,top:0 ,并设置 margin:auto
• 绝对定位中固定⾼度时设置 top:50%，margin-top 值为⾼度⼀半的负值
• ⽂本垂直居中设置 line-height 为 height 值

9.闭包

• 闭包就是能够读取其他函数内部变量的函数
• 闭包是指有权访问另⼀个函数作⽤域中变量的函数，创建闭包的最常⻅的⽅式就是在⼀个函数内创建另⼀个函数，通过另⼀个函数访问这个函数的局部变量,利⽤闭包可以突破作⽤ 链域
• 闭包的特性：
  1. 函数内再嵌套函数
  2. 内部函数可以引⽤外层的参数和变量
  3. 参数和变量不会被垃圾回收机制回收

10.作⽤域链的理解

• 作⽤域链的作⽤是保证执⾏环境⾥有权访问的变量和函数是有序的，作⽤域链的变量只能 向上访问，变量访问到 window 对象即被终⽌，作⽤域链向下访问变量是不被允许的
• 简单的说，作⽤域就是变量与函数的可访问范围，即作⽤域控制着变量与函数的可⻅性和 ⽣命周期