CSS 盒模型

2018-01-16 16:12 更新

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;
}


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号