很多人css数值(百分比|负值)基准分不清，今天给你讲讲

今天为什么要给大家讲解这个东西呢，由于css这部分，尤其是数值这部分感觉非常简单，但是尤其是简单的，却很多人根本就没有弄懂。所以今天就来讲一下css的数值问题吧。大家还是好好听一下吧。

width height 百分比

当元素的height、width设置为百分比时，分别基于包含它的块级对象的高度、宽度。这个是常规百分比的含义。

<div class="container">  <div class="inner">注意这里</div>  <div class="divider">我是分割线</div></div>.container{  width: 500px;  height: 300px;  border: 1px solid grey;}.inner{  background: lightblue;  text-align: center;  width: 50%;  height: 50%;}.divider{  border-top: 1px solid lightblue;  text-align: center;}

margin 百分比

假设一个块级容器，宽 500px，高 300px，块级子元素定义 margin:10% 5%;，你觉得 margin 的 top, right, bottom, left 计算值最终是多少？

我们来实际看一下

<div class="container">  <div class="inner">注意这里</div>  <div class="divider">我是分割线</div></div>.container{  width: 500px;  height: 300px;  border: 1px solid grey;}.inner{  margin: 10% 10%;  background: lightblue;  text -align: center;}.divider{  border-top: 1px solid lightblue;  text-align: center;}

结果出来了，50px 50px 50px 50px，并不是50px 30px 50px 30px

为什么

CSS权威指南中的解释：

我们认为，正常流中的大多数元素都会足够高以包含其后代元素（包括外边距），假如一个元素的上下外边距是父元素的height的百分数，即可能导致一个无限循环，父元素的height会添加，以适应后代元素上下外边距的添加，而相应的，上下外边距由于父元素height的添加也会添加。

margin 的百分比值参照其包含块的宽度进行计算。

当书写模式变成纵向的时候，其参照将会变成包含块的高度。我们改变一下上面例子中的 CSS 书写模式：

.container{  width: 500px;  height: 300px;  border: 1px solid grey;  writing-mode: vertical-lr;}

这时的结果为：30px 30px 30px 30px

也就是说书写模式影响 margin 百分比的参照对象。

padding 百分比

同上 Î

举个例子看看效果。注意，这是纵向排列的例子。

注意这里

我是分割线

同上一个例子相比， 左侧元素占位区域并没有扩大，仅仅是因为margin 改为padding 导致背景区域扩大而已。

因而，padding的百分比不是相对于自身，而是当书写模式为默认横向排列时，相对最近父元素的宽度，书写模式为writing-mode: vertical-lr; 纵向排列时，百分比相对于父元素高度

width、padding 联合百分比

单用一个很简单，但假如联合，可能就会有问题了。这里我不禁要问一句：

兄弟，你听过盒模型么？

• W3C的标准盒模型 box-sizing: content-box，默认属性 设置的width或者height是对 实际内容（content）的width或者height进行设置，内容附近的border和padding另外设置
• 怪异盒模型 box-sizing: border-box 设置的width或者height是对 实际内容（content）+内边距（padding）+边框（border）之和

现在，我们来看个栗子，其中内部元素width设为100%， padding设为10%

<div class="container">  <div class="inner"><div class="text">注意这里</div></div>  <div class="divider">我是分割线</div></div>.container{  width: 500px;  height: 300px;  border: 1px solid grey;}.inner{  background: lightblue;  text-align: center;  width: 100%;  padding: 10% 10%;  box-sizing: content-box; // 补上这里是由于有些环境默认不是标准盒模型}.divider{  border-top: 1px solid lightblue;  text-align: center;}.text{  background: yellow;}

在标准盒模型下，width: 100%; padding: 10% 10%; 会导致内部元素溢出，假如遇到这种情况，一般都会使用怪异盒模型，即设置box-sizing: border-box，这时候width的值是会包含padding的距离的。你可以自己打开控制台试试，这里就不举例了。

top、left、right、bottom 百分比

还是看图说话

<div class="container">  <div class="inner"></div></div>.container{  width: 500px;  height: 300px;  border: 1px solid grey;  position: relative;}.inner{  width: 200px;  height: 100px;  background: lightblue;  top:10%;  left: 10%;  position: absolute;}

可以很显著的看出，left相对于父元素宽度，top相对于父元素高度。同理可推出right相对于父元素宽度，bottom相对于父元素高度。

translate百分比

在translate 函数当中使用百分比是以该元素自身的宽高作为基准。

当子元素的width和height未知时，无法通过设置margin-left:-width/2和margin-top:-height/2来实现，这时候可以设置子元素的transform: translate(-50%,-50%)。

<div class="container">  <div class="inner"></div></div>复制代码.container{  width: 500px;  height: 300px;  border: 1px solid grey;  position: relative;}.inner{  width: 50%;  height: 50%;  background: lightblue;  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%,-50%);}

translate 属性和绝对定位、相对定位属性加上 top、left 数值都可以使元素产生位移，但存在细微差别，体现在offsetLeft 和 offsetTop 属性。

使用绝对定位、相对定位属性加上 top、left ，会影响offsetTop和 offsetLeft 的值；

使用 translate 的offsetTop和 offsetLeft 与没有产生位移的元素没有区别，即无论translate 的值为多少，offsetTop和 offsetLeft 的值都是固定不变的。

margin为负值

1. margin-left,margin-right为负值

• 元素本身没有宽度，会添加元素宽度

<div class="container">  <div class="inner">里层的元素设置了margin-right:-100px</div></div>.container{  width: 500px;  height: 200px;  border: 1px solid grey;  margin-left: 100px;}.inner{  height: 100px;  background: lightblue;  margin-left: -100px;}

里层的元素设置了margin-left:-100px

• 元素本身有宽度，会产生位移 补充inner元素宽度属性

.inner{  height: 100px;  background: lightblue;  margin-left: -100px;  width: 100%;}

里层的元素设置了margin-left:-100px

1. margin-top为负值，不论能否设置高度，都不会添加高度，而是会产生向上的位移

.inner{  height: 100px;  background: lightblue;  margin-left: -100px;  width: 100%;}

里层的元素设置了margin-top:-100px

1. margin-bottom为负值的时候不会位移,而是会减少自身供css读取的高度.

<div class="container">  <div class="inner">里层的元素设置了margin-bottom:-100px</div>  <div>这里是下一个元素</div></div>.inner{  height: 150px; // 此处height变为150px  background: lightblue;  margin-bottom: -100px;  width: 100%;}

里层的元素设置了margin-bottom:-100px

这里是下一个元素

那么，你觉得负值改为负百分比又是什么情况呢？欢迎留言

padding 为负值

很遗憾，padding不允许指定为负，指定了也无效～

更多优质文章请关注我的知乎：打造小白进阶web前台高级工程师资料库，看完学的更加快，知识更牢固。你值得拥有（持续升级）~