前端基礎十一 盒子模型

2021-07-30 15:34:31 字數 842 閱讀 3015

1、盒子模型也稱框模型,方便完成網頁的布局。盒子分為四個部分:

內容區:content

內容區的大小可以通過  width和height來進行設定,而整個盒子可見區的大小=內容區的大小+border 的大小+padding的大小

內邊距:padding

邊框:border:四條邊三樣式,所有樣式都不能繼承。

border有三個樣式,可以通過乙個屬性同時設定四條邊的樣式,包括寬度、樣式、顏色,並且沒有順序。

(1)border-width:邊框寬度,只設定乙個值時它會將四個方向的值都設定為相同的寬度;如果指定四個值時,則分別為上、右、下、左指定寬度;

如果指定三個值時,則為上、左/右、下指定寬度;如果指定兩個值,順序則為上/下,左/右。

也可以通過border-top-width設定上邊框寬度,其他邊同理。

(2)border-style:邊框樣式,虛線或者實線,預設值為none。

(border-width和border-color都有預設值,所以指定邊框時必須設定border-style,這時其他兩個樣式使用預設值。但是一般情況下,三個樣式都要設定。)

solid:實線

dotted:點狀

dashed:虛線

(3)border-color:邊框顏色,預設黑色

外邊距:margin

2、關於內聯元素(如span)

可以設定邊框,但是不能設定寬和高,由內容決定寬和高。

並且內聯元素支援水平方向的外邊距,不支援垂直方向的外邊距,即上下邊距。

內聯元素可以設定水平方向的內邊距,也可以設定垂直方向的內邊距。

垂直內邊距會影響到內聯元素的顯示大小,但是不會影響其它元素的布局。

div css 一 盒子模型

宣告盒子模型時用到的css屬性 height width margin padding border padding 10px 20px 30px 上10px,左右20px,下30px 注意 在盒子模型時,如果有height 和 width時,必須考慮相容性,尤其是在有border 和padding...

web前端基礎 盒子模型

盒子模型的概念 盒子模型用來 放 網頁中的各種元素。網頁設計中內容,如文字 等元素,都可是盒子 div巢狀 寬度屬性 寬度 width 長度值 百分比 auto 最大寬度 max width 長度值 百分比 auto 最小寬度 min width 長度值 百分比 auto 高度屬性 高度 heigh...

前端 盒子模型

盒模型分為兩種 標準模型和ie模型,主要了解標準模型 盒模型示意圖 盒子模型的屬性 width 內容的寬度 height 內容的高度 padding 內邊距,邊框到內容的距離 border 邊框,就是指盒子的寬度 margin 外邊距,盒子邊框到附近最近盒子的距離 盒模型的計算 盒子的真實寬度 wi...