什么是盒子呢？
- CSS處理網(wǎng)頁時，它認為每個元素都包含在一 個不可見的盒子里。
- 為什么要想象成盒子呢居砖？因為如果把所有的元 素都想象成盒子，那么我們對 網(wǎng)頁的布局就相 當于是擺放盒子驴娃。
- 我們只需要將相應的盒子擺放到網(wǎng)頁中相應的 位置即可完成網(wǎng)頁的布局奏候。
一個盒子我們會分成幾個部分：
- 內(nèi)容區(qū)(content)
- 內(nèi)邊距(padding)
- 邊框(border)
- 外邊距(margin)
內(nèi)容區(qū)
- 內(nèi)容區(qū)指的是盒子中放置內(nèi)容的區(qū)域，也就是元素 中的文本內(nèi)容唇敞，子元素都是存在于內(nèi)容區(qū)中的蔗草。
- 如果沒有為元素設置內(nèi)邊距和邊框，則內(nèi)容區(qū)大小 默認和盒子大小是一致的疆柔。
- 通過width和height兩個屬性可以設置內(nèi)容區(qū)的大 小咒精。
- width和height屬性只適用于塊元素。
內(nèi)邊距
- 顧名思義旷档，內(nèi)邊距指的就是元素內(nèi)容區(qū)與邊框以內(nèi) 的空間模叙。
- 默認情況下width和height不包含padding的大小。
- 使用padding屬性來設置元素的內(nèi)邊距鞋屈。
- 例如：
padding:10px 20px 30px 40px
這樣會設置元素的上范咨、右、下厂庇、左四個方向的內(nèi)邊距渠啊。
邊框
- 可以在元素周圍創(chuàng)建邊框，邊框是元素可見框的最外部权旷。
- 可以使用border屬性來設置盒子的邊框：
border:1px red solid;
上邊的樣式分別指定了邊框的寬度替蛉、顏色和樣式。- 也可以使用border-top/left/right/bottom分別指定上右下左 四個方向的邊框。
- 和padding一樣灭返，默認width和height并包括邊框的寬度。
外邊距
- 外邊距是元素邊框與周圍元素相距的空間坤邪。
- 使用margin屬性可以設置外邊距熙含。
- 用法和padding類似，同樣也提供了四個方向的 margin-top/right/bottom/left艇纺。
- 當將左右外邊距設置為auto時怎静，瀏覽器會將左右外 邊距設置為相等，所以這行代碼margin:0 auto可 以使元素居中黔衡。
邊框的樣式
邊框可以設置多種樣式：
- none（沒有邊框）
- dotted（點線）
- dashed（虛線）
- solid（實線）
- double（雙線）
- groove（槽線）
- ridge（脊線）
- inset（凹邊）
- outset（凸邊）
display
- 我們不能為行內(nèi)元素設置width蚓聘、height、 margin-top和margin-bottom盟劫。
- 我們可以通過修改display來修改元素的性 質(zhì)夜牡。
- 可選值：
block：設置元素為塊元素
nline：設置元素為行內(nèi)元素
inline-block：設置元素為行內(nèi)塊元素
none：隱藏元素（元素將在頁面中完全消失）
visibility
- visibility屬性主要用于元素是否可見。
- 和display不同侣签，使用visibility隱藏一個元 素塘装，隱藏后其在文檔中所占的位置會依然 保持，不會被其他元素覆蓋影所。
- 可選值：
visible：可見的
hidden：隱藏的
overflow
- 當相關(guān)標簽里面的內(nèi)容超出了樣式的寬度 和高度是蹦肴，就會發(fā)生一些奇怪的事情，瀏 覽器會讓內(nèi)容溢出盒子猴娩。
- 可以通過overflow來控制內(nèi)容溢出的情況阴幌。
- 可選值：
visible：默認值
scroll：添加滾動條
auto：根據(jù)需要添加滾動條
hidden：隱藏超出盒子的內(nèi)容
文檔流
- 文檔流指的是文檔中可現(xiàn)實的對象在排列時所占用的位置。
- 將窗體自上而下分成一行行卷中，并在每行中按從左至右的順序排 放元素矛双，即為文檔流。
- 也就是說在文檔流中元素默認會緊貼到上一個元素的右邊仓坞，如 果右邊不足以放下元素背零，元素則會另起一行，在新的一行中繼 續(xù)從左至右擺放无埃。
- 這樣一來每一個塊元素都會另起一行徙瓶，那么我們?nèi)绻朐谖臋n 流中進行布局就會變得比較麻煩。
