一. CCS3新增了哪些新特性

1.盒子模型

什么是盒模型？

在我们的HTML页面中，每一个元素都可以被看成一个盒子，而这个盒子由:内容(content)、内边距(padding)、边框(border)、外边距(margin) 四部分组成。对于盒模型，分为标准盒模型和怪异盒模型两种
标准(W3C)盒模型

标准盒模型的范围包括margin、border、padding、content,并且宽高只包含content，不包含其他部分
怪异(IE)盒模型

怪异盒模型的范围包括margin、border、padding、content,和标准盒模型不同的是，怪异盒模型的宽高包含了padding和border。

在css3中，我们可以通过box-sizing属性来修改元素的盒模型

css
       div {
           box-sizing: border-box;  // 怪异盒模型
           box-sizing: content-box;  // 标准盒模型
        }

2.选择器

选择器你知道哪些？

- id选择器(#myid)
- 类选择器(.myclassname)
- 标签选择器(div, h1, p)
- 相邻选择器(h1 + p)
- 子选择器（ul > li）
- 后代选择器（li a）
- 通配符选择器（*）
- 属性选择器（a[rel=”external”]）
- 伪类选择器（a:hover, li:nth-child）

选择器的优先级如何排序
- !important>行内样式>id选择器>类选择器>标签选择器，伪元素选择器>通配符>继承
- 权重算法：(0,0,0,0) ==> 第一个0对应的是important的个数，第二个0对应的是id选择器的个数，第三个0对应的类选择器的个数，第四个0对应的是标签选择器的个数，就是当前选择器的3、比较：先从第一个0开始比较，如果第一个0大，那么说明这个选择器的权重高，如果第一个相同，比较第二个，依次类推。
  - !important：10000
  - 内联： 1000
  - id选择器：100
  - 类、伪类、属性选择器：10
  - 标签、伪元素选择器：1
  - 通用选择器（*）、子选择器（>）、相邻兄弟选择器（+）、通用兄弟选择器（~）权重值为0
那些属性可以继承？ css样式表继承指的是，特定的css属性向下传递到后代元素
- 字体系列属性比如font-size font-weight font-style...
- 文本属性 text-align text-style line-height color ...
- 元素可见性 visibility：控制元素显示隐藏
- 列表布局属性 list-style
- 光标属性 cursor
- 表格布局属性 border-spacing border-collspse
哪些属性不能继承
- display属性
- 盒子模型的属性:宽度、高度、内外边距、边框等
- 背景属性：背景图片、颜色、位置等
- 定位属性：浮动、清除浮动、定位position等
所以我们般可以把一些可继承的css写到body中，后台可直接使用，比如字体，文字大小等。

3.position 定位
absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过left,top,right以及bottom属性进行规定。
fixed：生成固定定位的元素，相对于浏览器窗口进行定位。（老IE不支持）元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative：生成相对定位的元素，相对于其正常位置进行定位，不脱离文档流。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。比如轮播图则采用父相子绝的定位方式
static：默认值。没有定位，元素出现在正常的文档流中（忽略 top, bottom, left, right 或者 z-index 声明）
inherit：规定应该从父元素继承 position 属性的值
sticky: position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上。

4.display

block 此元素将显示为块级元素，此元素前后会带有换行符
none 元素隐藏
inline 此元素会被显示为内联元素，元素前后没有换行符
inline-block 行内块元素
List-item 此元素会作为列表显示。
table 此元素会作为块级表格来显示（类似），表格前后带有换行符
Interit 规定应该从父元素继承 display 属性的值。

5.浮动

在html中，元素是按照它在 HTML 中的出现的先后顺序自上而下依次排列布局的 浮动定位将元素排除在普通流之外，即元素讲脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

为什么要清除浮动
- 浮动导致元素已不在普通流中，所以在排列布局的时候文档中的普通流表现的和浮动元素不存在一样，当浮动元素的高度超出包含框的时候，会出现包含框不会自动撑高来包裹浮动元素，即所谓的“高度塌陷”。

清除浮动的方式

父级设置适合的css高度
父级div定义 overflow:hidden
在父元素的最后加一个冗余元素并为其设置clear:both
采用伪元素，这里我们使用:after。添加一个类clearfix [推荐]

    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        clear:both;
}
.clearfix{
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

CSS3

一. CCS3新增了哪些新特性

1.盒子模型

2.选择器

3.position 定位

4.display

5.浮动