百分比的基准是谁？看css怎么规定

引子：用css，画一个圈圈

身为优秀的码农，今天想用css画一个圈圈。刚好学到了css中的百分比和负值，于是，跃跃欲试。首先，新建一个html文件，先来写css样式：

.circle {
  width: 100%;
  height: 100%;
  border: 1px solid red;
  border-radius: 50%;
  box-sizing: border-box;
}

<div class="circle"></div>

运行html，嗯…，为啥是一个方块？好吧，于是我试着在<div>中加入display:inline-block;。神奇的事情发生了，一个完美的红色圆圈赫然眼前。

啊哈，原来要让div成为一个内联块元素才能成为一个圈圈。好，接着来。在css中尝试一下给圈圈一个margin-left: -50%，期待这个圈圈能够水平居中。然而，不出所料，并未如愿。

经过上面的折腾，你对百分比和负值这两个css属性有了进一步的思考，开始怀疑自己的理解是否正确。

拨开云雾：百分比的基准是谁？

css中的百分比其实并不神秘，它的基准是其父级元素的大小。也就是说，当元素的height、width设置为百分比时，分别基于包含它的块级对象的高度、宽度。这个是常规百分比的含义。

/* div的父元素为body */
.container {
  width: 500px;
  height: 500px;
  border: 1px solid black;
}

.circle {
  width: 50%;
  height: 50%;
  border: 1px solid red;
  border-radius: 50%;
  box-sizing: border-box;
}

<div class="container">
  <div class="circle"></div>
</div>

由于.circle的父元素是.container，所以它的width: 50%和height: 50%分别基于.container的width和height。最终的效果是一个边长为250px的红色圆圈。

若想实现水平居中，还得利用负值。

锦上添花：负值在css布局中的妙用

css中的负值经常用在偏移和定位中。在刚才的例子中，为.circle设置margin-left: -50%;时，实际上是让其向左偏移了自身的一半宽度，从而达到了水平居中的效果。

/* div的父元素为body */
.container {
  width: 500px;
  height: 500px;
  border: 1px solid black;
}

.circle {
  width: 50%;
  height: 50%;
  border: 1px solid red;
  border-radius: 50%;
  box-sizing: border-box;
  margin-left: -50%;
}

<div class="container">
  <div class="circle"></div>
</div>

可以看出，负值在css布局中可以起到非常重要的作用。

总之，css中的百分比和负值在布局和元素样式设置方面非常有用。掌握好这两个属性的使用，能够帮助你构建出更美观、更复杂的页面。