前端知识点总结（三）

---

CSS篇

---

1.CSS选择器有哪些？

ID选择器，类选择器，标签选择器，后代选择器，子选择器，通配符选择器，相邻选择器，属性选择器，伪类选择器

---

2.CSS优先级高低

!important>内联样式>内部样式>外部样式
ID选择器>类选择器>标签选择器
同级，按照就近原则执行，下>上

---

3.如何居中一个div元素，如何居中一个浮动元素？

div{margin:0 auto;}

element{margin:-10px;top:50%;left:50%;position:absolute;}

---

4.CSS3的新特性
CSS边框：border-radius，box-shadow，border-image
CSS3 圆角：div{border:2px solid;border-radius:25px;}
CSS3 盒阴影：div{box-shadow: 10px 10px 5px #888888;}
CSS3 边界图片：

div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

CSS3 渐变（Gradients）：线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向；径向渐变（Radial Gradients）- 由它们的中心定义

#gradient {
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, red , blue); /* 标准的语法 */
}

CSS3 2D 转换:translate(),rotate(),scale(),skew(),matrix()

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

CSS3 过渡:

div
{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}
div
{
    transition: width 2s, height 2s, transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;   
    /* Safari and Chrome */
}
div:hover
{
    width:300px;
    height:300px;
    transform:translate(0,100px);
    -webkit-transform:translate(0,100px);/* Safari and Chrome */
}

CSS3 多列:

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

CSS3 多媒体查询:

@media not|only mediatype and (expressions) {
    CSS 代码...;
}
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">