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
        }

CSS3常用知識點