一俺祠、盒子模型
所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子瓦堵,也就是一個盛裝內(nèi)容的容器。每個矩形都由元素的內(nèi)容嗅蔬、內(nèi)邊距(padding)剑按、邊框(border)和外邊距(margin)組成疾就。
二、邊框
1艺蝴、設(shè)置內(nèi)容樣式屬性常用屬性值
上邊框: ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
border-top-style:樣式;?border-top-width:寬度;border-top-color:顏色;border-top:寬度 樣式顏色;
右邊框:
border-right-style:樣式; border-right-width:寬度;border-right-color:顏色虐译;
合寫: border-right:寬度 樣式顏色;
下邊框:
border-bottom-style:樣式; border-bottom-width:寬度;border-bottom-color:顏色;
合寫: border-bottom:寬度 樣式顏色;
左邊框:
border-left-style:樣式; border-left-width:寬度;border-left-color:顏色;
合寫:border-left:寬度 樣式顏色;
邊框樣式:none無(默認(rèn))、solid單實線吴趴、dashed虛線漆诽、dotted點線、double雙實線
綜合設(shè)置:border-style:上锣枝,右厢拭,下,左撇叁; 上供鸠,左右,下陨闹;上下楞捂,左右;上下左右.
注意: 設(shè)置邊框顏色時同樣必須設(shè)置邊框樣式趋厉,如果未設(shè)置樣式或設(shè)置為none寨闹,則其他的邊框?qū)傩詿o效。
常用的復(fù)合屬性有font君账、border繁堡、margin、padding和background等
多學(xué)幾招
1.表單的邊框通常改為0乡数;border:0 none;//兼容所有瀏覽器
2.表格的細(xì)線邊框table{ border-collapse:collapse; }
3.輪廓 (鏈接有虛線 和文本框有 藍(lán)色邊框)
outline-style:none;
三椭蹄、內(nèi)邊距
padding屬性用于設(shè)置內(nèi)邊距,也是復(fù)合屬性净赴,相關(guān)設(shè)置如下
padding-top:上內(nèi)邊距绳矩;padding-right:右內(nèi)邊距
padding-bottom:下內(nèi)邊距;padding-left:左內(nèi)邊距
padding:上內(nèi)邊距[右內(nèi)邊距下內(nèi)邊距左內(nèi)邊距]
內(nèi)邊距是享有背景色的玖翅。
圣誕樹: