一 复习：

css

基本选择器：

标签选择器：p {}, span {}, div{} ···
类选择器: .类名 { }, 
多类名: <div class="类名1 类名2"> </div>
id 选择器: #id名 {}
通配符： * { margin: 0; padding: 0 }

行内样式

<span style="color:"yellow; font-size: 20px;">文字</span>   先声明style,属性之间冒号属性键值对，结尾要带上;分号，单位px要携带上

复合选择器：

后代选择器： .nav a {}
子元素选择器：.nav > p
并集选择器：.nav .header {}
链接伪类选择器：a:hover {}  其他几个不常用：  a:link未访问   a:visited点击过的   a:active正在按下
focus选择器：input:focus{}

盒模型

块级盒子居中： 
1：盒子必须有设置宽度
2：居中 margin: 0 auto; 就居中了

相邻块级元素垂直外边距合并
举例：如果上面的块级盒子设置了margin-bottom: 30px; 下面的块级盒子设置了margin-top：30px; 此时只有30px而非60px，
解决方式就是给一个块级盒子，给够足够的margin就行了，没必要2个都给同一方向的外边距。

外边距合并--嵌套元素塌陷
举例： 块级盒子嵌套：父盒子嵌套子盒子，父盒子设置了margin-top:100px; 子盒子也设置了margin-top:50px; 
理论上是父盒子距离浏览器100px， 子元素距离嵌套父元素50px， 但实际效果是：父盒子距离浏览器100px 子元素左上角对齐了父元素
奇怪了这就是嵌套元素塌陷。
解决方式就是给父盒子设置 overflow: hidden; 此时才是想要的样式布局：父盒子距离浏览器100px， 子元素距离嵌套父元素50px。

使用通配符 * { }清除内外边距。

盒子阴影+文字阴影：

1:盒子阴影：
box-shadow: 水平 垂直 模糊距离 阴影尺寸  颜色值。 注意：盒子阴影不占用空间，不会影响其他盒子排列

2:文字阴影：
text-shadow:  水平 垂直 模糊距离 阴影尺寸  颜色值

浮动：

标准盒子是垂直上下排列， 加了folat浮动的盒子是从左到右排列的
如果一个盒子浮动了， 那么其他兄弟盒子也应该浮动。访问页面布局问题
浮动的盒子只会影响后面的盒子， 不会影响前面的盒子

清除浮动

为什么清除浮动：
父盒子如果一般不会设置高度，里面有宽高的盒子因为设置了浮动脱标不占位置，所以撑不开父盒子，导致了父盒子下面的兄弟盒子，会跑到父盒子的下面。
解决方式是：预先定义好.clearfix清除浮动，将该类名添加到父盒子上。父盒子就有了自己高度。

清除浮动的3种方式：
1：父级：overflow:hidden;

2：父级：after伪元素：<div class="clearfix"></div>（推荐）
.clearfix:after {content:""; display: block; height: 0; claer: both; visibility:hidden;}
.clearfix { *zoom: 1; } IE 6-7专用

3：父级：双伪元素：
.clearfix:before, .cleaerfix:after {content:""; display:table;}
.clearfix:after {clear:both}
.clearfix {*zoom:1}

定位：

四种定位：
默认是 static静态定位， 
1：相对定位：relative占位置，相对于自身移动
2：绝对定位：absolute不占位置，相对于有定位的父元素。（常见组合， 子绝父相）
3：固定定位：fixed不占位置，相对于浏览器
4：粘性定位：sticky 占有位置，相对于浏览器， 较少用！

绝对定位盒子居中：

加了绝对定位的盒子，不能使用margin: 0 auto实现居中了， 只能通过计算方式居中了
left: 50%;   margin-left:-自身宽度的一半

定位的特殊性：

绝对定位和固定定位他们，和浮动效果类似：
1：如果是行内元素， 加了absolute或者fixed会隐式转换为块级元素， 就可以直接会行内元素设置宽高了。
2：如果本身是块级元素，添加了absolute或fixed，它还是之前的块级元素，如果没有设置宽高，就是内容的默认大小。

