列表
list-style
可以設(shè)置的屬性(按順序): list-style-type, list-style-position, list-style-image
盒子模型
- Margin(外邊距) - 清除邊框外的區(qū)域,外邊距是透明的减细。
- Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框匆瓜。
- Padding(內(nèi)邊距) - 清除內(nèi)容周?chē)膮^(qū)域,內(nèi)邊距是透明的未蝌。
- Content(內(nèi)容) - 盒子的內(nèi)容驮吱,顯示文本和圖像
瀏覽器兼容問(wèn)題
- 根據(jù) W3C 的規(guī)范,元素內(nèi)容占據(jù)的空間是由 width 屬性設(shè)置的萧吠,而內(nèi)容周?chē)?padding 和 border 值是另外計(jì)算的左冬。
- IE5.X 和 6 瀏覽器的 width 屬性是內(nèi)容、內(nèi)邊距和邊框的寬度的總和纸型。
- 解決:不要給元素添加具有指定寬度的padding拇砰,而是嘗試將padding或margin添加到元素的父元素和子元素。
IE8 及更早IE版本不支持設(shè)置填充的寬度和邊框的寬度屬性狰腌。解決IE8及更早版本不兼容問(wèn)題可以在HTML頁(yè)面聲明 <!DOCTYPE html>即可除破。
border邊框
p{ border:5px solid red;}
border-style:屬性1,屬性2琼腔,屬性3瑰枫,屬性4
上->右->下->左
border-style:屬性1,屬性2丹莲,屬性3
上->左右->下
border-style:屬性1光坝,屬性2
上下->左右
border-style:屬性1
上下左右屬性相同
outline(輪廓)
是繪制于元素周?chē)囊粭l線(xiàn)尸诽,位于邊框邊緣的外圍,可起到突出元素的作用盯另。
屬性分別是(按順序):outline-color, outline-style, outline-width
margin定義元素周?chē)目臻g
div{ margin:100px 50px;}
padding
p
{
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}