十五,盒子模型

2021-10-12 04:19:03 字數 1010 閱讀 4821

盒子模型:

作用:進行頁面布局,用來改變內外間距

適用範圍:div,body,table等塊狀顯示的

屬性:width,height,border(邊框),margin(外邊距,物件與物件之間的距離),padding(內邊距,內部內容和邊框的距離)

border,margin,padding四個屬性都可以拆分為4個小類,

比如margin,分為margin-top,margin-left,margin-right,margin-bottom,

另外2個同理,簡寫是margin:10px 10px 10px 10px;(上,右,下,左)

padding:10px 10px 10px 10px;

盒子的總高度=(margin-top)+(border-top)+(padding-top)+(content)+(padding-bottom)+(border-bottom)+(margin-bottom)的高度,寬度同理

屬性設定

1,邊框屬性比如margin,如果只設定2個,就表示上下,左右

比如margin:0px 0px;

2,如果只設定1個,表示上下左右都是乙個值。

其他屬性同理

box-sizing:padding的距離由**產生

屬性值1:content-box:在寬度和高度之外繪製元素的內邊距和邊框(預設效果)

屬性值2:border-box:已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度(設定了這個屬性以後,padding的屬性包含在內,比如整個width是200px,設定了這個屬性為20px後,原先的寬度就200-20)

語法:box-sizing:border-box

盒子模型與怪異盒子模型

所有html元素可以看作盒子,在css中,box model 這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子,封裝周圍的html元素,它包括 邊距,邊框,填充,和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。下面的說明了盒子模型 box model content...

css盒子模型 CSS 盒子模型

css 盒子模型基本上是面試的必考題,因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調,其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型,你可能會說我知道呀,就是 margin 包 border,border 包 padding,padding 包 content ...

html盒子模型 jquery盒子模型

最近學了jquery的盒子模型之後,感覺真的顛覆我之前對盒子模型的看法,我在最初以為盒子模型只存在於html,我們就來看看他們有何區別。1.html盒子模型 如果說js裡面萬物皆是物件,那麼html裡面的萬物皆是盒子。不是盒子的我們也可以用dispiay block 變成盒子。那他的盒子是怎麼計算的...