css盒子模型是由內(nèi)容區(qū) ?? 內(nèi)邊距 ?? 外邊距 ?? 邊框組成的:
內(nèi)容區(qū):
內(nèi)容區(qū)是css盒子模型中放制內(nèi)容的區(qū)域郁稍,也就是元素中的文本內(nèi)容,子元素都是存在于內(nèi)容區(qū)中的较坛。
如果沒有為元素設(shè)置內(nèi)邊距和邊框, 則內(nèi)容區(qū)大小默認(rèn)和盒子大小是一致的。
當(dāng)內(nèi)容過多超出width和height時籽腕,可以使用overflow屬性來指定溢出處理方法。
通過width和height兩個屬性可以設(shè)置內(nèi)容區(qū)的大小 ?? width和height兩個屬性只適合用于塊元素纸俭。
內(nèi)邊距:
內(nèi)邊距就是指內(nèi)容區(qū)到邊框之間的空白皇耗。
默認(rèn)情況下width和height不包含padding的大小。
內(nèi)邊距分為四個方向:padding--top ?? padding--right? padding--bottom和padding--left.
邊框:
可以在元素周圍創(chuàng)建邊框揍很,邊框是元素可見框的最外部郎楼。
可以使用border屬性來設(shè)置盒子的邊框:
border:1px? solid? red;
和padding一樣万伤,默認(rèn)width和height并包括邊框的寬度。
邊框樣式:
none (沒有邊框)
dotted(點線)
dashed(虛線)
solid(實線)
double(雙線)
groove(槽線)
ridhe(脊線)
inset(凹線)
outset(凸線)
外邊距:
外邊距是元素邊框與周圍元素相距的空間箭启。
使用margin屬性可以設(shè)置外邊距壕翩。
padding和margin的區(qū)別在于:padding體現(xiàn)的是元素的“內(nèi)部結(jié)構(gòu)”,而margin體現(xiàn)的是元素之間的相互關(guān)系傅寡。