CSS 2. 盒模型|浮动

盒模型：在网页中基本上都会显示一些方方正正的盒子，这种盒子就被我们称为盒模型。重要的属性： width,height,padding,border, margin

盒子模型通过四个边界来描述：margin（外边距），border（边框），padding（内填充，内边距，壳子-边框），content（内容区域）

width: 指的是内容的宽度，而不是整个盒子真实的宽度；height: 指的是内容的高度，而不是整个盒子真实的高度。

CSS 2. 盒模型|浮动

做一个宽度402*402的盒子，你应该如何设计？盒模型的计算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒模型的计算</title>
    <style type="text/css">
        /*div{
            width: 400px;
            height: 400px;
            border: 1px solid red;
        }*/
        div{
            width: 50px;
            height: 50px;
            border: 1px solid red;
            padding: 175px;
        }
        /*div{
            width: 0;
            height: 0;
            border: 1px solid red;
            padding: 200px;
        }*/
    </style>
    <!-- 如果想保证盒子的真实宽度，加width应该减padding  减width 应该加padding -->
</head>
<body>
    <div>
        内容
    </div>
</body>
</html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>背景</title>
 6 
 7     <style type="text/css">
 8         /* 1000*1000 */
 9         #img{
10             width: 990px;
11             height: 980px;
12 
13             background: red;
14             padding-top: 10px;
15             border: 5px solid black;
16 
17         }
18 
19     </style>
20 </head>
21 <body>
22     <div id="img"></div>
23 </body>
24 </html>

View Code