CSS3常用知识点

CSS3常用知识点

1 css3选择器

1.1 属性选择器

        /*  E[attr~=val] 表示的一个单独的属性值 这个属性值是以空格分隔的*/
        .attr2 a[class~="kawa"] {
            //TODO
        }
        /*  E[attr|=val] 表示的要么一个单独的属性值 要么这个属性值是以"-"分隔的*/
        .attr3 a[class|="kawa"] {
            //TODO
        }
        /*  E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置 */
        .attr4 a[class*="kawa"] {
            //TODO
        }
        /*  E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置 */
        .attr5 a[class^="kawa"] {
            //TODO
        }
        /*  E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置 */
        .attr6 a[class$="kawa"] {
            //TODO
        }

1.2 伪类选择器

a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接 */

1.3 伪元素选择器

:first-letter   /*向文本的第一个字母添加特殊样式。*/
:first-line     /*向文本的首行添加特殊样式。*/
:before         /*在元素之前添加内容。*/
:after          /*在元素之后添加内容。*/

1.4 结构性伪类选择器

:root /*样式绑定到页面艮元素中*/
:not  /*对某个结构元素使用样式，但想排除其子元素的样式*/
:empty/*当元素为空时使用的样式*/
:target/*对页面中某个target元素指定样式，该样式只在用户点击了页面的超链接起作用*/

2 CSS3布局

2.1 css3多栏布局

2.1.1  column-count 分多少栏展示
column-count: 3;-webkit-column-count: 3;-moz-column-count: 3;/*分成3栏展示*/
2.1.2 column-width 每一栏以宽度多少来展示
 column-width: 200px;-webkit-column-width: 200px;-moz-column-width: 200px;/*分栏展示每一栏宽度200px*/
2.1.3 column-gap 指定栏目与栏目之间的距离
 column-column-gap: 10px;-webkit-column-gap: 10px;-moz-column-gap: 10px
2.1.4 column-rule栏目与栏目之间增加一条分隔线
 column-column-rule: 1px solid #cccccc;;-webkit-column-rule: 1px solid #cccccc;;-moz-column-rule: 1px solid #cccccc;
​

2.2 css3盒布局

display: -moz-box; display: -webkit-box; /*比css里面用浮动定位布局更简洁*/

2.3 css3弹性盒布局

2.3.1 自适应弹性盒布局
-webkit-box-flex:1;-moz-box-flex:1;/*兄弟元素中值越大，占百分比越大*/
2.3.2 改变元素显示的顺序
-webkit-box-ordinal-group:1;-moz-box-ordinal-group:1;/*值越大越靠近左边或者上边*/
2.3.3 改变元素的排列方向
-webkit-box-orient:vertical;-moz-box-orient:vertical;/*水平从左向右排列*/
-webkit-box-orient:horizontal;-moz-box-orient:horizontal;/*垂直从上向下排列*/
2.3.4 指定内容的对齐方式
/*水平方向的对其方式*/
-webkit-box-align:start;-moz-box-align:start;/*内容左对齐*/
-webkit-box-align:center;-moz-box-align:center;/*内容中对齐*/
-webkit-box-align:end;-moz-box-align:end;/*内容右对齐*/
/*垂直方向的对齐方式*/
-webkit-box-pack:start;-moz-box-pack:start;/*内容上对齐*/
-webkit-box-pack:center;-moz-box-pack:center;/*内容中对齐*/
-webkit-box-pack:end;-moz-box-pack:end;/*内容下对齐*/

2.4 Media Queries

根据不同浏览器窗口大小加载不同的css样式
        @media screen and (min-width: 1000px) {
          //TODO
        }
        @media screen and (min-width: 640px) and (max-width: 999px) {
           //TODO
        }
        @media screen  and (max-width: 639px) {
           //TODO
        }

3 几个兼容ie9一下浏览器js

3.1 html5shiv.min.js /可以在IE9及一下版本创建main，header,footer等HTML5元素/

3.2 respond.min.js /让IE6 IE7 IE8支持CSS3 Media Query/

3.3 seletivizr.js /提供大量IE不支持的CSS选择器和属性，包括所有的last-child选择器/

3.4 判断IE的方法

<!--[if IE 7 ]>IE6<![endif]-->
<!--[if IE 7 ]>IE7<![endif]-->
<!--[if IE 8 ]>IE8<![endif]-->
<!--[if IE 9 ]>IE9<![endif]-->