css3笔记

发表于 | 分类于 | | 阅读次数 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
css3
1、transition 支持到ie10以上  
前缀 -webkit-transition  -moz-transition  -o-transition
js：WebkitTransition  OTransition  MozTransition

2、属性选择器
p[miaov=leo]{}
p[miaov~=old]{}
p[miaov^=g] 以哪个字母开头
p[miaov$=m] 以哪个字母结束  有大小写区分
p[miaov*=d] 包含某个字母

IE7以上支持

3、结构性伪类
p:nth-child(1){} 表示p标签父级下的第一个元素  从1开始计数  并且这个元素还是p标签
body *:nth-child(2)表示body下面的第几个标签；
body *:nth-last-child(2)从后往前数
p:nth-child(odd){}隔行变色/even
p:nth-child(2n/2n-1/3n)
p:nth-of-type(2){}  找到p元素父级下的第二个p元素

:first-child==:nth-child(1)
:last-child==:nth-last-child(1)
:first-of-type==:nth-of-type()

4.伪类和伪元素
div:target{}  target 表示当前的URL片段的元素类型 ，这个元素必须是冒号前面的元素；

input:enabled/disabled{}编辑或者不可编辑状态
input:checked{}

p~h1{}表示毗邻p标签后面的h1元素
p:first-line{} p元素的第一行文字
p:first-letter{}p元素的第一个字
p:not(.class) 排除元素


5、文本新增属性
rgba() 
文字阴影叠加  text-shadow:5px -10px 1px red,5px -10px 1px red;

文字描边  谷歌支持  -webkit-text-stoke{}
文字超出显示省略号：p{不换行：white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;
}

6、自定义字体
1.把要定义的字体转成兼容代码格式：
网址为：http://www.fontsquirrel.com/fontface/generator

7.弹性盒模型：
父级元素添加：display:box/display:inline-box;
定义盒模型的布局方向，一般不常用，默认水平
box-orient:horizontal 水平
box-orient:vertical 垂直

元素排列方向：
box-direction:reverse 反向
box-direction:norma 正常

元素排列的顺序：
给子元素添加：div:nth-of-type(1){box-oridinal-group:2}

弹性空间管理：
给子元素添加：box-flex:1/box-flex:2

多余空间管理：box-pack :对盒子富裕空间进行管理
给父级添加：box-pack;
box-pack:end/start/center/justify    针对水平方向

对于垂直方向：box-align:start 所有子元素居顶！
                       box-align:end 所有子元素据地
                       box-align:center  所有子元素居中

css3新增属性：
box-show:0px 0px 30px（模糊程度） 30px(扩展半径) #000；
给图片添加倒影：
box-reflect:below/left/right/above
right  10px(可选参数)

渐变：background:linear-gradient:left/right ,(red 0,blue 100%)

拖拽盒子：resize:both;overflow:auto;

怪异盒模型：box-sizing:content-box 正常模式
                                   ：border-box  怪异模式

css3分栏布局：
只有webkit支持
column-width:250px  栏目宽度

column-count:栏目数量

column-gap:10px  栏目间隔

column-rule:1px solid #000;栏目间隔线


8.transition 过度效果