CSS布局初學

2021-10-01 12:28:53 字數 1521 閱讀 5037

1.層疊:在 html 檔案中對於同乙個元素可以有多個 css 樣式存在,當有相同權重的樣式存在時,會根據這些 css 樣式的前後順序來決定,處於最後面的 css 樣式會被應用。

2.繼承:w3c中css規定,給標籤設定了某些樣式,如果後代沒有指定樣式的情況下,它的後代無素會繼承父輩的某一些屬性。

3 權重:也就是優先順序,用於解決層疊問題。優先順序越高的樣式,會優先執行,優先順序低的樣式,會後執行甚至不執行。

4.選擇器的權重表:0表示低,1表示高。

嵌入id

class元素a

bcd–

––––

style10

00id0

100class,屬性偽類00

10元素,偽元素00

01萬用字元最低--

-!important最高-

--1.盒模型的基本概念:由里向外

內容:content;內邊距:padding;邊框:border;外邊距:margin.

2.盒模型分類:標準模型和ie模型

3.兩種盒模型的區別:

在標準模型中,盒模型的寬高只是內容(content)的寬高;

在ie模型中盒模型的寬高是內容(content)+填充(padding)+邊框(border)的總寬高。

1)絕對定位: position: absolute; top:(填數字) px; left:(填數字) px; 當你希望某一元素出現在特定位置的時候,可以使用絕對定位,然後配合著 top、 left、right、 bottom 一起用(距離某一方向多少畫素,但是 left 和 right 不能同時出現,並且 left 是左邊線距離瀏覽器多少畫素, right 是右邊線距離瀏覽器多少畫素, top是上邊線距離瀏覽器多少畫素,一般不用 bottom),但是, 他會脫離原來的位置進行定位(會向上一層,底下的位置會空出來,其他的元素頂上去),它是相對於最近的有定位的父級進行定位,如果沒有,那麼會相對於文件進行定位。

2) 相對定位: position: relative; top:(填數字) px; left:(填數字) px; 當你希望某一元素出現在特定位置的時候,可以使用相對定位,然後配合著 top、 left、right、 bottom 一起用,但是, 他會保留原來的位置進行定位(原來的位置還佔著,但是沒東西),它是相對於自己原來的位置進行定位。

3)定位原則: 用 relative 作為參照物(保留原來位置進行定位,如果不設定 top和 left, 對後續元素都沒有影響),用absolute 定位(可以任意調換自己的參照物,定位更靈活),這種原則被稱為子絕父相。

4)固定定位: position: fixed; top:(填數字) px; left:(填數字) px; 當你希望某一元素不隨著滾動條的拖曳而改變的時候,可以使用固定定位,然後配合著 top、left、 right、 bottom 一起用。

5)特點補充:絕對定位和固定定位,都會使元素脫離文件流;定位一般用於多個元素重疊的場景。

常規流的概念:在css元素的布局中,預設的基礎布局方式。

常規流布局:將窗體自上而下分成一行一行,塊級元素從上至下、 行內元素在每行中按從左至右的依次排放元素。

初學rem布局筆記

rem是乙個單位,首先有乙個概念上的認知,例如 html div 此時這個div的寬高就是5x20 100pxrem是根據根元素html的字型大小來計算的,跟父元素沒有關係。em是先根據它自身的字型大小來計算,例如 html div此時就是乙個40x40的盒子 如果它自身沒有定義字型大小,那它就會根...

初學CSS樣式

今天學了三個樣式表,邊學邊練正好給了我喘息的時間,這樣的節奏我還是挺適應的,學會使用這些方法等,內部樣式表 內嵌式是將css 集中寫在html文件的head頭部標籤中,並且用style標籤定義,其基本語法格式如下 行內式 內聯樣式 標籤名 style 屬性1 屬性值1 屬性2 屬性值2 屬性3 屬性...

初學css(定位)

相對定位最重要的一點是,它可以通過邊偏移移動位置,但是原來的所佔的位置,繼續占有。其次,每次移動的位置,是以自己的左上角為基點移動 相對於自己來移動位置 就是說,相對定位的盒子仍在標準流中,它後面的盒子仍以標準流方式對待它。相對定位不脫標 絕對定位最重要的一點是,它可以通過邊偏移移動位置,但是它完全...