十天精通css知识点（个人笔记）

1：

border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */

这个可以做实心圆，长宽一样，圆角半径为长宽一般

2:

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

如果添加多个阴影，只需用逗号隔开即可。

3:

rgba(R,G,B,A)

rgba是一种颜色标准，（和其他一般颜色用法一致），四个参数范围 红色255 绿色255 蓝色255 透明度1

4：

background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

第一个参数省略时，默认为“180deg”，等同于“to bottom”。

第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。

5:

text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 

text-overflow:表示文字越界的操作，这三个一起可以实现文字多出时用省略号表示

6:

@font-face {    font-family : 字体名称;    src : 字体文件在服务器上的相对或绝对路径;}

这样就可以在font-family中使用这个字体名称对应的字体了

7:

text-shadow: X-Offset Y-Offset blur color;

这样可以用来设置文字阴影

8：

background-origin ： border-box | padding-box | content-box;

参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。

需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。

http://write.blog.csdn.net/postedit/78314763

9：

background-clip ： border-box | padding-box | content-box | no-clip

参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。

10:

background-size:cover表示让图片以缩放的方式填满容器

11:

background: #00FF00 url(bgimage.gif) no-repeat fixed top;

background的基础属性和默认顺序

12:

css属性选择器

a[href^="a"] a标签中href中以a打头的被选中
a[class$="a"] a标签中class以a结尾的被选中
a[href*="a"] a标签中href中存在a的被选中
(前面的可以是元素，类和id)

13:

css根选择器

:root{background:orange}

html {background:orange;} 就是选中根目录，就是html


14:

css伪类选择器-not

div:not([id="footer"]){}  表示div标签中id不为footer的所有元素都被选中

15：

css伪类选择器-empty

div:empty{}  表示中间没有任何内容的div被选中（<div></div>） 连空格注释都不能有

16：

css伪类选择器-target

#brand:target {  background: orange;  color: #fff;}

<h2><a href="#brand">Brand</a></h2><div class="menuSection" id="brand">  content for Brand</div>

这里指的是这个a标签，在被点击后，它指向的div会获得的样式（注意这三个红色的字体要一样）

17：

css伪类选择器-first-child

li:first-child {
 color: red;
}

1:是个li标签，2：这个标签是它父类的第一个子元素 满足这两点的被选中

ul>li:first-child{} ,表示父类必须是ul

18:

css伪类选择器：last-child

同上，只不过指的是最后一个元素

19:

css伪类选择器：nth-child(){}

括号中可以是1,2,3（从1开始，0不存在），n,2n或者odd，even

如 ul>li:nth-child(2n+1){}

20:

css伪类选择器：nth-last-child()

和19类似，只不过元素的顺序是从下向上开始算的（括号中选1则是选中最后一个元素）

21：

css伪类选择器：first-of-type

和first-child类似，只不过不需要是父类的第一个元素，只需要是父类中 该种类型标签的第一个就可以

22:

css伪类选择器：nth-of-type()

和nth-child类似，但是是从每种类型中选择 不是从所有子类中选择

23：

css伪类选择器：last-of-type

同上

24：

css伪类选择器：nth-last-of-type

同上

25：

css伪类选择器：only-child()

父元素中有且只有一个子元素，则这个子元素被选中

26:

css选择器:enable

选中表单中能用的元素

input[type="text"]:enabled  (冒号之前不能有空格) 

这个选中input中所有文本输入框中能用的（disable="true'）

27:

css选择器：disabled

和上面的enable作用相反，选中其中被禁止的元素

28:

css选择器：checked

改变表单中单选和复选框选中后的样式

29：

css选择器：selection   (这个前面有两个冒号)

可以改变文字被选取时的样式（浏览器一般默认为蓝底白字）

::selection{}   火狐一般用::-moz-selection{}

30:

css选择器：read-only

选中那些只读的元素（“readonly=’readonly）

31：

css选择器：read-write

和read-only相反，只选中那些处于非只读状态的元素

32:

css选择器：before,after

:before 选择器向选定的元素前插入内容。使用content 属性来指定要插入的内容。(在查看元素中显示 ::before,::after)

例如

p:before
{
content:"Read this: ";
}

33:

rotate属性，其中为正值则顺势正旋转，其中为负数则逆时针选装

transform: rotate(45deg);

这样就是顺势正旋转四十五度

34:

skew属性，表示为扭曲，transform:skew(x,y)，

分别表示对x轴y轴的扭曲值

35:

scale属性，表示为放大缩小 transform: scale(0.5,1.5);

表示x轴方向变为原来的0.5倍，y轴方向变为原来的1.5倍

36:

translate属性，表示元素移动

transform: translate(50px,100px);

表示向左平移50px，向下平移100px

37:

matrix属性，是以上集中方法的集合

matrix(scaleX(),skewX(),skewY(),scaleY(),translateX(),translateY());

用法如上，（这些值好像都不带单位）

38:

transfrom-origin属性，可以将元素的中心点进行偏移

transform-origin: left top;

这样可以将中心便宜点转移到左上角（用于rotate或者skew）

39:

transition属性，可以设置过度效果

-webkit-transition:all 0.5s ease-in 1s;

这四个属性分别表示 添加过度效果的属性 过度时间 效果 延迟时间（transition-property transition-duration transition-timing-function transition-delay）

40:

transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：

ease ease-in linear ease-out ease-in-out 表示过度速度

41:

keyframes关键正属性 和视频中的关键字差不多

@keyframes 名字{0%{}  20%{} 100%{}}  表示每个关键时刻的样式

然后将这个名字放在animation中的animation-name属性中 就可以使用了

42:

animation包括一下几个属性

animation-name（指上面声明出的名字） animation-duration(持续时间) animation-timing-function(同上） animation-delay(同上) animation-iteration-count（播放次数 可以填数值（int）或者infinite(无限)）  animation-direction(normal（每次循环的时候从头开始播放）,alternate(偶数次正常播放，奇数次反向播放))

animate-play-state(running(正常播放),paused(暂停))

43：前缀兼容：

-moz-对应 Firefox,
-webkit-对应 Safari and Chrome
-o- for Opera
-ms- for Internet Explorer

44:css中columns属性

columns: 200px 2;  表示元素中的文字分为两列，没列宽度为200px

也可以将其两个参数分开来写为 column-width；200px(auto); column-count:2(auto);

其他的相关属性还有column-gap(列与列的间距)

column-rule:width style color (相当于column的边框的样式)

column-span(设置column中的跨列属性)

45：css中的box-sizing属性

CSS2中，元素(例如div)的内边距(padding)和边框(border)会把元素自身撑大。想要个100*100px的div，都要事先计算，例如，内容80px + 内边距15px + 边框5px = 100px

CSS3中，新增 box-sizing 属性，如果设置元素为 box-sizing: border-box，那么元素的内边距(padding)和边框(border)不会再把元素自身撑大。例如，设置div为100*100px，那么无论div里内容、内边距、边框的宽高怎么变化，div的大小永远都是100*100px。

box-sizing:content-box;表示使用会填充的盒子样式