CSS

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

• 联系：它们都能让元素不可见

• 区别：

  1.display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见

  2.display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility:hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式

  3.修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘

  4.读屏器不会读取display: none;元素内容；会读取visibility: hidden元素内容

用纯CSS创建一个三角形的原理是什么？

// 把上、左、右三条边隐藏掉（颜色设为 transparent）
#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

谈谈浮动和清除浮动

浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上

请解释一下 CSS3 的 Flexbox（弹性盒布局模型）以及适用场景

怎么让Chrome支持小于12px 的文字？

  .shrink{
    -webkit-transform:scale(0.8);
    -o-transform:scale(1);
    display:inline-block;
  }

抽离样式模块怎么写，说出思路？

CSS可以拆分成2部分：公共CSS 和 业务CSS：

1.网站的配色，字体，交互提取出为公共CSS。这部分CSS命名不应涉及具体的业务
2.对于业务CSS，需要有统一的命名，使用公用的前缀。可以参考面向对象的CSS

清除浮动最佳实践

.clearfix:after{
    content: "\200B";
    display: table; 
    height: 0;
    clear: both;
  }
  .clearfix{
    *zoom: 1;
  }