css學習筆記 盒模型,布局

2021-06-19 00:06:53 字數 668 閱讀 7473

1、外邊距疊加

當乙個元素出現在另乙個元素上面時第乙個元素的底邊距與第二個元素的上邊距發生疊加,元素被包含時也有可能會發生疊加(如果沒有內邊距和邊框),如果乙個空元素沒有內邊距和邊框本身也會發生上下邊距的疊加。   只有普通文件流中塊框的垂直外邊距才會發生疊加,行內框、浮動框或絕對定位框之間的外邊距不會發生疊加。

2、定位

css有3中基本的定位機制,普通流,浮動和絕對定位。浮動和絕對定位會脫離普通流,但是float跟絕對定位又有點不一樣,絕對定位完全不會再影響普通流中的元素,但是float對其後的文件流中的元素依然有影響,文件流中的內容會讓移動以留出空間來展示浮動元素,也就是說,浮動元素之後覆蓋其他元素的背景不會覆蓋內容,這就需要用到普通流中的元素的clear屬性了。。相對定位就是佔據原來位置的基礎上偏移有可能遮蓋其他元素。

3、行框和清理    clear屬性

值可以是left、right、both或none,它表示框的那些邊不應該挨著浮動框。實際上是留足夠的垂直空間給浮動框。通過overflow屬性也可以實現clear的功效。

4、背景定位

當背景使用百分百定位的時候,並不對影象左上角進行定位而是影象是對應百分比的乙個對應點。

測試**:

123789

abcdef

ghi1232

CSS盒模型與布局

1.1兩種基本的盒模型 block型別 這種盒模型的元素不會佔據一行,允許通過 css設定寬度 高度。例如 元素。inline元素 這種盒模型的元素不會佔據一行 預設允許在一行放置許多元素 即使通過 css設定高度和寬度也不會起作用。例如,css為display屬性提供了block和inline兩個...

CSS學習筆記之盒模型

1.邊框 div 來設定邊框粗細為 2px 樣式為實心的 顏色為紅色的邊框 div1 border style 邊框樣式 常見樣式有 dashed 虛線 dotted 點線 solid 實線 2 border color 邊框顏色 中的顏色可設定為十六進製制顏色,如 border color 888...

css盒模型筆記

一 總述 網頁是由乙個多個矩形框組成的,每乙個框都可以看成是乙個盒子,而乙個盒子 乙個元素 又是由4個矩形巢狀而成。分別是content box 內容 padding box 填充或內邊距 border box 邊框 margin box 外邊距 和布局的區別 布局是指多個盒子 元素 在頁面上的定位...