CSS盒子模型

2022-08-26 09:36:11 字數 1702 閱讀 7373

1.盒子模型概念

2.高和寬設定

3.邊框設定

4.內邊框設定

5.外邊框設定

6.盒子的計算

7.元素顯示方式

寬度width:長度值、百分比、auto

最大寬度max-width:長度值、百分比、auto

最小寬度min-width:長度值、百分比、auto

高度height:長度值|百分比|auto

最大高度max-height:長度值|百分比|auto

最小高度min-height:長度值|百分比|auto

說明:設定塊級元素和替換元素的內容高度

1.塊級元素 p div h1~h6 ul li ol dl dt dd 等

2.替換元素 瀏覽器根據其標籤的元素與屬性來判斷顯示的具體內容

img input textarea等

1.width和height屬性設定是內容的高和寬

2.width和height屬性設定對塊級元素和替換元素有效

3.max-height(width)/min-height(width)有相容性問題,ie不支援。

邊框寬度border-width  · thin ·medium ·thick ·長度值

邊框顏色border-color    顏色/transparent

邊框樣式border-style    :

1.none定義無邊框。預設值 ;2.hidden與none相同。除非在**元素中解決邊框衝突

3.dotted 定義 點狀邊框。在大多數瀏覽器中呈現為實線;4.dashed。定義虛線。在大多數瀏覽器中呈現為實線;5。solid定義實線 6.double,定義雙線7.groove定義3d凹槽邊框  8.ridge 定義3d壟狀邊框 9.inset 定義3d inset 邊框 10. outset 定義3d outset 邊框11, inherit 規定應該從父元素繼承邊框樣式

margin-top:長度值或百分比或 auto

margin-right:

margin-bottom:

margin-left:

注意:可以為負值

inline:元素將顯示為內聯元素,元素前後沒有換行符

block:元素將顯示為塊級元素,元素前後會帶有換行符

1.相應內聯元素及使用display:inline設定成內聯元素的元素 width和height屬性無效

水平方向margin-left/margin-right/padding-left/padding-right有效

垂直方向margin-top/margin-bottom/padding-top/padding-bottom無效

2.塊級元素及使用display:block設定成塊級元素的元素width/height/margin/padding屬性都生效

3.inline-block    行內塊級元素,元素呈現為inline,具有block相應特性

4.none  此元素不會被顯示

css盒子模型 CSS 盒子模型

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

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

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

css 盒子模型 ie盒子模型

css盒子模型 網頁設計中css技術所使用的一種思維模型。css盒子模型組成 外邊距 margin 邊框 border 內邊距 padding 內容 content css盒子模型分為 標準w3c盒子模型,ie盒子模型,注意在兩種模型中寬 width 和高 height 包括屬性的不同。標準w3c盒...