前端面试——css篇

css篇

1. link 和 @import的区别

本质上，这两种方式都是为了加载css文件，但还是存在细微的差别

• link属于XHTML标签，而@import 完全是css 提供的一种方式。link标签除了加载css外，还可以做很多其他的事情，比如定义RSS，定义rel连接属性等，@import只能加载CSS
• 加载顺序的差别。当一个页面被加载的时候, link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再加载。
• 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题，完全兼容
• 使用DOM控制样式时的差别。当使用JavaScript控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的。

2. 盒模型

2.1 什么是盒模型

• 页面就是由一个个盒模型堆砌起来的，每个HTML元素都可以叫做盒模型
• 盒模型由外而内包括：外边距(margin)、边框(border)、内边距(padding)、内容(content)
• 盒模型有标准盒模型和IE的盒模型， 二者区别就是：标准盒模型的宽高是content的大小，而IE的则是 content+padding+border

2.2 如何设置两种盒模型

• box-sizing:content-box(W3C标准盒模型)
• box-sizing:border-box(IE盒模型)

2.3 JS怎么获取和设置box的宽高

• dom.style.width/height： 只能取出内联样式的宽度和高度

• dom.currentStyle.width/height：获取即时的计算的样式，但是只有IE支持

• window.getComputedStyle(dom).width：获取即时计算的样式，支持其他浏览器，兼容性更好

• dom.getBoundingClientRect( ).width/height：计算盒模型在页面中的绝对位置，比较少用。

• dom.offsetWidth/offectHeight ：返回元素实际大小

2.4 什么是边距重叠？什么情况下会发生边距重叠？如何解决边距重叠？

• 边距重叠：垂直方向上相邻的2个margin(margin-top、margin-bottom)有可能合并为1个margin,这种现象叫做collapse(折叠) 以绝对值大的那个为最终结果显示在页面上

2.5 BFC的基本概念

BFC(块级格式化上下文)，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。通俗的讲，就是一个特殊的块，内部有自己的布局方式，不受外边元素的影响

• BFC如何产生：

  overflow：auto/hidden

  position:absolute/fixed

  float:left/right

  display:inline-block/table-cell/table-caption/flex/inline-flex

3. display:none, visibility:hidden 和 opcatity:0 三者区别

空间占据

• display:none 不会占据额外空间，会产生回流和重绘
• visibility: hidden和opacity:0 会占据空间，只会产生重绘
• visibility:hidden 不会影响列表的计数

继承方面

• display:none 不会被子元素继承，元素设置该属性后，自身连同其子元素都会隐藏，即使在子元素设置display:block, 子元素也不会显示
• visibility:hidden 会被子元素继承，可以通过设置子元素的visibility:visible 属性使子元素重新显示
• opacity:0 会被子元素继承，不能通过设置子元素的opacity:1 使其显示

事件绑定

• display:none 和 visibility:hidden 元素上绑定的事件无法触发
• opacity:0 元素上绑定的事件可以触发

过渡动画

• transition对display:none 和 visibility:hidden 无效
• transition 对opacity:0 有效

4. BFC 相关

BFC 定义

BFC(Block formatting context) 直译为"块级格式化上下文"。 它是一个独立的渲染区域，元素的布局不受外界的影响

BFC的布局规则

• 内部的Box会在垂直方向，一个接一个地放置
• box垂直方向的距离由margin决定。属于同一个BFC 的两个相邻box的margin会发生重叠
• 每个盒子的margin box的左边，与包含块border box 的左边相接触
• BFC的区域不会与float box 重叠
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此
• 计算BFC的高度时，浮动元素也参与计算

如何创建BFC

• overflow：auto/hidden
• position:absolute/fixed
• float:left/right
• display:inline-block/table-cell/table-caption/flex/inline-flex

BFC的作用

• 利用BFC避免margin重叠
• 自适应两栏布局
• 清除浮动

5. 清除浮动

方法一：给浮动的元素的祖先元素加上高度

网页制作中，因为高度可以被被内容撑起来，所以高度height很少出现

方法二：clear：both

该方法有一个非常大的，并且致命的问题：margin 失效了

方法三：隔墙法

又称额外标签法，也就是在浮动元素末尾添加一个空的标签，添加clear：both 样式。新添加的元素必须时块级元素，由于添加了无意义的标签，结构化较差，因此不推荐使用

方法四：给父级添加 overflow属性

可以给父级元素添加overflow属性，将其属性值设置为hidden、auto、或 scroll

• 优点：代码简洁
• 缺点：无法显示溢出的部分

方法五：给父级添加 :after 伪元素

:after 方式是额外标签法的升级

.clearfix:after {
    
    
	content: "";
	display:block;
	clear:both;
	height:0;/*兼容旧浏览器*/
	visibility:hidden;/*兼容旧浏览器*/
}
.clearfix {
    
    
	*zoom:1;/*兼容IE6~7浏览器*/
}

6. 选择器优先级

• 内连样式 优先级 1000

• id 选择器 优先级 100

• 类选择器 优先级 10

• 元素选择器 优先级 1

• 统配选择器 优先级 0

• 继承的样式优先级没有

7. 水平垂直居中

居中元素 定宽高

• absolute + 负margin

  .father {
        
        
      position:relative;
  }
  .son {
        
        
      position:absolute;
      top:50%;
      left:50%;
      margin-left:-50%;
      margin-top: -50%;
  }
  

• absolute + margin auto

  .father {
        
        
      position:relative;
  }
  .son {
        
        
      position: absolute;
      top:0;
      left:0;
      bottom: 0;
      margin:auto;
  }
  

• absolute + calc

  .father {
        
        
      position:relative;
  }
  .son {
        
        
      position:absolute;
      top: calc(50%-son盒子高度的一半);
      left: calc(50%-son盒子宽度的一半);
  }
  

居中元素不定宽高

• absolute + transform(这种方法兼容性依赖translate2d的兼容性)

  .father {
        
        
      position:relative;
  }
  .son {
        
        
      position:absolute;
      top: 50%;
      left:50%;
      transform: translate(-50%, -50%)
  }
  

• line-height

  .father {
        
        
      line-height: 300px;// 与其高度一致
      text-align: center;
      font-size: 0px;
  }
  .son {
        
        
      display: inline-block;
      vertical-align: middle;
      line-height: initial;
      text-align: left; /* 修正文字 */
  }
  

• css-table

  .father {
        
        
      display: table-cell;
      text-align: center;
      vertical-align: middle;
  }
  .son {
        
        
      display: inline-block;
  }
  

• flex

  .son {
        
        
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  

8. css做圆形，三角形

• 圆形

  .box {
        
        
      width:5px;
      height:5px;
      background-color:blue;
      border-radius:50%
  }
  

• 三角形

  .box {
        
        
      width:0;
      height:0;
      border-width:10px;
      border-style:solid;
      border-color: #ccc transparent transparent transparent
  }
  

9. px, em, rem

• px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
• em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
• rem是CSS3新增的一个相对单位（root em，根em），这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

10. 回流和重绘

html 加载时发生了什么

• 在页面加载时，浏览器把获取到的HTML代码解析成1个DOM树，DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。
• 浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体 DOM Tree 和样式结构体组合后构建render tree
• render tree类似于DOM tree，但区别很大，因为render tree能识别样式，render tree中每个NODE都有自己的style，而且render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到 render tree中。简单理解就是DOM Tree和CSS结合在一起之后，渲染出了render tree。

什么是回流

• 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。
• 每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。
• 在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。

什么是重绘

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

区别：

• 回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流
• 当页面布局和几何属性改变时就需要回流
  比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变