盒子
內(nèi)容區(qū)域設(shè)定:width:寬度的設(shè)定各聘,height:高度的設(shè)定寓娩。寬度和高度的設(shè)定可以是個體的數(shù)值(帶單位),也可以是百分比設(shè)置堕仔。
內(nèi)邊距(padding)的設(shè)定:
.盒子的內(nèi)邊距為上右下左四個方向
.內(nèi)邊距的設(shè)定用來控制盒子中裝載的內(nèi)容到盒子邊緣(邊框)之間的距離擂橘。
.盒子的內(nèi)邊距占據(jù)的是盒子里面的空間,最小為0摩骨,不允許出現(xiàn)負(fù)值通贞。
內(nèi)邊距(padding)復(fù)合屬性:
padding-top:上內(nèi)邊距
padding-right:右內(nèi)邊距
padding-bottom:下內(nèi)邊距
padding-left:左內(nèi)邊距
外邊距(margin)的設(shè)定:
盒子的外邊距分為上右下左四個方向
外邊距的設(shè)定用來控制盒子外圍四周的距離,不屬于本身范疇
外邊距的主要用途是控制盒子的位置(如用的比較多的margin:0 auto恼五,表示盒子居中昌罩,即上下為0,左右自動)灾馒,所以可以出現(xiàn)負(fù)值茎用。
外邊距(margin)復(fù)合屬性:
margin-top:上外邊距
margin-right:右外邊距
margin-bottom:下外邊距
margin-left:左外邊距
邊框(border)的設(shè)定:
.大部分的元素對象在默認(rèn)情況下是沒有邊框的
.要設(shè)定邊框,必須同時設(shè)定3個要素:寬度睬罗、樣式轨功、和色彩。(如border:1px solid red)
邊框(border)復(fù)合屬性
1傅物、邊框按方向分類的擴展屬性
.border-top:上邊框
.border-right:右邊框
.border-bottom:下邊框
.border-left:左邊框
2夯辖、邊框按屬性要素分類的擴展屬性
.border-width:邊框?qū)挾?
.border-style:邊框樣式
.border-color:邊框色彩
3、邊框樣式的設(shè)定
none: 無輪廓董饰。border-color將被忽略蒿褂,border-width計算值為0,除非邊框輪廓為圖像卒暂,即border-image啄栓。
hidden: 隱藏邊框。IE7及以下尚不支持
dotted: 點狀輪廓也祠。IE6下顯示為dashed效果
dashed: 虛線輪廓昙楚。
solid: 實線輪廓
double: 雙線輪廓。兩條單線與其間隔的和等于指定的border-width值
web前端開發(fā)盒子模型的計算:
標(biāo)準(zhǔn)盒子的尺寸計算
.盒子自身的尺寸:內(nèi)容的寬高+兩側(cè)內(nèi)邊距+兩側(cè)邊框
.盒子在頁面中占位的尺寸:內(nèi)容的寬高+兩側(cè)內(nèi)邊距+兩側(cè)邊框+兩側(cè)外邊距