CSS基础（四）：盒模型

迈不过友情╰ 2022-05-24 08:57 219阅读 0赞

**CSS盒模型**

HTML文档中可以将每个元素都看作是长方形的盒子。而CSS盒模型规定了元素框处理元素内容content、内边距padding、边框border和外边距margin的方式。下图是W3C对于盒模型的描述图。

![aHR0cHM6Ly9pbWFnZXMwLmNuYmxvZ3MuY29tL2Jsb2cvMzQ5NjM2LzIwMTMwOS8yNzA5MjQ1NS00MDVmYTlhYzc3NDU0ZDAwOTA1MDc4Y2E5NDIzNGJjOS5naWY][]

使用Firebug，可以轻松地查看到盒子的布局大小。

![format_png][]

盒子本身的大小是这样计算的：

width: width + padding-left + padding-right + border-left + border-right

height: height + padding-top + padding-bottom + border-top + border-bottom

**静态定位或相对定位的盒子**

当放置一个块级元素于页面上时，并且不设置它的定位属性(relative,absolute,fixed),即position:static,或者设置了position:relative的情况下，块的宽度是延伸自动填充满它的父元素的宽度区域。

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>盒子模型</title>
        <style type="text/css">
          .box1
            { 
                background:black;
                color:White;
                height:100px;
                padding:10px;
                border:20px solid Red;
                margin:30px;
            }
        </style>
      </head>
    
      <body>
        <h2>静态定位和相对定位的盒子</h2>
        <div class="box1">静态定位和相对定位的盒子</div>
      </body>
    </html>

![format_png 1][]

注意上面的盒子是没有声明宽度的，所以默认宽度为100%，padding 和 border 会向内推动，而不是向外扩展。

但是当声明宽度后，那么 padding 就会向外延展。

**浮动和绝对定位的盒子**

当设置浮动float元素和绝对定位元素，他们的结果却恰恰相反，他们会收缩以致包裹紧贴内容。

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>盒子模型</title>
        <style type="text/css">
          .box1
            { 
                background:black;
                color:White;
                height:100px;
                padding:10px;
                border:20px solid Red;
                margin:30px;
    
                position:absolute;
            }
        </style>
      </head>
    
      <body>
        <h2>浮动和绝对定位的盒子</h2>
        <div class="box1">浮动和绝对定位的盒子</div>
      </body>
    </html>

![format_png 2][]

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[aHR0cHM6Ly9pbWFnZXMwLmNuYmxvZ3MuY29tL2Jsb2cvMzQ5NjM2LzIwMTMwOS8yNzA5MjQ1NS00MDVmYTlhYzc3NDU0ZDAwOTA1MDc4Y2E5NDIzNGJjOS5naWY]: /images/20220524/915a913249f945b0819bdca327af71fb.png
[format_png]: /images/20220524/53fdb749ed3e4bab8c32681e841e9dbe.png
[format_png 1]: /images/20220524/173914d0a17e4b5b8348493f255b475f.png
[format_png 2]: /images/20220524/1ea01c53d2154b468672a047d360eda5.png
[20191229112121499.png]: /images/20220524/42c074f7cee74524b9d109cd28e8ef14.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220524/5e8bb83878694c3d81f443eb2f9b9a04.png