CSS 盒模型

CSS盒模型

CSS盒模型是一種樣式HTML元素的方式。每個(gè)HTML元素都是帶有邊框，邊距，填充和內(nèi)容的矩形框。

以下代碼顯示了元素中每個(gè)部分的布局。最外邊是邊距，然后是元素邊界，之后是填充，內(nèi)容是核心和內(nèi)部最多。

• Margin - 邊界外的透明區(qū)域。
• Border - 邊框在填充和內(nèi)容周?chē)?/li>
• Padding - 內(nèi)容周?chē)耐该鲄^(qū)域。
• Content - 實(shí)際文本和圖像。

元素的總寬度應(yīng)按如下方式計(jì)算：

Total element width = 
    width + 
    left padding + 
    right padding + 
    left border + 
    right border + 
    left margin + 
    right margin;

元素的總高度應(yīng)按如下計(jì)算：

Total element height = 
    height + 
    top padding + 
    bottom padding + 
    top border + 
    bottom border + 
    top margin + 
    bottom margin;

以下代碼將div元素的寬度設(shè)置為250px。填充是25px。

div {
    width: 250px;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
}