盒模型基礎

盒模型屬性

盒模型有五個屬性分別為：

1、width 內容寬度

2、height 內容高度

3、border 邊框

4、padding 內邊距（即邊框到內容之間的距離）

5、margin 外邊距（即乙個盒子到另乙個盒子之間的距離）

一、width與height

指盒子的寬和高（盒子的體積或者容積，顯示內容位置大小）

例：width：500px （盒子寬為500畫素）

height：300px （盒子高為300畫素）

二、border

指設定盒子的邊框樣式

邊框屬性中有三個屬性值分別為：粗細 樣式 顏色，並且有兩種寫法

第一種是指定屬性進行設定

例：border-width：1px （設定邊框大小）

border-style：solid （設定邊框樣式）

border-color：red （設定邊框顏色）

其中邊框樣式有四種分別為：

solid 實線

double 雙實線

dotted 點線

dashed 虛線

第二種可以簡寫為

border：1px solid red （中間用空格隔開）

三、padding

指內容到邊框之間的距離

一般標籤都有預設padding值，所以我們一般都會在css中加入個萬用字元

*（清除所有margin與padding值）

padding是有盒子內的背景色的，也就是background-color的屬性回填充盒子內的所有區域

padding屬性有四個方向，分別設定四個方向的距離，也有兩種描述方法

第一種是指定乙個方向的分別設定屬性

例：padding-top:10px （上邊距為10畫素）

padding-right：20px （右邊距為20畫素）

padding-bottom：30px （下邊距為30畫素）

padding-left：40px （左邊距為40畫素）

第二種是綜合屬性，中間要用空格隔開

例：padding：10px 20px 30px 40px 屬性為上右下左的數值

其次設定1-4個值的分別代表不同屬性

設定乙個值為：上下左右

設定兩個值為：上下、左右

設定三個值為：上、左右、下

設定四個值為：上、右、下、左

四、margin

指當前盒子到最近盒子的距離

margin與padding差不多只是乙個設定盒子內邊距乙個設定盒子外邊距，設定方法與padding類似

例：margin：10px （上下左右各移動10畫素，即四周邊距各為10）

margin-left：20px （盒子向右移動20畫素，即左邊距為20）

margin-top:30px （盒子向下移動30畫素，即上邊距為30）

盒模型基礎內容

盒模型包含有效內容區域，邊框以及外邊距部分 盒模型的寬度 width padding left padding right border right border left marign left marign right 盒模型高度 height padding top padidng botto...

盒模型的基礎

盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間。即都包含內容區 補白 填充 邊框 邊界 外邊距 這就是盒模型。即 由content padding border margin組成基本的框架 1.padding是在盒子裡面...

盒模型基礎練習

lang en charset utf 8 name viewport content width device width,initial scale 1.0 web前端基礎知識title rel stylesheet href css page2.css head css盒子模型 h1 網頁設計...