柚子快報邀請碼778899分享：前端 HTML&CSS

http://yzkb.51969.com/

前端入門

1、HTML&CSS

1、選擇器

通配選擇器

元素選擇器

類選擇器

id選擇器

復合(組合) 選擇器

交集選擇器(且)

并集選擇器(或者)

/* 任何選擇器都可以作為選擇器的一部分 */

后代選擇器（兒子、孫子，重孫） ul li a {

...

}

.class1 a {

}

子代選擇器(兒子)

div>a {

..

}

div>p>a {

}

.class1 > a {

}

兄弟選擇器(向下找) div+p {

/*緊緊相連的兄弟元素,向下找*/

...

}

div~p {

/*通用選擇器，所有兄弟選擇器，向下找*/

}

屬性選擇器

[屬性名] { } /*選擇具有title屬性的元素*/

[title="a"] { } /*選擇具有title屬性，且值為a的元素*/

[title^="a"] { } /*選擇具有title屬性，且值以a開頭的元素*/

[title$="s"] { } /*選擇具有title屬性，且值以s結尾的元素*/

[title*="u"] { } /*選擇具有title屬性，且值包含u的元素*/

偽類選擇器

a:link {

/*選中沒有訪問過的a元素*/

...

}

a:visited {

/**選擇的是訪問過的a元素/

}

偽類選擇器-動態(tài)偽類

a:hover {} /*懸停*/

a:active {} /*激活*/

/*hover,active 所有元素都有*/

input:focus {}

偽類選擇器-結構偽類

div>p:first-child {} /*選擇div第一個子元素是p元素的元素*/

div p:first-child {} /*選擇div所有的p元素，且p元素的是其夫元素的第一個子元素*/

p:first-child {} /*p元素，且p元素的是其夫元素的第一個子元素*/

p:last-child {} /*p元素，且p元素的是其夫元素的最后一個子元素*/

div p:first-of-type {} /*p元素，第一個類型為p*/

div p:nth-of-type(n) {} /*p元素，第n個類型為p*/

p:nth-child(n) {/*p元素，且p元素的是其夫元素的最后一個子元素*/}

p:nth-child(2n/even) {} /*偶數*/

p:nth-child(2n+1/odd) {} /*奇數*/

p:nth-child(-n+5) {} /*前5個*/

div>p:not(.clasa1) /*否定(排除)結構偽類*/

偽類選擇器-UI偽類

input:checked {} /* 選中的是勾選的復選框或者單選按鈕*/

input:disabled

偽類選擇器-目標偽類

div:target {} /* 選擇描點選中的元素 */

偽元素選擇器

div::first-letter {}

div::selection {}

input::placeholder {}

p::before {content：‘$’}

p::before {content：‘$’}

選擇器的優(yōu)先級

2、字體

3、盒模型

margin:

給一個塊級元素左右margin設置auto可以實現該元素在其父元素水平居中

margin: 0 auto

margin 也可以設置負值

margin：-50px

margin塌陷問題 第一個元素的上外邊距和最后一個元素的下外邊距會作用在父元素上

overflow:hidden

margin 合并問題

元素的溢出

隱藏元素

樣式的繼承

元素居中

行內元素空白問題

行內塊的幽靈空白問題

4、浮動float

特點：

浮動后的影響：

解決方案：

布局練習：

代碼：

5、定位position

相對定位

絕對定位

固定定位

粘性定位

定位的層級

特殊定位的應用

6、布局

1、版心

2、常用的布局名稱

3、重置默認樣式

2、HTML5

2、新增標簽

視頻標簽：

音頻標簽：

3、新增全局屬性

3、兼容性處理

3、CSS3

1、新增css屬性

2、新增文本屬性

3、新增漸變

4、web字體

5、字體圖標

6、2D變換

縮放：

旋轉：

2D旋轉

扭曲:

多重變換

7、3D轉換

8、過渡

過渡的高級使用：

復合屬性：

9、動畫

動畫的復合屬性

過渡和動畫的區(qū)別：

過渡需要觸發(fā)條件，動畫不需要。 動畫可以指定關鍵幀。

10、多列布局

多列布局案例：

圖片展示瀑布流

11、伸縮盒模型

主軸方向

主軸換行方式

主軸的項目對齊方式

默認主軸水平從左到右

側軸

1、元素的水平垂直居中布局