CSS3常用知識點

1 css3選擇器

1.1 屬性選擇器

/*  e[attr~=val] 表示的乙個單獨的屬性值 這個屬性值是以空格分隔的*/

.attr2 a[class~="kawa"] 
/* e[attr|=val] 表示的要麼乙個單獨的屬性值 要麼這個屬性值是以"-"分隔的*/
.attr3 a[class|="kawa"] 
/* e[attr*=val] 表示的屬性值裡包含val字元並且在「任意」位置 */
.attr4 a[class*="kawa"] 
/* e[attr^=val] 表示的屬性值裡包含val字元並且在「開始」位置 */
.attr5 a[class^="kawa"] 
/* e[attr$=val] 表示的屬性值裡包含val字元並且在「結束」位置 */
.attr6 a[class$="kawa"] 

a:link /* 未訪問的鏈結 */

a:visited /* 已訪問的鏈結 */
a:hover /* 滑鼠移動到鏈結上 */
a:active /* 選定的鏈結 */

:first-letter/*向文字的第乙個字母新增特殊樣式。*/

:first-line/*向文字的首行新增特殊樣式。*/:before/*在元素之前新增內容。*/:after/*在元素之後新增內容。*/

:root /*樣式繫結到頁面艮元素中*/ 

:not /*對某個結構元素使用樣式，但想排除其子元素的樣式*/
:empty/*當元素為空時使用的樣式*/
:target/*對頁面中某個target元素指定樣式，該樣式只在使用者點選了頁面的超連結起作用*/

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;
​

display: -moz-box; display: -webkit-box; /*比css裡面用浮動定位布局更簡潔*/

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;/*內容下對齊*/

根據不同瀏覽器視窗大小載入不同的css樣式

@media screen and (min-width: 1000px) 
@media screen and (min-width: 640px) and (max-width: 999px) 
@media screen and (max-width: 639px) 

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的方法

CSS3 知識點總結

1.border radius border radius設定的值越大，弧度越大，可以用具體數值10px來設定，也可以用20 百分比來設定 你也可以只設定乙個或其中幾個角的弧度，就像這樣 div 2.box shadow 用來設定乙個下拉陰影得框，語法如下 box shadow h shadow v...

CSS3 知識點總結（學習筆記）

浮雕 color ddd text shadow 1px 1px 000,1px 1px fff 鏤刻 color ddd text shadow 1px 1px 000,1px 1px fff 錯亂效果 火焰效果等 chrome實現的，配合字型simsun,70版本以上 webkit text s...

CSS常用知識點

一 浮動框可以向左或向右移動，直到外邊緣碰到包含框或另乙個浮動框邊框為止。常用浮動 float left 向左 float right 向右 加上浮動之後 還要清除浮動 cl after 二 2.1 定位 難點 position static 沒有定位 fixed 絕對定位，相對瀏覽器始終顯示 相對...