面试题准备--CSS

1、css盒模型

基本概念：

1. 标准模型：box-sizing：content-box；
2. IE模型：box-sizing：boder-box；

区别：盒子的宽是否包含padding和border，IE包含，标准不包含

2、BFC见博客http://www.cnblogs.com/Mrcatyang/p/8321977.html

3、浮动的方法：

1. 为父元素添加overflow：hidden；

2. 定义公共类，添加伪元素，浮动元素加上clearfloat就可以了，.clearfloat:after{
       content:".";
       display:block;
       height:0;
       visibility:hidden;
       clear:both;
   }

4、垂直居中的方法

1. parentElement{ position:relative; } ；childElement{ position: absolute; top: 50%; transform: translateY(-50%); }
2. flex 

   parentElement{
       display:flex;/*Flex布局*/
       display: -webkit-flex; /* Safari */
       align-items:center;/*指定垂直居中*/
   }

3. 父元素高度确定的单行文本
   设置 height = line-height
   父元素高度确定的多行文本
   a:插入 table （插入方法和水平居中一样），然后设置 vertical-align:middle
   b:先设置 display:table-cell 再设置 vertical-align:middle

5、CSS3新特性

1. 选择器                                                                                                                                                                                                                                                                                                                              E:last-child 匹配父元素的最后一个子元素E。                              　　                                                                                                                                                                                                                      2）E:nth-child(n)匹配父元素的第n个子元素E。                                                                                                                                                                                                                                                             3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。

2. Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

         

        3.圆角border-radius: 15px;阴影效果（shadow）渐变效果

        4.网格布局，兼容性不好，还不够成熟。还不能用在实际项目中。

        5.弹性布局flex

        6.CSS3制作特效translate（水平移动）、rotate（旋转）、scale（伸缩）、skew（倾斜）、动画

6、常见布局方法

1. float
2. position
3. flex
4. table
5. 网格
6. 双飞燕
7. 圣杯