html 盒子 w3c,CSS 盒模型

CSS盒模型

CSS盒模型是一种样式HTML元素的方式。每个HTML元素都是带有边框，边距，填充和内容的矩形框。

以下代码显示了元素中每个部分的布局。最外边是边距，然后是元素边界，之后是填充，内容是核心和内部最多。Margin - 边界外的透明区域。

Border - 边框在填充和内容周围。

Padding - 内容周围的透明区域。

Content - 实际文本和图像。

元素的总宽度应按如下方式计算：Total element width =

width +

left padding +

right padding +

left border +

right border +

left margin +

right margin;

元素的总高度应按如下计算：Total element height =

height +

top padding +

bottom padding +

top border +

bottom border +

top margin +

bottom margin;

以下代码将div元素的宽度设置为250px。填充是25px。div {

width: 250px;

padding: 25px;

border: 25px solid navy;

margin: 25px;

}