浮動與偽類選擇器

一、浮動(float)

1.標準文檔流

標準文檔流是一種默認的狀態 瀏覽器的排版是根據元素的特征（塊和行級） 從上往下 從左往右排版 這就是標準文檔流

2.浮動(float)float:left/right;

因為標準文檔流會使頁面的狀態固定 元素會自動從左往右,從上往下的流式排列 所以我們要給元素加一個浮動 使它脫離標準文檔流的控制

效果:元素都加浮動，後面的元素會緊跟這前面的元素並排排列。

只要加了float，這個元素就會脫離標準文檔流。

第一個加了float，離了標準文檔流，對於瀏覽器來說，第二個元素就變成了標準文檔流中的第一個，於是就會把他排在第一位。而第一個依然存在，所以就會疊加。

行級加float

行級元素加了float，脫離標準流，塊不像塊，行不像行，能設置寬高，能並排排列。

浮動的元素會緊緊貼靠在一起

浮動的元素會文字環繞

3.使元素脫離標準流的方法

1）浮動 float

2）絕對定位position:absolute；

3）固定定位position:fixed; fixed固定的

4.浮動帶來的壞處

給元素加了浮動，撐不起父級的高度了

5.清除浮動的方法

1）給父級元素添加高度
2）給父級添加overflow:hidden;
3）給浮動元素的後面添加一個空的div 添加樣式為clear:both

4）偽類：給父級添加一個偽類clear

這個類寫的樣式屬性有

二、偽類選擇器

只要選擇器後面帶:,都可以說他是偽類選擇器

常用超鏈接偽類 a:link{} a:hover{} a:visited{} a:active{} p:after{} p:before{}

a的四種狀態的順序不能變

偽元素 和偽類選擇器的區別

偽元素有兩個冒號 如p::after{} 偽類選擇器有一個冒號p:hover{}

三、補充

margin 的margin:0 auto;會解決元素的居中，前提是給這個元素設置width

CSS層疊樣式表 (CSS兩個性質)

1.繼承性

繼承性是指被包在內部的標簽將擁有外部標簽的樣式 即子元素可以繼承父元素的屬性

2.層疊性（選擇器的選擇能力 誰的權重大就選誰）

1）選不中 走繼承性（font color text）繼承性的權重是0
有多個父級都設置了這樣的樣式 走就近原則
2）選中 權重的問題
權重大就選誰的樣式
權重相同 誰在後選誰
純標簽和類沒有可比性 純類和id也沒有可比性

從零開始的全棧工程師——html篇1.6