1、display:none; 和visibility:hidden;的区别是什么？

display:none; 彻底消失，释放空间。能引发页面的reflow回流（重排）。

visibility:hidden; 就是隐藏，但是位置没释放，好比opacity:0; 不引发页面回流。

2、CSS 优先级和权重值如何计算

内嵌样式>内部样式>外部样式>导入式

！important > 内嵌 1000 >Id 100 > class=[]=伪类 10 > tag=伪元素 1 > ( * + > ~) 0

3、如何触发BFC，以及BFC的作用

BFC：块级格式化上下文block formatting context，是一个独立渲染区域。规定了内部box如何布局，并且与这个区域外部毫不相干。

触发：float的值不是none；position的值不是static或者relative；display的值是inline-block、block、table-cell、flex、table-caption或者inline-flex；overflow的值不是visible。

作用：避免margin重叠；自适应两栏布局；清除浮动。

4、CSS盒模型

盒模型由：外边距margin、边框border、内边距padding、内容content四个部分组成

标准盒模型大小=border+padding+content

怪异盒模型大小=content

转怪异盒模型：box-sizing:border-box;

转标准盒模型：box-sizing:content-box;

5、如何水平垂直居中一个元素

5.1、弹性盒子

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

5.2、定位

.box{  position: relative;} .box .sub{  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  /*margin-left: 负的宽度的一半*/  /*margin-top: 负的高度的一半*/}

6、css实现一个三角形

.triangle{  width: 0;  height: 0;  border: 100px solid transparent;  border-left-color: red;}

7、如何实现左边固定宽，右边自适应布局

7.1、圣杯布局

      #container {  padding-left: 200px;   padding-right: 150px;}#container .column {  float: left;}#center {  width: 100%;}#left {  width: 200px;   margin-left: -100%;  position: relative;  right: 200px;}#right {  width: 150px;   margin-right: -150px; }

7.2、双飞翼布局

             #container {   width: 100%;  }​.column {  float: left;}    #center {  margin-left: 200px;  margin-right: 150px;}    #left {  width: 200px;   margin-left: -100%;}    #right {  width: 150px;   margin-left: -150px;}

7.3、等高布局（假等高）互补的内外边距

.parent{  overflow: hidden;}.left, .right{  margin-bottom: -10000px;  padding-bottom: 10000px;}

7.4、等高布局（真等高）弹性盒子

.parent{  display: flex;}.child{  flex: 1;}

7.5、calc

        .column{   float: left;  }  #left{   width: 100px;  }  #right{   width: 200px;  }  #center{   width: calc(100% - 100px - 200px);  }

7.6、浮动

        #left{   float: left;   width: 100px;  }  #right{   float: right;   width: 200px;  }  #center{   margin-left: 100px;   margin-right: 200px;  }

8、如何实现6px字体

.font{  font-size: 12px;  transform: scale(.5);}

9、移动端1px边框怎么设置

/* 方法1 */.border{  width: 100%;  height: 1px;  background: red;}/* 方法2 */.border{  border-image: url(border.png)}/* 方法3 */.border{  box-shadow: 0 0 0 1px #000;}

10、px、em、rem、vh、vw分别是什么

px物理像素，绝对单位；em相对于自身字体大小，如果自身没有大小则相对于父级字体大小，如果父级也没有则一层一层向上查找，直到找到html为止，相对单位；rem相对于html的字体大小，相对单位；vh相对于屏幕高度的大小，相对单位；vw相对于屏幕宽度的大小，相对单位。

11、css可继承的属性有哪些

可继承的属性：文本类：text-indent、text-align、line-height、word-spacing、letter-spacing、text-transform、direction、color；

字体类：font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust；

其它类：visibility、caption-side、border-collapse、border-spacing、empty-cells、table-layout、list-style-type、list-style-image、list-style-position、list-style、quotes、cursor、page、page-break-inside、windows、orphans等