关于CSS面试知识点（持续更新ing~）

一. css样式

1. 行内样式

<标签名 style='属性1: 属性值1;属性2: 属性值2;属性3: 属性值3;'>内容</标签名>

2. 内部样式

<style>
  选择器 {
     属性1: 属性值1;
     属性2: 属性值2;
     属性3: 属性值3;
  }
</style>

3. 外部样式

<link href='CSS文件路径' rel='stylesheet'>

权重 ： 行内样式 > 内部样式 > 外部样式

二. css选择器

1. 标签选择器

标签名{属性1:  属性值1;属性2:  属性值2;属性3:  属性值3;}

2. 类选择器

.类名 {属性1:  属性值1;属性2:  属性值2;属性3:  属性值3;}

3. id选择器

/#id名 {属性1:  属性值1;属性2:  属性值2;属性3:  属性值3;}

4. 通配符选择器

*{属性1: 属性值1;属性2: 属性值2;属性3: 属性值3;}

权重：id选择器>类选择器>标签选择器>通配符选择器（*）

三. 盒模型

CSS3中有两种盒模型：标准盒模型 和 怪异盒模型

两种盒模型的区别

标准盒模型下 box-sizing: content-box;
盒子宽度=width + padding + border

怪异盒模型 box-sizing: border-box;
当内边距和边框宽度相加 < 内容width的时候，盒子宽度就是 width 的值 压缩content内容区域
当内边距和边框宽度相加 > 内容width的时候，盒子宽度就是 内边距+边框 content区域就没了

标准盒模型主要用于PC端， 怪异盒模型主要用于手机端。

四. 清除浮动

目的：解决 父级元素 会因为 子级元素 浮动导致高度塌陷的问题。

1.额外标签法

在浮动元素末尾添加一个空的标签例如

<div class='parent'>
  <div class='child'>
  <div style='clear:both'></div>
  </div>
</div>

2. 添加overflow属性

给父级元素添加overflow属性

<style>
   .partent {
       overflow: hidden | auto | scroll ;
 }
</style>

3. 使用after伪元素

<style>
   .partent :after{
       content: ""; display: block; height: 0; clear: both; visibility: hidden;  
   } 
</style>

4. 使用before和after双伪元素清除浮动

<style>
 .partent {
	  zoom:1;
 }
 .partent :after,.partent :before{
     content:"";
     display:table;
 }
 .partent :after{
     clear:both;
     visibility:hidden;
     font-size:0;
     height:0;
 }
</style>

五. css3新增

1. 颜色：新增RGBA、HSLA模式
2. 文字阴影：（text-shadow）
3. 边框：圆角（border-radius） 边框图片（border-image） 边框阴影（box-shadow）
4. 盒子模型：box-sizing
5. 背景：background-size,background-origin background-clip(削弱)
6. 渐变：linear-gradient(线性渐变):
7. 过渡：transition可实现动画
8. 自定义动画： animate@keyfrom
9. 媒体查询：多栏布局@media screen and (width:800px)
10. border-image
11. 2D转换:transform:translate(x,y)平移 rotate(x,y)旋转 skew(x,y)倾斜 scale(x,y)缩放
12. 3D转换
13. 字体图标：Font-Face
14. 弹性布局：flex