float文字围绕效果：

浮动最初的出现就是为了做文字环绕图片的效果：
1：一篇文章中间插入了一张图片，默认图片会像块级元素，独占页面一整行。文章会被图片中间切断，出现巨大空白。
2：为了解决，并实现文字环绕图片，只需要给img {float: left | right}，就会实现文字环绕效果。

隐藏元素：

diaplay: 元素隐藏之后， 不再占有原来的位置。
visibility: visible元素可见， hidden元素隐藏， 元素隐藏之后位置保留。

overflow 溢出：
visble: 超出部分默认是 visble， 会超出父元素，不隐藏也不裁切。
hidden： 超出部分隐藏掉。
scroll：不管内容是否已经超出，总是显示滚动条。
auto： 不超出就不显示滚动条，超出就显示滚动条。

精灵图和字体图标的使用：

1：精灵图：
1：如果多个元素的背景使用了同一张精灵图，就直接给该元素统一声明使用同一张精灵图作为背景。
举例：假设使用精灵图的标签都是span，那就直接给span设置背景图为这张精灵图，在挨个使用类名修改不同坐标实现background代码的简化。
span {backfround: url(images/jinling.png) no-repeat} 统一声明背景图。
.one {background-position: -100px -100px};  .two {background-position: -200px -200px} 一般是负数！

2：字体图标的优势：
1：轻量级，页面字体一但加载出来，图标也会马上渲染出来，减轻了服务器请求。
2：灵活性：本质上是文字，可以随意改变颜色，产生阴影，透明效果，旋转等效果···。
3：兼容性：几乎兼容所有浏览器，放心使用。
注意：字体图标不能代替精灵图，只是对工作中图标部分，使用了字体图标技术的提升和优化的一种方式而已。
区别：页面较小的图标，就用字体图标，页面较小的图片，就使用精灵图。
1：下载：
推荐iconfont下载字体图标，直接将选中的项目下载到本地
2：将解压好的文件放在项目中，并引入<link href="./iconfont/iconfont.css">注意路径问题
3：使用 <i class="iconfont icon-shopcart"></i> 具体使用可以先按照自己流程实现，或者网上 | 官网教程。

css 边框模拟三角形

width: 0;
height: 0;
line-height: 0; //照顾兼容性
font-size: 0;
border: 10px solid transparent; // 先做透明正方形
border-bottom-color: skyblue; //根据自己三角方向设置，设置border-的上下左右颜色值。实现带颜色的三角形。

图片和文字对齐方式：

假设左侧一张图片，右侧是文字，右侧的文字默认靠图片底下基线对齐的（也就是有部分文字会超出底部）
img{
    vertical-align：bottom // 和图片底线对齐
    vertical-align：middle  //和图片垂直居中对齐
    vertical-align: top // 和图片顶线对齐
   }

块级父盒子嵌套图片底线会空白缝隙

一般块级父盒子是不会设置高度的，是由内容撑起来的，但是嵌套子元素图片，默认底线会有空白
解决方式一：设置vertical-align: top | bottom | middle都可以 （推荐）
解决方式二：把图片转换为块级元素： display: block;

文字溢出显示省略号：

1：单行文字溢出显示省略号：
white-space:nowrap； // 一行显示
overflow:hidden; // 隐藏溢出部分
text-overflow: ellipsis; // 显示省略号

多行文字溢出显示省略号：
overflow:hidden; //建议给容器设置上，防止意外bug
-webkit-line-clamp:2; //设置显示文本的行数
text-overflow: ellipsis; // 显示省略号
display: -webkit-box; // 弹性伸缩盒模型显示
-webkit-box-orient: vertical; //子元素的排列方式

三角形的巧妙运用

.box {
	width: 0;
    height:0;
    border-width: 100px 50px 0 0; // 边框宽度
    border-style: solid; 边框样式
    border-color: transparent red transparent transparent; //设置边框颜色
}

