一個盒子我們會分成幾個部分：
內(nèi)邊區(qū)(content)
內(nèi)邊距(padding)
邊框(border)
外邊距(margin)
內(nèi)容區(qū)
內(nèi)容區(qū)指的是盒子中放置內(nèi)容的區(qū)域姻蚓，也就是元素中的文本內(nèi)容冬三，子元素都是存在于內(nèi)容區(qū)中的脆烟。
如果沒有為元素設(shè)置內(nèi)邊距和邊框，則內(nèi)容區(qū)大小默認(rèn)和盒子大小是一致的。
通過width和height兩個屬性可以設(shè)置內(nèi)容區(qū)的大小跪但。
width和height屬性只適用于塊元素狈癞。
內(nèi)邊距
內(nèi)邊距指的是元素內(nèi)容區(qū)與邊框以內(nèi)的空間茄靠。
默認(rèn)情況下width和height不包含padding的大小。
使用padding屬性來設(shè)置元素的內(nèi)邊距
padding:10px 20px 30px 40px
設(shè)置元素的上蝶桶、右慨绳、下、左四個方向的內(nèi)邊距真竖。
padding:10px 20px 30px;
設(shè)置元素的上脐雪、左右、下四個方向的內(nèi)邊距恢共。
padding:10px 20px;
設(shè)置元素的上下战秋、左右四個方向的內(nèi)邊距。
padding:10px
設(shè)置元素上下左右四個方向的內(nèi)邊距讨韭。
同時在css中還提供了padding-top脂信、padding-right、padding-left透硝、padding-bottom分別用來指定四個方向的內(nèi)邊距狰闪。
邊框
可以在元素周圍創(chuàng)建邊框，邊框是元素可見框的最外部濒生。
可以使用border屬性來設(shè)置盒子的邊框埋泵。
和padding一樣，默認(rèn)width和height并包括邊框的高度甜攀。
border：1px red solid
分別指定了邊框的寬度秋泄、顏色、樣式规阀。
使用border-top/left/right/bottom分別指定上左右下四個邊框的方向恒序。
邊框的多種樣式
--none? 沒有邊框
--dotted? 點(diǎn)線
--dashed? 虛線
--solid 實(shí)線
--double 雙線
--groove 槽線
--ridge? 脊線
--inset? 凹邊
--outset? 凸邊
外邊距
外邊距是元素邊框與周圍元素相距的空間。
使用margin屬性可以設(shè)置外邊距谁撼。
使用margin-top/right/left/bottom為元素設(shè)置四個方向歧胁。
使用margin：0 auto 可以使元素居中滋饲。
display
通過display來修改元素的性質(zhì)。
--block:設(shè)置元素為塊元素
--inline：設(shè)置元素為行內(nèi)元素
--inline-block:設(shè)置元素為行內(nèi)塊元素
--none: 隱藏元素
visibility
visibility屬性主要用于元素是否可見
-visible:可見的
-hidden: 隱藏的
overflow
當(dāng)相關(guān)標(biāo)簽里面的內(nèi)容超出了樣式的寬度和高度使喊巍，就會發(fā)生一些奇怪的事情屠缭，瀏覽器會讓內(nèi)容溢出盒子。
可以通過overflow來控制內(nèi)容溢出的情況崭参。
可選值：
*--visible:默認(rèn)值
--scroll:添加滾動條
--auto:根據(jù)需要添加滾動條
--hidden:隱藏超出盒子的內(nèi)容
文檔流
文檔流指的是文檔中可實(shí)現(xiàn)的對象在排列時所占用的位置呵曹，
將窗體自上而下分為一行行，并在每行中按從左至右的順序排放元素何暮，即為文檔流奄喂。
也就是說在文檔流中元素默認(rèn)會緊貼到上一個元素的右邊，如果右邊不足以放下元素海洼，元素則會另起一行跨新，在新的一行中繼續(xù)從左至右擺放。
這樣一來每一個塊元素都會另起一行坏逢，那么我們?nèi)绻朐谖臋n流中進(jìn)行布局就會變得比較麻煩域帐。
