CSS 必知的7個知識點

2021-06-13 03:29:18 字數 3549 閱讀 2166

1、width是個雷

很多頁面要求寬度自適應,那麼width設百分比吧,否則塊元素很容易變成粘著不走的狗皮膏藥

當沒有定義元素寬度時,瀏覽器撐滿整行,實際上執行的是width:auto,寬度自適應。

2、ie6不認識min-height

解決辦法就是_height,有時候明明不需要可變高度,如果喜歡沒原則的min-height,那麼記得用_height對付下ie6這個屌絲。

3、float和clear

float和絕對定位都會破壞正常的文件流,正常流自上而下,而float是乙個自左而右或者自右而左的流。

clear僅僅是針對上乙個浮動元素而言,如果上面沒有元素浮動,那麼你要清除啥呢?

所謂清除浮動,個人認為就是相對於上乙個浮動元素,另起一行。

4、position的relative和static的區別

relative是相對於自己普通流所在位置的定位,而static是文件普通流,即文件流的預設情況。

一般情況,relative跟隨top和left兩個值,當然也可以用right和bottom,但切記,一切都是相對於自己的普通流。

如果將 position 設為 relative , absolute 或 fixed,那麼元素會覆蓋沒有設定 position 屬性的元素,姑且把static當沒設position吧。

這說明層級關係中position的權重是較高的。當然如果position有z-index,z-index高的優先,否則,設定了position的比沒設的高,

再然後,如果沒設position,則按文件流順序,位於後面位置的元素會覆蓋前面的元素。

5、z-index和overflow

用z-index 屬性設定元素的堆疊順序。那麼擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。

不過z-index 屬性僅在節點的 position 屬性為 relative, absolute 或者 fixed 時有用哦。

當正常流溢位時,可以選擇overflow的scroll或者hidden屬性。

什麼是溢位?比如父級元素定義的高度是100,子級元素定義的高度是150,這撐不住的50就是溢位。

所以溢位只出現在子級元素溢位父級元素的情況。一般想解決溢位問題 就只要在父級元素上加乙個overflow屬性。

兄弟元素之間按照正常的普通的流走不會出現溢位的情況,但當子級元素relative時候,也會出現覆蓋,但這已經脫離了溢位的管轄範圍。

當然父級的overflow對因relative而溢位的子級元素同樣有效。

6、ie有bug就找haslayout

haslayout是ie特有的屬性,很多ie神奇的bug都和haslayout有關,要記住,有些樣式會觸發haslayout,最常用的是zoom:1

下列元素預設 haslayout=true

-------------------------------------display

啟動haslayout的值:inline-block

取消haslayout的值:其他值

--------------------------------------width/height

啟動haslayout的值:除了auto以外的值

取消haslayout的值:auto

---------------------------------------position

啟動haslayout的值:absolute

取消haslayout的值:static

----------------------------------------float

啟動haslayout的值:left或right

取消haslayout的值:none

---------------------------------------zoom(ie專有屬性)

啟動haslayout的值:有值

取消haslayout的值:narmal或者空值

----------------------------------------ie7還有一些額外的屬性可以觸發該屬性:

min-height: (任何值)

max-height: (任何值除了none)

min-width: (任何值)

max-width: (任何值除了none)

overflow: (任何值除了visible)

overflow-x: (任何值除了visible)

overflow-y: (任何值除了visible)5

position: fixed

7、神奇的w3c塌陷

什麼都不說,先看看效果吧

<

style

>

#a#sub_a

style

>

<

div

id="a"

>

<

div

id="sub_a"

>

div>

div>

這是外邊距疊加collapsing-margin問題,collapsing不是瀏覽器bug而是w3c標準哦。請看如下這段:

in css, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

在css中,兩個或多個毗鄰(父子元素或兄弟元素)普通流中的塊元素垂直方向上的margin 會發生疊加。這種方式形成的外邊距即可稱為外邊距疊加(collapsed margin)。

和我一樣的菜鳥直接去研究下這篇好文章吧

避免外邊距疊加,其實很簡單:外邊距發生疊加的4個必要條件(2個或多個、毗鄰、垂直方向、普通流),破壞任乙個即可。

我們主要來談一下「毗鄰」,只有理解「毗鄰」的概念之後,讓元素互相之間不毗鄰才能元素避免外邊距的疊加。

毗鄰不僅僅是兄弟元素之間,也有可能在父子元素之間,元素之間的外邊距疊加只有在四種情況下才能叫毗鄰:

以上4種情況之間的元素都可能會發生外邊距的摺疊(最後乙個是元素自身),但還要注意的是以上4種關係形成毗鄰還要加乙個條件:元素之間沒有被非空內容paddingborderclear分隔開。

**:

python的必知小知識點

hello,s name hello,bob hey name s,there is a 0x errno x error 結果 hey bob,there is a 0xbadc0ffee error hello,format name hello,bob hey there is a 0x er...

MySQL必知必會知識點1

mysql 使用到預設埠是 3306 mysql 在執行匹配時預設不區分大小寫。選擇資料庫 usedatabasename 了解資料庫 show databases 了解資料庫中的表 show tables 從表中選擇特定的列 selectcolumnname from tablename 從表中選...

mysql必知必會知識點彙總

摸魚看完的書,筆記扔在這裡記錄一下 in的最大優點?in能夠包含其他select語句 mysql中not支援對什麼語句進行取反?not支援對in between exists取反 mysql中like是什麼?like是謂詞,不是操作符 null能被 萬用字元匹配嗎?null不能被 萬用字元匹配 使用...