CSS中的盒子
盒子
盒子模型解釋
元素在頁面中顯示成一個方塊，類似一個盒子，CSS盒子模型就是使用現實中盒子來做比喻，幫助我們設置元素對應的樣式。盒子模型示意圖如下：
把元素叫做盒子，設置對應的樣式分別為：盒子的邊框(border)、盒子內的內容和邊框之間的間距(padding)、盒子與盒子之間的間距(margin)。
盒子模型的尺寸
按照下面代碼制作頁面：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>盒子的真實尺寸</title><style type="text/css">.box01{width:50px;height:50px;background-color:gold;}.box02{width:50px;height:50px;background-color:gold;border:50pxsolid #000}.box03{width:50px;height:50px;background-color:gold;border:50pxsolid #000;padding: 50px;}</style> </head> <body><div class="box01">1</div><br /><div class="box02">2</div><br /><div class="box03">3</div> </body> </html>頁面顯示效果如下：
通過上面的頁面得出結論：盒子的width和height設置的是盒子內容的寬和高，不是盒子本身的寬和高，盒子的真實尺寸計算公式如下：
- 盒子寬度 = width + padding左右 + border左右
- 盒子高度 = height + padding上下 + border上下
思考題：
在布局中，如果我想增大內容和邊框的距離，又不想改變盒子顯示的尺寸，應該怎么做？
也就是使用padding時會讓改變當前元素的尺寸,可以使用
box-sizing：content-box | border-box
默認值：content-box
課堂練習 請制作圖中所示的標題：
margin相關技巧
1、設置元素水平居中： margin:x auto;
2、margin負值讓元素位移及邊框合并
外邊距合并
外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。解決方法如下：
1、使用這種特性
2、設置一邊的外邊距，一般設置margin-top
3、將元素浮動或者定位
margin-top 塌陷
在兩個盒子嵌套時候，內部的盒子設置的margin-top會加到外邊的盒子上，導致內部的盒子margin-top設置失敗，解決方法如下：
1、外部盒子設置一個邊框
2、外部盒子設置 overflow:hidden
3、使用偽元素類：
總結
- 上一篇： 电脑键盘练习_电脑新手最关心的：零基础如
- 下一篇： CSS 基本样式