CSS3新特性

RGBA

RGBA是RGB色彩模型的一个扩展。在本质上看也是为设置的元素增加了一个 alpha 通道，即除了红绿蓝三种颜色外还增加一个代表透明度的通道，其中 RGB 值分别表示红色、绿色、蓝色，而 alpha 取值则为 0 到 1 （小数位一位）。

关系选择器

后代选择器：选择所有被E元素包含的F元素，中间用空格隔开。

E F{}

<ul>
     <li>宝马</li>
     <li>奔驰</li>
</ul> <ol>
     <li>奥迪</li>
</ol>

ul li{
   
    color:green; }

子代选择器：选择所有E元素的直接元素F，对更深一层不起作用。用>表示

E>F{}

<div>
    <a href="#">子元素1</a>
    <p> <a href="#">孙元素</a> </p>
    <a href="#">子元素2</a>
</div>

div>a{
   
    color:red
}

相邻兄弟选择器：选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择。

E+F{}

<h1>h1元素</h1> 
<p>第一个元素</p>
<p>第二个元素</p>

h1+p{
   
    color:red; }

通用兄弟选择器：选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开，只能向下选择。

E~F{}

<h1>h1元素</h1> 
<p>第一个元素</p> 
<p>第二个元素</p>

h1~p{
   
    color:red; }

弹性盒子模型（flex box）

CSS3弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当行为的布局方式。
引入弹性盒子布局的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
弹性盒子内容：
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。

弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了
弹性子元素如何在弹性容器内布局
弹性盒子里内容默认横向摆放

父元素上的属性

1、di