CSS3新增特性

新增css选择器，伪类选择器
特效：tex-shadow，box-shadow
线性渐变：gradient
旋转过渡：transform，transition
动画：animation
圆角：border-radius

盒模型

box-sizing：content-box表示标准盒模型：width=content box-sizing：border-box表示IE盒模型：width=content+padding+border

CSS选择器和优先级

id选择器 100
类选择器 10
属性选择器 10
伪类选择器 10
标签选择器 1
伪元素选择器 1
兄弟选择器 0
子选择器 0
后代选择器 0
通配符选择器 0

优先级：

！important
内联样式
ID选择器
类选择器/伪类选择器/属性选择器
标签选择器/伪元素选择器
关系选择器/通配符选择器

CSS可继承属性和不可继承属性可继承：

font-weight
color
font-size
line-height
cursor

不可继承：

margin,padding,border
display
background
overflow
width, height
position

隐藏元素的方式

display: none 元素在文档中不存在，不会占据位置
visibility: hidden 元素在文档中的位置还保留，仍然占据空间
opacity：0 将透明度设置为0
z-index：负值：直接将元素放置在最下层，利用其他元素来遮盖
position：absolute 将元素定位到可视区域以外

单行，多行文本溢出

单行：

overflow: hidden;         // 溢出隐藏
text-overflow: ellipsis;  // 溢出用省略号表示
white-space: nowrap;      // 规定段落中的文本不进行换行

多行

overflow: hidden;
text-overflow: ellipsis;        // 溢出用省略号显示     
display: -webkit-box;           // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical;    // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp: 3;          // 显示的行数

有使用过sass，less吗？他们的区别是什么

他们都是CSS预处理器，是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。增加了CSS代码的复用性，层级，mixin，变量，循环，函数等对编写以及开发UI组件都极为方便。区别在于：

编译环境不同
- sass是在服务端处理的，以前是Ruby，现在是Node-Sass
- less是需要引入less.js来处理less代码输出CSS到浏览器中，也可以在开发服务器将less语法编译成css文件，输出css文件到生产包目录
变量符不一样，less是@，sass是$
sass支持条件语句，可以使用if else for循环等等。而less不支持

link和@import的区别

link是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSS，rel等连接属性等
@import是CSS提供的语法规则，只有导入样式表才会起作用
link标签引入的CSS被同时加载，而@import引入的CSS将在页面被加载完毕后加载
@import是CSS2.1才有的语法，存在兼容性，而link作为HTML标签不存在兼容性问题

px，em，rem的区别

px固定像素单位，不能随其他元素的变化而变化
em是相对父元素的单位，随着父元素变化而变化
rem是相对于根元素html，它会随着html元素变化而变化

两栏布局

利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。将右边的元素的margin-left设置为200px，宽度设置为auto（默认为aotu，撑满整个父元素）

.outer {
    height: 100px
}
.left { 
    float: left; 
    width: 200px; 
    height: 100%;
    background: tomato; 
 } 
 .right { 
     margin-left: 200px; 
     width: auto; 
     height: 100%;
     background: gold; 
 }

利用浮动，左侧元素设置固定大小，并左浮动。，右侧元素设置overflow: hidden；这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧不会发生重叠。

.left{ 
    width: 100px; 
    height: 200px; 
    background: red; 
    float: left; 
} 
.right{ 
    height: 300px; 
    background: blue; 
    overflow: hidden; 
}

利用flex布局，将左边的元素设置为固定宽度200px，将右边的元素设置为flex：1

.outer { 
    display: flex; 
    height: 100px; 
} 
.left { 
    width: 200px; 
    background: tomato; 
} 
.right { 
    flex: 1; 
    background: gold; 
}

利用绝对定位，将父级元素设置为相对定位。左边元素设置为absolute定位，并且宽度设置为200px。将右边元素的margin-left设置为200px。

.outer {
  position: relative;
  height: 100px;
}
.left {
  position: absolute;
  width: 200px;
  height: 100px;
  background: tomato;
}
.right {
  margin-left: 200px;
  background: gold;
}

三栏布局

利用绝对定位，左右两栏设置为绝对定位，中间设置为对应方向大小的margin的值。
利用flex布局，左右两栏设置固定大小，中间一栏设置为flex：1
利用浮动，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式中间一栏必须放到最后
圣杯布局：利用浮动和负边距来实现。父级元素设置左右的padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置margin负值将其移动到上一行，再利用相对定位，定位到两边。
双飞翼布局，双飞翼布局相对圣杯布局来说，左右位置的保留是通过中间列的margin值来实现的，而不是通过父元素的padding来实现的。本质上来讲，也是通过浮动和外边距负值来实现的。

水平垂直居中

绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。

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

利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况：

.parent {
    position: relative;
}
 
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;     /* 自身 height 的一半 */
    margin-left: -50px;    /* 自身 width 的一半 */
}

使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。该方法要考虑兼容的问题，该方法在移动端用的较多：

flex布局的理解

flex布局是css3新增的布局方式，它能够根据不同的屏幕尺寸的变化来自适应大小。常用的属性：

flex-direction属性决定主轴的方向
flex-wrap属性定义，如果一条轴线排不下，如何换行
flex-flow属性是flex-direction和flex-wrap属性的简写形式，默认值为row nowrap
justify-content属性定义了项目在主轴上的对齐方式
align-items属性定义项目在交叉轴上如何对齐
align-content属性定义了很多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

flex：1表示什么

flex: 1是flex-grow、flex-shrink、flex-basis的缩写，默认值是0 1 auto。flex：1也表示flex： 1 1 auto。

flex-grow定义项目放大比例，默认为0，即存在剩余空间，也不放大。
flex-shrink定义项目收缩比例，默认为1，即空间不足，也会进行缩小。
flex-basis定义项目给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小。

BFC的理解

BFC是块级格式上下文，是CSS布局的一个概念，在BFC布局里面的元素不受外面元素的影响。

创建BFC的条件

设置浮动：float有值不为空
设置绝对定位：position(absolute,fixed)
overflow值为：hidden，auto，scroll
display值为：inline-block，table-cell，table-caption，flex等

BFC的作用

解决了margin重叠问题
解决高度塌陷问题
创建自适应两栏布局