新增的语义化标签
<header>:头部标签 <nav>:导航标签 <article>:内容标签
<section>:定义文档某个区域 <aside>:侧边栏标签 <footer>:尾部标签
一 手机端如何做适配的 lib-flexible
移动端：采用淘宝无限适配方案 flexible.js + 布局单位采用rem
在页面变化时,检测页面宽度,除以10份,动态的赋值给font-size 属性;
rem是相对于<html>标签的font-size,所以就可以适配所有的移动端设备了
(http://caibaojian.com/t/flexible-js "View all posts in flexible.js"),
使用 lib-flexible
动态设置 REM 基准值（html 标签的字体大小） 然后在 `main.js` 中加载执行该模块
rem和em vh vm区别：
rem和em都是相对单位，主要参考的标签不同：
rem是相对于<html>标签的font-size，浏览器默认字号是font-size:16px
em:是相对于父级的字号，和百分比%类似，%也是相对于父级的，只不过是%相对于父级宽度的
vh 和 vm 分别是相对于浏览器可视区域的高和宽
一 （补充）响应式 采用媒体查询
使用媒体查询（响应式)
@media （max-width：500）{ // 在屏幕宽度小于500px才会生效
body{
background:green;
}
}
@media (min-width:300px) and (max-width:500px){ // 在屏幕宽度300px到500px才会生效
body{
background:green;
}
}
一 （补充） 行内元素：
input、img、select、span、strong、a、b
em、i、s、mark、small、big
dfn、abbr、cite、q
br、wbr、sup、sub、ins、del
ruby、rt、rp
code、kbd、samp、tt、var
u、nobr、label
一 （补充）块级元素：
div、footer、header、section、option、p、h1...h6.form ul li、ol dl、dd、dt.form；h、hr、pre、html、body
blockquote、address、 fieldset、legend optgroup、
空元素：br、hr...
任何标签设置了position:absolute或float:left/right后会自动转换为行级块标签。
元素之间的转换问题：
display: inline; 把某元素转换成了行内元素 ===>不独占一行的，并且不能设置宽高
display: inline-block; 把某元素转换成了行内块元素 ===>不独占一行的，可以设置宽高
display: block; 把某元素转换成了块元素 ===>独占一行，并且可以设置宽高
对于行内元素和块级元素，其特点如下：
1）行内元素
设置宽高无效；
可以设置水平方向的 margin 和 padding 属性，不能设置垂直方向的
padding 和 margin；
不会自动换行；
2）块级元素
可以设置宽高；
设置 margin 和 padding 都有效；
可以自动换行；
多个块状，默认排列从上到下
二 如何水平居中？
方式一： display: flex;
<div class='container'>
<div class='main'>main</div>
</div>
.container{
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
border:5px solid #ccc;
}
.main{
background: red;
}
方式二：position定位
<div class='container'>
<div class='main'>main</div>
</div>
.container{
position: relative;
width: 300px;
height: 300px;
border:5px solid #ccc;
}
.main{
position: absolute;
left:50%;
top:50%;
background: red;
transform: translate(-50%,-50%);
}
二 （补充） 多行文字垂直居中
<ul>
<li class="item"><span class="text">多行文字多行文字</span></li>
</ul>
父元素
.item{
display: table;
}
子元素
.item .text{
display: table-cell;
vertical-align: middle;
}
三 如何写一个三角形？上下左右这些都要会
下三角形：
width: 0;
height: 0;
border: 480px solid;
border-color: transparent transparent blue transparent; // transparent 透明
三 （左中右局部 补充） 双飞翼布局
3个div都要设置 float：left
中间在最前面
左边：margin-left：负100%
右边：margin-left:负值为：自身的宽度
四 介绍一下flex布局都有哪些属性？
以下6个属性设置在父容器上：
flex-direction属性决定主轴的方向（即项目的排列方向）row | row-reverse | column | column-reverse;
`flex-wrap`属性定义，如果一条轴线排不下，如何换行。nowrap | wrap | wrap-reverse;
`justify-content`属性定义了项目在主轴上的对齐方式 flex-start | flex-end | center | space-between | space-around;
`align-items`属性定义项目在交叉轴上如何对齐。align-items: flex-start | flex-end | center | baseline | stretch;
`flex-flow`属性是`flex-direction`属性和`flex-wrap`属性的简写形式，默认值为`row nowrap`。<flex-direction> || <flex-wrap>;
`align-content`属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
以下6个属性设置在子容器上
order flex-grow flex-shrink flex-basis flex align-self
`order`属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
`flex-grow`属性定义项目的放大比例，默认为`0`，即如果存在剩余空间，也不放大。
`flex-shrink`属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
`flex-basis`属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为`auto`，即项目的本来大小。
`flex`属性是`flex-grow`, `flex-shrink` 和 `flex-basis`的简写，默认值为`0 1 auto`。后两个属性可选。
`align-self`属性允许单个项目有与其他项目不一样的对齐方式，可覆盖`align-items`属性。默认值为`auto`，表示继承父元素的`align-items`属性，如果没有父元素，则等同于`stretch`。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
四（补充）flex布局 最后一行左对齐：设置伪元素的方式
list：after{
content：'';
width:200px;
height:0px; // 或者直接不设置height
}
五 （补充）absolute 和 relative定位
relative 不脱离文档流 、absolute脱离文档流
absolute 定位：是相对于最近的一层 父级定位元素定位
relative 定位：相对于自身定位
六 你平时都是怎么写css的？用过css预处理器吗？
答：一般咱们说我平时写css用less，可以定义变量，嵌套，混入等功能，
sass语法和less类似都是css预处理器，方便开发人员写快速高效写css
七 c3写一个无限旋转动画
1.body写一个<div class="turn"></div>
2.css设置 animation
turn : 定义的动画名称
1s : 动画时间
linear : 动画以何种运行轨迹完成一个周期
infinite :规定动画应该无限次播放
<style>
.turn {
width: 100px;
height: 100px;
background: aqua;
animation: turn 1s linear infinite;
margin: 100px auto;
}
@keyframes turn {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
八 合模型 标准合子模型 和 ie合子模型
CSS的盒子模型有哪些：标准盒子模型、IE盒子模型
CSS的盒子模型区别：
标准盒子模型：margin、content border、padding、
IE盒子模型 ：margin、 content（border + padding）
通过CSS如何转换盒子模型：
box-sizing: content-box; /*标准盒子模型*/
box-sizing: border-box; /*IE盒子模型*/
九 null 和 underfinder区别：
具体区别：
null是一个表示"无"的对象（空对象指针），转为数值时为0；
undefined是一个表示"无"的原始值，转为数值时为NaN。
null == undefined 返回true 都表示 一个无效的值，所以他们是相等的
十 == 和 === 的区别
== : 比较的是值
string == number || boolean || number ....都会隐式转换
通过valueOf转换（valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。）
===: 除了比较值，还比较类型
十一 选择器的优先级：
优先级比较：!important > 内联样式 > id > class > 标签 > 通配
十二 选择器有哪些？
CSS选择符：
通配（*）
id选择器（#）
类选择器（.）
**类选择器、属性选择器和伪类选择器** 具有相同的权重
标签选择器（div、p、h1...）
相邻选择器(+)
后代选择器(ul li)
子元素选择器（ > ）
属性选择器(a[href])
CSS属性哪些可以继承：
文字系列：font-size、color、line-height、text-align...
不可继承属性：border、padding、margin...
十三 清除浮动方式
一： 利用clear属性清除浮动
1. 清除浮动的方式：**添加新的元素对其应用 clear:both**
//对添加的元素使用 clear:both
.clear{clear:both;}
<div class="box">
<div class="red" style="float:left;">1</div>
<div class="sienna" style="float:left;">2</div>
<div class="blue" style="float:left;">3</div>
//添加一个新元素
<div class="clear"></div>
</div>
2. 清除浮动 使用伪元素
.clearfix:after{
content:""; /*设置内容为空*/
height:0; /*高度为0*/
line-height:0; /*行高为0*/
display:block; /*将文本转为块级元素*/
visibility:hidden; /*将元素隐藏*/
clear:both; /*清除浮动*/
}
.clearfix{
zoom:1; /*为了兼容IE*/
}
二： 利用bfc原理包容浮动
BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
1. 了解BFC ： 块级格式化上下文。
2. BFC的原则：如果一个元素具有BFC，那么内部元素再怎么弄，都不会影响到外面的元素。
3. 在父元素上何触发BFC：
float的值非none
overflow的值非visible
display的值为：inline-block、table-cell...
position的值为:absoute、fixed
1.**父级div定义overflow:hidden** 浏览器会自动检查浮动区域的高度
.over-flow{ overflow:hidden; zoom: 1;}/*zoom1; 是在处理兼容性问题*/
<div class="box over-flow">
<div class="red">1</div>
<div class="sienna">2</div>
<div class="blue">3</div>
</div>
2、父级div定义overflow:auto** 浏览器会自动检查浮动区域的高度
.over-flow{ overflow:auto; zoom: 1;}/*zoom1; 是在处理兼容性问题*/
<div class="box over-flow">
<div class="red">1</div>
<div class="sienna">2</div>
<div class="blue">3</div>
</div>
十三 （补充）float 和 absolute 区别：
float 只是脱离了文档流的dom空间但是还占据着文字空间
absolut 是绝对脱离，不会对其他的元素产生任何影响
比如有2个div合子，分别设置背景色和内容，在第一个合子上设置 float属性，可以看到，背景色脱离文档流，但是文字还是占据着空间的，没有往上顶。
设置 absolut 属性，就是文字和颜色都完全脱离文档流
十四 line-height继承的坑
当父元素的 line-height值为：具体的值10px 或者 1.5 ,子元素都是直接继承的
（坑在这）：子元素继承父元素line-htight 为 百分比的时候，是先用百分比乘以父元素的font-size 得出的结果才是 子元素的line-henght的值
十五 margin合并
A和B两个div分别都有 margin-top 10px 和margin-bottom 50px
A 和 B 之间的距离是 50px 而不是60px
十六 margin 负值
margin-top：负值 元素向上拖拽
margin-left：负值 元素向左拖拽
margin-bottom：负值 元素本身不动 下边元素上移
margin-right：负值 元素本身不动 右边元素左移
