CSS 盒模型

CSS 盒模型1 个文件更新于 2026-04-06
html公开前 25 行,完整代码需登录
<html>
  <head>
    <meta charset="utf-8">
    <title>盒模型类型</title>
  </head>
  <body>
    <div class="title">标准盒模型 content-box</div>
    <div class="box-container">
      <div class="margin-top">margin-top</div>
      <div class="box box-sizing-content">
        <div class="padding-top">padding-top</div>
        <div class="box-content">Content</div>
        <div class="padding-bottom">padding-bottom</div>
        <div class="width-css"><span>width</span></div>
        <div class="height-css"><span>height</span></div>
        <div class="border">border</div>
      </div>
      <div class="margin-bottom">margin-bottom</div>
    </div>

    <div class="title" style="padding-top: 80px">
      IE 盒模型 border-box
    </div>
    <div class="box-container">
      <div class="margin-top">margin-top</div>

登录后可以查看完整源码、在线编辑并实时预览运行效果。