CSS的百分比，你知道多少？

最新推荐文章于 2022-10-09 17:27:29 发布

C860

最新推荐文章于 2022-10-09 17:27:29 发布

阅读量2.8k

点赞数

分类专栏： HTML/CSS 文章标签： css

本文链接：https://blog.csdn.net/C860_zy/article/details/24032831

版权

HTML/CSS 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

文章开始，先提几个问题，且看代码：

    
    body {
        font: 16px/30px sans-serif;
    }
    .box {
        width: 1000px;
        height: 500px;
        background: #808080;
        margin: 0 auto;
    }
    .item {
        width: 20%;
        height: 50%;
        padding: 10%;
        margin-left: 10%;
        font-size: 200%;
        background: orange;
    }

    <div class="box">
        <div class="item">
            这个页面是为了验证CSS中各种尺寸使用百分比时的参照对象是什么
        </div>
    </div>

请告诉我，item类的width，height，padding，margin-left的实际尺寸值各是多少？它的文字大小和行高又是多少？如果你能很确定自己的答案，那么这篇文章你就可以不看了。答案我这里不会公布的，因为如果你真的对自己有信心，那么相信你是不需要答案的。

回到正题，在文章最后我会附上我自己写的一个DEMO，那个demo比上面的例子更详细。大家想深入了解的话可以去看看我的demo。

其实CSS中的百分比很好理解。且让我一个个跟你解释

且看代码：

.parent {
  width: 200px;
}
.child {
  width: 50%;
}

<div class="parent">
  <div class="child">
    这个容器的宽度是100px
  </div>
</div>

上面的例子中child的宽度是100px，因为其上一个设置了width的父元素是parent，width的值为200px，固按照百分比转换，child的宽度为100px。这个很简单，没什么好说。再看代码，在上面例子的HTML结构的基础上，我们更改其CSS的值：

.parent {
  width: 200px;
  height: 100px;
}
.child {
  width: 50%;
  height: 50%;
}

上面的代码中，child的width和height的值各是多少呢？你会脱口而出么——width=100px, height=50px！

再看代码：

.parent {
  width: 200px;
  height: 100px;
}
.child {
  width: 80%;
  height: 80%;
}
.childchild {
  width: 50%;
  height: 50%;
}

<div class="parent">
  <div class="child">
    <div class="childchild">
      这个容器尺寸是多少呢？
    </div>
  </div>
</div>

且猜猜看，childchild的那个容器尺寸是多少？这里没有卖关子，是80x40。这个例子主要想说明，容器的CSS百分比尺寸始终依赖于父元素。

来个复杂的：

.parent {
  padding: 100px;
  width: 200px;
}
.child {
  padding: 20%;
  margin: 5% 10%;
  width: 50%;
  height: 50%;
}

你猜你猜你猜猜猜，猜到了么？padding=40px , margin-left=margin-right=10px , margin-top=margin-bottom=20px , width=100px , height=未知，你猜对了么？到这里，其实基本上可以确定一个问题了。那么就是， padding,margin,width这些属性的百分比值始终是以父容器的宽度为基准的，而height是以父容器的高度为基准（若父容器没有设置高度，即height值为auto，则浏览器会设置子容器的height属性为auto）。

接下来说说font-size和line-height，说到这两个属性，这里就不举例子了。font-size和line-height仍然是参照父容器的属性，只不过大家要清楚的是font-size的改变并不会影响line-height。所以在文章开始的例子中我是设了一个陷阱(*^__^*) 嘻嘻……

最后附上我自己的demo：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    body {
        font: 16px/30px sans-serif;
    }
    .box {
        width: 1000px;
        height: 500px;
        background: #808080;
        margin: 0 auto;
    }
    .item {
        width: 20%;
        height: 50%;
        padding: 10%;
        margin-left: 10%;
        background: orange;
    }
    .item2 {
        margin-left: 10%;
    }
    .item3 {
        margin-left: 20px;
    }
    .item4 {
        font-size: 200%;
        margin-top: 10%;
    }
    .item5 {
        font-size: 32px;
        margin-top: 10%;
    }
    .item6 {
        font-size: 64px;
        margin-top: 10%;
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="item">
            这个页面是为了验证CSS中各种尺寸使用百分比时的参照对象是什么<br>
            <span class="item2">行内元素</span><br>
            <span class="item3">行内元素2</span>
            <ul class="item4">
                <li>块级元素3</li>
            </ul>
            <ul class="item5">
                <li>块级元素4</li>
                <ul class="item4">
                    <li>5</li>
                </ul>
                <ul class="item6">
                    <li>6</li>
                </ul>
            </ul>
        </div>
    </div>
</body>
</html>