標準文件流以及偽類選擇器

2022-08-17 08:36:22 字數 1099 閱讀 4853

標準文件流

瀏覽器排版是根據元素的特徵(塊和級),從上往下,從左往右排版。這就是標準文件流。

float:left/right;

效果:元素都加浮動,後面的元素會緊跟著前面的元素併排排列。

a、 只要加了float,這個元素就會脫離標準文件流。

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

行級加float,就會脫離標準流,塊不像塊,行不像行,能設定寬高,能併排排列,display就沒有任何意義了。

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

c、浮動的元素會文字環繞

使元素脫離標準流的方法:

1、浮動   (float)

2、絕對定位(position:absolute;)

3、固定定位(position:fixed;《fixed   固定的》

浮動帶來的壞處

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

清除浮動

1、給浮動的父元素新增高度

2、給父級新增overflow:hidden;

3、給浮動元素的後面新增乙個空的div   新增樣式為clear:both;

4、給浮動元素的父級新增乙個類叫clearfix

如:body裡面

style裡面是

.clearfix:after

偽類選擇器

偽類選擇器

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

如:a:link{}      a:hover{}       a:visited{}       a:active{}     p:after{}    p:before{}

a的四種狀態:

a:link(正常的)

a:visited(訪問過後的)

a:hover(滑鼠懸浮)

a:active(滑鼠點選的那一下)

(注:四種狀態的順序不能變)

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

偽元素有兩個冒號  如(p::after{})

偽類選擇器有乙個冒號  如(p:hover{})

標準文件流和偽類選擇器

margin 的 margin 0 auto 會解決元素的居中,前提是給這個元素設定width css層疊的問題 css有兩個性質 繼承性層疊性 選擇器的一種選擇能力,誰的權重大就選誰 a,選不中,走繼承性,font color text 繼承性的權重是 0a 有多個父級都設定了這樣的樣式 走就近原...

高階 屬性 偽類 偽元素選擇器 標準文件流

高階選擇器 交集選擇器 交集選擇器,第乙個必須是標籤選擇器,第二個必須是類選擇器 並集選擇器 為什麼要重置樣式?是為了更好頁面布局 多個選擇器之間使用逗號隔開,表示選中的頁面中的多個標籤,一些共性的元素,可以使用並集選擇器 屬性選擇器 偽類選擇器 偽類選擇器一般會用在超連結a標籤中,使用a標籤的偽類...

屬性選擇器,偽類選擇器,偽元素選擇器

屬性選擇器 1doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title 屬性選擇器 title 6 style 7 屬性匹配 8 label for 12 屬性名匹配 13 label for pwd 17 以什麼結尾匹配 18 ...