CSS基础（四）：盒模型

时间 2019-12-04

标签 css 基础模型栏目 CSS 繁體版

原文原文链接

CSS盒模型css

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

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

盒子自己的大小是这样计算的：url

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

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

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

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

<!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>

注意上面的盒子是没有声明宽度的，因此默认宽度为100%，padding 和 border 会向内推进，而不是向外扩展。utf-8

可是当声明宽度后，那么 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>

亲眼目击一下

想看看组成页面的每一个单独的“盒子”吗？试着把这行代码暂时放入样式表：

* { border: 1px solid red !important; }

做者： ForEvErNoME
出处： http://www.cnblogs.com/ForEvErNoME/
欢迎转载或分享，但请务必声明文章出处。若是文章对您有帮助，但愿你能推荐或关注