CSS學習1 基本布局以及盒子模型

2021-07-03 07:54:38 字數 947 閱讀 8968

1. css選擇器優先順序:

行內樣式》id選擇器》類別選擇器》標記選擇器;

兩個類別選擇器優先順序相同時,以前者為主;

2. css盒子的浮動:

預設盒子沒有浮動,按行排列,橫向排列;

如果有兩個盒子,第乙個設定float為left,則第二個與第乙個在同一行,第二個的左邊框與第乙個的右邊框重合,文字會圍繞第乙個盒子排列;

乙個div的範圍是由它裡面的標準流內容決定的,與裡面的浮動內容無關;

clear用於消除浮動對其影響,值有三個,left,right,both;

3. 搜尋引擎根據網頁內容的價值來確定網頁的排名,不管css;

4. css的position:

static:預設值;

relative:根據left, top, right, bottom大小設定偏移畫素或者百分比,父元素不發生改變;即不影響父元素及兄弟元素,相對於其本身原始位置發生偏移;仍在標準流中;

absolute:以它最近的乙個「已經定位」的「祖先元素」為基準進行偏移,如果沒有已經定位的祖先元素,那麼以瀏覽器視窗為基準進行定位;脫離了標準流;上述「已經定位」指的是其position屬性被設定為static之外的任何一種方式;如果只設定了absolute,而沒有設定偏移值,那麼當前的元素將脫離標準流,其所在位置不發生改變;

fixed:類似於absolute,其基準是瀏覽器視窗;

5. z-index空間位置:當塊被設定了position屬性之後,該值才有效,預設為0,當兩個塊的z-index值一樣的時候,將保持原有的高低覆蓋關係;

6. css的display:

inline指行內元素;

block指塊元素,不在一行內;

none表示隱藏;

7.border的設定必須畫素、顏色、樣式三者都要設定,缺一不可,而且順序不能改變;

8. 盒子的大小為margin+border+padding+content;

css盒子模型布局詳解

盒子模型是css裡的乙個重點內容,一般來講主要是w3c的盒子模型,不過ie原先也有自己的盒子模型,但是隨著發展ie也調整了盒子模型同步w3c,因此這裡就不講ie盒子模型了。標準w3c盒子模型 以下用乙個div的盒子模型作為範例進行解讀 可以看出這個div裡面只有範例的文字,而它的盒模型分為四部分 c...

css盒子模型,div css布局

css盒子模型 border border width 邊框的寬度 border color 邊框的顏色 border style 邊框的線型 border top 上邊框 border bottom 下邊框 border left 左邊框 border right 右邊框 padding 代表邊框...

CSS布局控制 盒子模型

一 盒子模型 用於設定邊框的 盒子的邊框 border 用於設定距離的 內容與邊框 padding 盒子與盒子 margin 文字預設在盒子的左上方 padding border margin都是實體,會增加盒子的面積 盒子的width和height設定的是盒子內容的寬和高,不是盒子本身的寬和高,盒...