盒模型、盒子模型、框模型（box model）
- css將網頁的所有元素都設定為乙個矩形的盒子
- 將元素設定為矩形的盒子後，對頁面的布局就變成將不同的盒子擺放到不同的位置
- 每乙個盒子都由以下幾個部分
- 內容區（content）
- 內邊距（padding）
- 邊框（border）
- 外邊距（margin）
/*
內容區（content）
元素中的所有的子元素和文字內容都在內容區中排列
內容區的大小由width和height兩個屬性來設定
width 設定內容區的寬度
height 設定內容區的高度
*/width
: 200px;
height
: 200px;
background-color
: tomato;
.box1
/* 為了將內邊距和內容區區分開，所以填充盒子的內容區
*/.box_content
/*
邊框（border），邊框屬於盒子邊緣，邊框裡邊屬於盒子內部，出了邊框都是盒子外部
邊框大小會影響到整個盒子的大小
要設定邊框，需要至少設定三個樣式：
邊框的寬度 border-width (預設值：3px)
邊框的顏色 border-color
邊框的樣式 border-style
邊框寬度可以用來指定四個方向邊框的寬度（邊框顏色與之一樣的用法）
border-width: 10px 20px 30px 40px;
四個值：上 右 下 左
三個值：上 左右 下
兩個值：上下 左右
乙個值：上下左右
除了border-width之外，還有border-***-width（border-***-color、border-***-style）
***可以是 top right bottom left
*/border-width
: 10px;
/* border-color用來指定邊框的顏色，同樣可以指定邊框的四個邊的顏色
規則和border-width一樣
border-color也可以省略，預設值為color的顏色值
*/border-color
: yellowgreen;
/* border-style 指定邊框的樣式
solid 表示實線
dotted 點狀虛線
dashed 虛線
double 雙線
預設值為none，表示沒有邊框
*/border-style
: solid;
/* border簡寫屬性，通過該屬性可以同時設定邊框所有的相關樣式，並且沒有順序要求
border: 10px orange solid;
除了border之外，還有border-***
top right bottom left
*/
/*
外邊距（margin）
- 外邊距不會影響盒子可見框大小
- 但是外邊距會影響盒子的位置
- 乙個有四個方向的外邊距：margin-***
top 上外邊距，設定乙個正值，元素會向下移動
right 預設情況下不會產生任何效果
右外邊距，設定乙個正值，其右邊的元素會向右移動
bottom 下外邊距，設定乙個正值，其下邊的元素會向下移動
left 左外邊距，設定乙個正值，元素會向右移動
-margin 也可以設定負值，如果是負值則元素會向相反的方向移動
- 元素在頁面中是按照自左向右的順序排列的
所以預設情況下如果我們設定的左和上邊距則會移動元素自身
而設定右和下邊距會移動其他元素
margin 簡寫屬性
與padding規則一樣
margin會影響到盒子實際占用空間的大小
*/
CSS 3 盒子模型
盒子模型解釋 元素在頁面中顯示成乙個方塊，類似乙個盒子，css盒子模型就是使用現實中盒子來做比喻，幫助我們設定元素對應的樣式。盒子模型示意圖如下 把元素叫做盒子，設定對應的樣式分別為 盒子的寬度 width 盒子的高度 height 盒子的邊框 border 盒子內的內容和邊框之間的間距 paddi...
CSS3盒子模型
2.1.2 內容區 2.1.3 邊框 border color 邊框顏色 border style 邊框樣式，也可以指定不同方向的邊框的樣式 2.1.4 內邊距 2.1.5 外邊距 通常左外邊距和上外邊距會移動自身，右外邊距和下外邊距會移動其他元素 2.2.1 水平布局 乙個元素在父元素中，水平布局...
CSS3盒子模型
在之前學習的css中，給盒子設定的內邊距與邊框最終會影響盒子的大小 div 在上述 中，我們給div盒子設定的是寬和高各200px，但是由於設定了邊框20px和內邊距50px，所以盒子最後的寬度和高度都應該是200 202 502 340px，執行結果如下圖所示 但是在css3中，我們可以設定內邊距...