css3下

1.css3新增选择器

1).属性选择器

[attr=value]:attr属性等于value元素(css2)

[attr^=value]:attr属性以value开头的元素

[attr$=value]:attr属性以value结尾的元素

[attr*=value]:attr属性包含value的元素

2).结构伪类选择器

selector：nth-child(n):属于父元素第n个子元素的selector

selector：nth-of-type(n):属于父元素中第n个类型标签

注意：可以使用2n代表偶数  2n+1代表奇数

3).状态伪类选择器

el：focus：获取焦点的表单元素

el：checked：被选中的元素（单选复选框）

el：enabled：选中所有启用的表单元素（未设置disabled的元素）

el：enabled：选中所有未启用的表单元素（设置disabled的元素）

el：not（selector）：除了selector选择器的元素

2.弹性盒子

1）.实现弹性布局的前提：父元素设置display:flex

2).flex-direction:确定主轴方向

row（默认）：主轴为水平方向，起点在左端

row-reverse：主轴为水平方向，起点在右端

column：主轴为垂直方向，起点在上边

column-reverse：主轴方向为垂直方向，起点在下边

3).flex-wrap:是否换行

nowrap（默认）：不换行

wrap：换行，第一行在上方

warp-reverse：换行，第一行在下方

4).justify-content:主轴对齐方式

flex-start(默认值)：轴起点对齐

flex-end:轴中点对齐

center：居中

space-between:两端对齐，项目之间间隔都相等

space-around:每个元素两侧的间隔相等

5).align-items:交叉轴对齐方式

flex-start：轴起点对齐

flex-end:轴中点对齐

center：居中

baseline：项目的第一行文字的基线对齐

6).align-content:调整换行对齐方式

7).flex和flex-grow:分配剩余空间或者设置子元素的比例