CSS3盒子模型

2.1.2、內容區

2.1.3、邊框

border-color：邊框顏色

border-style：邊框樣式，也可以指定不同方向的邊框的樣式

2.1.4、內邊距

2.1.5、外邊距

通常左外邊距和上外邊距會移動自身，右外邊距和下外邊距會移動其他元素

- 乙個元素在父元素中，水平布局必須要滿足

- 左外邊距+左邊框+左內邊距+內容寬+右內邊距+右邊框+右外邊距=父元素內容區寬度
- 以上等式必須滿足，若相加結果等式不成立，則稱為過度約束，等式會自動調整
- 如果這七個值中沒有auto的情況，則瀏覽器會自動調整右外邊距使得等式滿足
- 如果某個值為auto，則會自動調整為auto的值，使得等式成立

指定寬度後，將左右外邊距設定為auto可以將元素在父元素中居中顯示

- 預設情況下父元素的高度被內容撐開

- 子元素是在父元素的內容區中排列的
- 如果子元素的大小超過了父元素，則子元素會從父元素中溢位
- 在父元素中使用overflow屬性設定父元素如何處理溢位的子元素
- visible：預設值，在父元素外部顯示
- hidden：裁剪溢位的部分
- scroll：顯示滾動條，會生成垂直和水平兩個滾動條
- auto：根據需要生成滾動條
- overflow-x：只處理水平方向溢位
- overflow-y：只處理垂直方向溢位

- 行內元素不支援設定寬度和高度

- 可以設定padding、border、margin，但是垂直方向不會影響其他元素的位置

inline：將元素設定為行內元素

block：將元素設定為塊元素
inline-block：將元素設定為行內塊元素，既可以設定寬高，又不會獨佔一行
table：將元素這只為**
none：元素不在頁面中顯示

visible：元素在頁面中正常顯示

hidden：隱藏元素，依然占用空間

CSS 3 盒子模型

盒子模型解釋 元素在頁面中顯示成乙個方塊，類似乙個盒子，css盒子模型就是使用現實中盒子來做比喻，幫助我們設定元素對應的樣式。盒子模型示意圖如下 把元素叫做盒子，設定對應的樣式分別為 盒子的寬度 width 盒子的高度 height 盒子的邊框 border 盒子內的內容和邊框之間的間距 paddi...

CSS （3）盒子模型

盒模型 盒子模型 框模型 box model css將網頁的所有元素都設定為乙個矩形的盒子 將元素設定為矩形的盒子後，對頁面的布局就變成將不同的盒子擺放到不同的位置 每乙個盒子都由以下幾個部分 內容區 content 內邊距 padding 邊框 border 外邊距 margin 內容區 cont...

CSS3盒子模型

在之前學習的css中，給盒子設定的內邊距與邊框最終會影響盒子的大小 div 在上述 中，我們給div盒子設定的是寬和高各200px，但是由於設定了邊框20px和內邊距50px，所以盒子最後的寬度和高度都應該是200 202 502 340px，執行結果如下圖所示 但是在css3中，我們可以設定內邊距...