css初始化

腾讯QQ官网(http://www.qq.com)样式初始化
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}
 
新浪官网(http://www.sina.com.cn/)样式初始化
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";}
ul,ol{list-style-type:none;}
select,input,img,select{vertical-align:middle;}
a{text-decoration:none;}
a:link{color:#009;}
a:visited{color:#800080;}
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
 
淘宝官网(http://www.taobao.com/)样式初始化
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
 
网易官网(http://www.163.com/)样式初始化
html {overflow-y:scroll;}
body {margin:0; padding:29px00; font:12px"\5B8B\4F53",sans-serif;background:#ffffff;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}
table,td,tr,th{font-size:12px;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}
ol,ul {list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:12px; font-weight:normal;}
address,cite,code,em,th {font-weight:normal; font-style:normal;}

CSS3

新增选择器

属性选择器：
input[type=text] //选择text文本类型的输入框
div[class^=icon]//icon开头的类名   
div[class$=data]//data结尾的类名  
span[class*=nav]//包含nav的类名

结构伪类选择器：
ul li:first-child{}
ul li:last-child{}

nth-child选择器：
ul li:nth-child(event) //偶数
ul li:nth-child(odd)   //奇数
ul li:nth-child(2n)    //偶数
ul li:nth-child(2n+1)  //奇数
ul li:nth-child(5n)    //5 10 15
ul li:nth-child(n+5)   //从第5个开始，包含第5个
ul li:nth-child(-n+5)  //前5个，包含第5个

nth-of-type选择器： 
选择熊大： section div:nth-of-type {} //选中section下面的第一个dv
<section>
	<p>光头强</p>
    <div>熊大</div>
    <div>熊二</div>
</section>

伪元素选择器：
div::before {} // div前面添加伪元素
div::after {} // div后面添加伪元素

过渡+H5

div{ transition: width .5s ease 1s } // transition: 变化的属性， 花费的时间， 运动曲线， 何时开始
div:hover{ width:400px; }// 1秒以后开始在半秒内，匀速完成元素宽度变为400px

2D+3D

2D:
translate 转换：transform: translate(100px, 100px) // 可以改变位置类似定位，不会影响其他元素的位置，(对行内标签没有效果)！！！
translate让盒子水平垂直居中： 
div{
	position: absolute;
    top: 50%;
    left: 50%; // 先走父元素的下上各一半
    width: 200px;
    height: 200px;
    transform: translate(-50%; -50%); // 然后走自身高度的一半
}

rotate 旋转：
img:hover { transform: rotate(360deg) } //鼠标经过图片旋转一圈。

transform-origin旋转中心点：
div{ transform-origin: 50px 50px; } // 设置旋转中心点，可以是方位名词：left 或者 center => 50%，都可以的。
div:hover { transform:rotate(360deg) } // 

scale 缩放：transform:scale(x, y) //默认中心点缩放，不会影响其他元素。
综合写法：transform：translate() rotate() scale() .....// translate位移要放在最前面。

动画：
1：封装动画，设置0%-100%之间的状态：@keyframes move{0%{} 100%{}}//0%起始状态 - 100%结束状态
2：调用动画，设置动画时间：animation-name: move; //动画名称     animation-duration:2s // 持续时间

动画简写：
调用动画的常用属性以及顺序： animation: move 2s linear alternate forwards; // move 2s前2个属性是必写的。
                                  动画名 时间 运动曲线 方向：反方向 结束状态

steps步进：
模拟打字机效果：1秒打出一个字，每个子20px，总宽200px，分10步打印完成 （如：世纪佳缘我在这里等你）
1:定义动画
div {
      overflow: hidden;
      font-size: 20px;
      width: 0;
      height: 30px;
      background-color: pink;
      white-space: bowrap; // 强制一行显示
      animation: w 4s steps(10) forwards; // 动画名称 持续时间 步进 结束状态 => 分10步完成，结束时无限循环打印
    }
@keyframes w { 
 		0% {width:0}
                100% {width: 100%}
             }

3D：
translate3d 3D转换：transform: translate3d(x, y, z) // 如果没有开启透视，和2D差不多

perspective 透视：
body { perspective: 200px } // 透视需要加到被观察的元素上(类似于背景，或者父容器)
transform: translate3d(x, y, z) // Z轴就是物体距离眼睛的距离，Z正值越大，物体越大。

translateZ：视距:
transform: translateZ(xxpx) // z轴越大，物体越大

rotateX Y Z 3D旋转: 
transform: rotate3d(x, y, z, xxdeg) //综合写法

transform-style:
transform-style: preserve-3d // 只有开启了3D效果， 才能有3D效果。

浏览器私有前缀

-moz-  firedox 火狐
-ms- ie
-webkit- safari chrome
-o- Opera欧朋

Flex 伸缩布局

流式|百分比布局

父元素 { width: 100% }
子元素 { width: 50% } // 假设只有2个子元素， 各占父元素的一半。

max-width / max-width

max-width: 最大宽度
min-width: 最小宽度

Flex 弹性伸缩布局

Flex 父常见属性

flex-direction | justify-content | flex-wrap | align-items | align-content | flex-flow

1：主轴方向：flex-direction: row 水平 | column 垂直 列

2：设置主轴上元素的排列方式：justify-content:
flex-start 默认的，从头开始
flex-end 从尾部开始开始
center 主轴上居中， 如果主轴是flex-direction: row ，就是水平居中， 如果是column就是垂直居中
space-around 平分剩余空间
space-between 先贴两边， 再平分剩余空间
实例代码：
div{ diaplay: flex; flex-direction: row; justify-content: space-between } flex布局，子元素水平，然后先贴两边再平分剩余空间

3：flex-wrap 子元素是否换行
nowrap 不换行
wrap  换行

4：align-items 另外一轴子元素排列方式 (让子元素水平垂直居中)
ul { 
	display: flex;
        flex-direction: column;
        justify-content: center; /*垂直上下居中 */
        align-items: center; /*相对于父元素水平居中 */
   }

5：align-content 另一轴子元素的排列方式 (多行) 单行情况下是没有用的
 justify-content: center; /*垂直上下居中 */
 align-content: space-around; 先贴两边， 再平分剩余空间
 
6：复合属性flex-flow
flex-flow: row wrap // 相当于 flex-direction: row + flex-wrap: wrap;

align-content 画图分析 ↓↓↓

Flex 子常见属性

flex：1

常见于双飞翼布局： 两侧固定宽度，中间flex：1，占满剩余空间。 画图分析↓↓↓

align-self 控制子项在另一轴上的排列方式：

order: -1 //向前进一格
align-self: flex-end // 从尾部开始开始,注意它是从第3格子的底部，而不是右下角对齐的。 画图分析↓↓↓

移动端 web开发

媒体查询

rem单位

rem原理：设置html字体大小， rem会 * html字体大小， 得到实际的元素大小。
html {font-size: 14px}
div {width: 10rem; height: 10rem}; // 14 * 10 = 140px ， 页面会有1个140px的盒子

媒体查询

media screen and (max-width: 800px) {body{ background-color: pink }}// 小于等于800
media screen and (max-width: 500px) {body{ background-color: skyblue}}//小于等于500

媒体查询+rem实现元素大小改变

使用媒体查询拿到页面尺寸的变化，根据不同屏幕设置html不同的font-size,页面的盒子大小跟随页面大小改变而发生改变。
@media screen and(min-width: 320px) { html{ font-size: 50px; }} // 大于等于320
@media screen and(min-width: 640px) { html{ font-size: 100px;}} // 大于等于640

使用媒体查询，引入对应的资源

页面大小发生改变，会根据不同大小页面尺寸，引入对应的css样式文件。
<link href="style320.css" media="screen and (min-width: 320px)" />
<link href="style320.css" media="screen and (min-width: 320px)" />

Less

Less是css预处理器，支持定义变量，运算及函数等功能，降低了css维护成本，更少的代码做更多的事情
常见的css预处理器： Sass Less Stylus

1：变量：
@color: deeppink; //定义变量   div { color:@color } // 使用变量

2：嵌套
a{ 
    &:hover {
      color: blue
    }
    &::before {
      color: green; //如果遇见交集|伪类|伪元素选择器需要添加&符号，
    }
  }

3：运算
@border: 5px + 5px;
@baseFont: 20rem;
div{
    width: 200px - 50px;
    height: 100px * 2;
    border: @border solid red;
}
img {
    width: 100rem / @baseFont;
    height: (100rem / 50rem) * 2;
}

4：导入@import "common" // 其实就是导入另外一个common.less文件到这个less文件中。

安装Esay Less插件 实时将less文件编译成css文件。

rem最终适配方案：

方案1： less + 媒体查询 + rem
方案2： flexible.js + rem // （更推荐）
这两种方案现在都存在， 方案2更简单。

rem适配原理：
使用媒体查询查询设备大小动态设置html的字体大小，页面元素使用rem做尺寸单位，当html变化页面元素也会发生变化，达到元素自适应当前设备

rem布局思路：
1：使用媒体查询查询设备的尺寸， 按照设计稿与设备的宽度比例， 动态计算并设置html根标签的font-size大小。
2：写css时应使用cssrem转换出来的实际rem值设置到元素上。

实现思路：
假设设计稿是750px， 750 / 15 = 50（也可以划分为20或者10份）。 320 = 320 / 15 = 21.33
测试： 假设是750px的设计稿，html根标签50px， 那100px的盒子就是： 100期望大小 / 50根字体 = 2rem。此时2rem就是100px。
      假设是320px的设计稿： 根字体21.33 x 2rem 得到的页面元素是：42.66. 如果测试的盒子大小和推算的一致，就表示已经正确设置了rem根字体大小了。
      
计算公式：
1： 页面元素rem值 = 页面元素值(px) / (屏幕宽度 / 划分的份数)
2： html根字体大小 = 屏幕的宽度 / 划分的份数

使用flexible.js+ rem + cssrem完成布局

1:将下载的flexible.js导入到页面中： <script src="js/flexible.js"></script>
2:vscode安装cssrem插件： 设置 cssrem.rootFontSize:75// 因为750 / 10 = 75 （插件默认是16），测试此时1rem就是75px。
3：以上是按照750设置的cssrem根字体大小：如果页面超出了750px就需要使用媒体媒体查询设置html的根字体大小了。
@media screen and(min-width: 750px) { html {font-size: 75px!improtant}}//超出了也按照750的设计稿算
4：设置body元素： 
body {
        min-width: 320px;
        max-width: 750px;
        width: 10rem; // 因为设计稿是750 / 10等份 ，所以页面大小就是750px = 10rem * 75
        margin: 0 auto;
        line-height: 1.5;
        font-family: Arial, Helvetica;
        background: #F2F2F2;
     }
5:开始体验响应式页面布局：之后设计稿的元素都是实际px通过cssrem转换的值，来设置元素大小的。

Bootstrap的使用：

1:在项目中导入下载好的bootstrap文件： <link href="bootstrap/css/bootstrap.min.css">
2:使用bootstrap现有的组件测试， 如果样式想修改，自己在class添加一个类名，注意权重问题，去覆盖原有样式即可。
3：布局容器：.contaner不同屏幕下有不同大小适合做响应式（推荐）  |  conatiner-fluid百分百宽度，适合单独做移动端开发。
注意container是路由手动修改宽度的：
@media screen and (min-width: 1280) { .container { width: 1280px } }//根据设计稿设计容器的大小。
4：栅格系统：栅格系统分为12列
.col-xs-*n 手机 小于750px   .col-sm-*n 平板768-992之间  .col-md-*n 大于等于992笔记本  .col-lg-*n 大于等于1200px桌面显示器
5：列嵌套：12等份：
<div class="container">
  <div class="row>
    <div class="col-md-4">
    	<div class="row> // 必须加上row，这样就可取消父元素的padding值
	    <div class="col-md-6"></div>// 继续自己的列嵌套，可以无限嵌套下去。
            <div class="col-md-6"></div>
        </div>
    </div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
  </div>
</div>
6：列偏移：col-offset-6
7：列排序：col-lg-push-*n 推  |   col-lg-pull-*n 拉， 相当于换位。
8：响应式工具：.hidden-xs 手机端隐藏  .hidden-sm 平板端隐藏  .hidden-md笔记本端隐藏  .hidden-lg桌面显示器中隐藏

移动端总结：

移动端技术选型

流式布局(百分比布局)
flex弹性布局(推荐)
flexible.js+rem+cssrem(推荐)
响应式布局(维护起来麻烦)
总结： 建议：选取一种主要的技术选型， 其他技术作为辅助，混合技术开发(因地制宜，合适的地方用合适的布局。灵活运用各种布局完成设计稿)

二 押题：

1：常见：

css选择器有哪些？有哪些属性可以继承？ ★★★

css选择器：
id选择器(#myid)  类选择器(.myclassName)  标签选择器(div, h1, p)  相邻选择器(h1 + p)  子选择器(ul > li)
后代选择器(li a)  通配符选择器(*)  属性选择器(div[class^=icon])   伪类选择器(a:hover  li:nth-child   li:first-child)

会继承的属性： font-size， font-family, color
不可继承的样式： border  padding  margin  width  height
优先级 (就近原则): !important > [ id > class > tag ]
!important 比内联样式优先级高！

css优先级如何计算 ★★★

元素选择器： 1
class选择器： 10
id选择器： 100
元素标签： 1000
!improtant 优先级最高

如果优先级一样， 则最后出现的会覆盖之前的，就近原则。
继承得到的样式，优先级最低。

三句话：
越具体优先级越高
同样优先级写在后面的覆盖写在前面的
!important 优先级最高，但是要少用

常见的position定位有哪几种 ★★★

static 按正常文档流排列（默认）
relative （相对定位）不脱离文档流
absolute （绝对定位）相对于有定位的父元素
fixed （固定定位）相对于浏览器

清除浮动的3种方式： ★★★

1：父级：overflow:hidden;

2：父级：after伪元素：<div class="clearfix"></div>（推荐）
.clearfix:after {content:""; display: block; height: 0; claer: both; visibility:hidden;}
.clearfix { *zoom: 1; } IE 6-7专用

3：父级：双伪元素：
.clearfix:before, .cleaerfix:after {content:""; display:table;}
.clearfix:after {clear:both}
.clearfix {*zoom:1}

外边距合并 + 嵌套元素塌陷(margin重合问题)

相邻块级元素垂直外边距合并
举例：如果上面的块级盒子设置了margin-bottom: 30px; 下面的块级盒子设置了margin-top：30px; 此时只有30px而非60px，
解决方式就是给一个块级盒子，给够足够的margin就行了，没必要2个都给同一方向的外边距。

外边距合并--嵌套元素塌陷
举例： 块级盒子嵌套：父盒子嵌套子盒子，父盒子设置了margin-top:100px; 子盒子也设置了margin-top:50px; 
理论上是父盒子距离浏览器100px， 子元素距离嵌套父元素50px， 但实际效果是：父盒子距离浏览器100px 子元素左上角对齐了父元素
奇怪了这就是嵌套元素塌陷。
解决方式就是给父盒子设置 overflow: hidden; 此时才是想要的样式布局：父盒子距离浏览器100px， 子元素距离嵌套父元素50px。

使用通配符 * { }清除内外边距。

overflow 溢出：★★

visble: 超出部分默认是 visble， 会超出父元素，不隐藏也不裁切。
hidden： 超出部分隐藏掉。
scroll：不管内容是否已经超出，总是显示滚动条。
auto： 不超出就不显示滚动条，超出就显示滚动条。

link和@import的区别？★★

（1）link属于XHTML标签，而@import是CSS提供的。
（2）页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。
（3）import只在IE 5以上才能识别，而link是XHTML标签，无兼容问题。
（4）link方式的样式权重高于@import的权重。
（5）使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

css3有哪些新特性 ★★★

text-shadow 文字阴影
border-radius 圆角
border-image 边框图片
box-shadow 盒子阴影
gradient 线性渐变
rotate旋转
scale 缩放
translate
2D - 3D ···
@media screen and(min-width | max-width)媒体查询， 当浏览器尺寸发生改变时，会采用不同的属性。

CSS的2种盒子模型 ★★★

 每个HTML元素都是长方形盒子。
（1）盒子模型有两种：IE盒子模型、标准W3C盒子模型；
    IE的content部分包含了border和pading。
（2）标准W3C盒模型包含：内容(content)、填充(padding)、边界(margin)、边框(border)。
content-box 是W3C盒子模型
平时喜欢用border box，因为更好用

块级盒子居中， 浮动盒子居中， 绝对定位盒子居中怎么写 ★★★

1:块级盒子居中： margin: 0 auto;

2:浮动盒子居中: 
width: 100px;
height: 100px;
float left;  
position: absolute; 
left: 50%; 
top: 50%; 
margin: -50px 0 0 50px;

3:绝对定位盒子居中
position: absolute;
width: 100px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0;

BFC ★★★★

block formatting context格式化上下文

BFC 可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素.
通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

触发 BFC：
body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC 特点：
盒子垂直距离由margin 决定，同一个BFC 盒子的外边距会重叠BFC 就是一个隔离的容器，内部子元素不会影响到外部元素。

BFC 的用途：
1：清除浮动:
2：解决外边距合并
3：布局

flex 怎么用，常用属性有哪些 ★★★★

Flex 父常见属性

flex-direction | justify-content | flex-wrap | align-items | align-content | flex-flow

1：主轴方向：flex-direction: row 水平 | column 垂直 列

2：设置主轴上元素的排列方式：justify-content:
flex-start 默认的，从头开始
flex-end 从尾部开始开始
center 主轴上居中， 如果主轴是flex-direction: row ，就是水平居中， 如果是column就是垂直居中
space-around 平分剩余空间
space-between 先贴两边， 再平分剩余空间
实例代码：
div{ diaplay: flex; flex-direction: row; justify-content: space-between } flex布局，子元素水平，然后先贴两边再平分剩余空间

3：flex-wrap 子元素是否换行
nowrap 不换行
wrap  换行

4：align-items 另外一轴子元素排列方式 (让子元素水平垂直居中)
ul { 
	display: flex;
        flex-direction: column;
        justify-content: center; /*垂直上下居中 */
        align-items: center; /*相对于父元素水平居中 */
   }

5：align-content 另一轴子元素的排列方式 (多行) 单行情况下是没有用的
 justify-content: center; /*垂直上下居中 */
 align-content: space-around; 先贴两边， 再平分剩余空间
 
6：复合属性flex-flow
flex-flow: row wrap // 相当于 flex-direction: row + flex-wrap: wrap;

2：不常见

display有哪些值， 分别有什么作用

inline 内联(默认)
none 隐藏元素
block 显示元素
table 表格显示
list-item 项目列表
inline-block 行内块

为什么样初始化css样式

因为浏览器的兼容问题， 不同的浏览器对有些标签的默认值是不同的， 如果没对css初始化往往会出现在浏览器之间的页面差异显示。

display:none 和 visibility:hidden的区别

display:none 隐藏后，位置不再保留
visibility:hidden 隐藏后， 位置保留