css 說說你對css盒子模型的理解

2021-10-19 10:42:01 字數 588 閱讀 9282

css盒模型由兩個盒子組成,外在的控制是否換行的盒子,以及內在的控制元素內容的盒子。比如:display: inline-block, 則它的外在的盒子就是inline也就是不佔據一行,而block則表示內部的元素具有塊狀特性。所以,display: inline其實就是display: inline-inline的縮寫,display: block就是display: block-block的縮寫。

每乙個內在的盒子有: width/height, padding, border, margin這幾個控制盒子大小的屬性。其中 width/height控制元素內容大小,padding則控制元素內容到border線內側距離,border則是元素外圍邊框大小,而margin則是控制與其他元素的間距,它的背景透明。

對於早期,計算乙個元素的佔據大小,需要通過width +2* padding + 2*border來計算,css3中提出了box-sizing:border-box,通過這樣設定,就可以使元素最終的寬高就是設定的width/height, 瀏覽器會根據width/height, padding, border的大小來自動調整內部元素的大小。

與歌謠一起通關前端面試題

css盒子模型 說說css盒子模型

引用mdn官方的解釋 當對乙個文件進行布局 lay out 的時候,瀏覽器的渲染引擎會根據標準之一的 css 基礎框盒模型 css basic box model 將所有元素表示為乙個個矩形的盒子 box css 決定這些盒子的大小 位置以及屬性 例如顏色 背景 邊框尺寸 每個盒子由四個部分 或稱區...

css盒子模型 CSS 盒子模型

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

簡述對css盒子模型的理解 CSS盒子模型

我們先來寫一段 我是div block元素 我是span inline元素 我是span inline元素 我是span inline元素 我是span inline元素 由於div是塊狀元素 block element span是行內元素 inline element 行內元素特徵 1 設定寬高無...