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 的区别

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

3.display、float、position的关系

如果 display 取值为 none ,那么 positionfloat 都不起作⽤,这种情况下元素不 产⽣框 否则,如果 position 取值为 absolute 或者 fixed ,框就是绝对定位的, float 的计 算值为 nonedisplay 根据下⾯的表格进⾏调整。 否则,如果 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 ;
  • 如果元素为绝对定位,设置⽗元素 positionrelative ,元素设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-heightheight

9.闭包

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

10.作⽤域链的理解

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

猜你喜欢

转载自blog.csdn.net/qq_44880095/article/details/113619224