浮動與偽類選擇器

一、浮動(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也沒有可比性

?

?

?

?

?

?

轉載于:https://www.cnblogs.com/lijieqiqi/p/qiwu.html

總結

以上是生活随笔為你收集整理的从零开始的全栈工程师——html篇1.6的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。