css盒模型筆記

2021-06-22 14:08:23 字數 717 閱讀 1427

一、總述

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

二、margin和padding

1、.簡寫上右下左(4)、上邊左右(2)

2、使用在非table元素上(td tr tead............)

3.margin在行內非替換元素(例如span),垂直方向上的margin不起作用。

4.margin在垂直方向上的不同盒子之間會重疊。兩個重疊成乙個,具體寬度取較大的

二、重點

1.content box 和padding box 在背景之上

2.由於ie6、7對盒模型的解釋有點不同。ie的內容可能被擠壓

一般(盒子寬度計算出來的):盒子寬度 = "content-width" + "padding(left and right)" + "border-width";

ie(盒子的寬度設定出來的): 內容的寬度 = "width" - "padding" - "border-width";

解決辦法:當子元素的寬度固定的時候,padding設定在父元素上。也就是說不要設定padding和border。這樣就一樣了,給父元素設定padding是為了可能需要的填充之類的效果

css盒模型 標準盒模型 怪異盒模型

css 盒子模型 box model 每個html元素都可以看作是乙個盒子,父元素和子元素的關係就行大盒子裡放了個小盒子,兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...

css學習筆記 盒模型,布局

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

CSS學習筆記之盒模型

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