在开发中，我们经常会使用%来作为一些css的属性值单位。那么我们知道他们具体到底依据什么来计算的具体的像素值的吗？
下面我们就来看一看吧。
%参考的应该是包含块(containing block)，即包含我们元素的块且它不必是直接的父元素。
width, height
这两个属性，他们都是相对包含块的width,height来计算的。这里的包含块并不是他们的直接父元素，而是根据position的一些定位来看元素被哪个父元素包裹。
<style> .grandparent { position: relative; width: 300px; height: 200px; background: blue; } .parent { width: 100px; height: 100px; background: yellow; } .child { position: absolute; width: 50%; height: 50%; top: 25%; left: 25%; background: red; } </style> <!-- 当一个元素为其宽度分配一个百分比值时， width 是基于包含块的width, height 是基于包含块的 height。 --> <div class="grandparent"> <div class="parent"> <div class="child"></div> </div> </div>
网络异常，图片无法展示
|
padding 水平和垂直
padding相关的属性，他们都是相对包含块的width来计算的。这里的包含块并不是他们的直接父元素，而是根据position的一些定位来看元素被哪个父元素包裹。
<style> .grandparent { position: relative; width: 300px; height: 200px; background: blue; } .parent { width: 100px; height: 150px; background: yellow; } .child { position: absolute; width: 50px; height: 50px; padding-left: 10%; padding-top: 10%; background: red; } </style> <div class="grandparent"> <div class="parent"> <div class="child"></div> </div> </div>
网络异常，图片无法展示
|
定位的top, left, right, bottom
left, right: 相对于包含块的width。
top, bottom: 相对于包含块的height。
<style> .grandparent { position: relative; width: 300px; height: 200px; background: blue; } .parent { width: 100px; height: 100px; background: yellow; } .child { position: absolute; width: 50%; height: 50%; top: 25%; left: 25%; background: red; } </style> <!-- 当一个元素为其宽度分配一个百分比值时， width 是基于包含块的width, height 是基于包含块的 height。 --> <div class="grandparent"> <div class="parent"> <div class="child"></div> </div> </div>
网络异常，图片无法展示
|
margin 水平和垂直
他们和padding一样，都是相对于包含块的width计算的。
<style> .grandparent { position: relative; width: 300px; height: 200px; background: blue; } .parent { width: 100px; height: 100px; background: yellow; } .child { position: absolute; display: inline-block; background: red; width: 20px; height: 20px; margin-top: 50%; margin-left: 50%; } </style> <div class="grandparent"> <div class="parent"> <div class="child"></div> </div> </div>
网络异常，图片无法展示
|
transform：translate()
相对于自身宽高。
<style> .grandparent { position: relative; width: 300px; height: 200px; background: blue; } .parent { width: 100px; height: 100px; background: yellow; } .child { position: absolute; width: 50px; height: 50px; transform: translate(25px, 25px); /* transform: translate(50%, 50%); */ background: red; } </style> <div class="grandparent"> <div class="parent"> <div class="child"></div> </div> </div>
网络异常，图片无法展示
|
backgroun-size
他也是相对于自身宽高。
<style> .parent { width: 300px; background: blue; height: 200px; } .child { background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.zhimg.com%2Fv2-08c763e8c299ff4fdc345d23f2da944b_r.jpg&refer=http%3A%2F%2Fpic4.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663586577&t=653c8a6f71b9aca5abd919f4e00ef432); background-size: 50% 50%; /* 这个是通过一些计算。让背景图片放在具体的位置 */ background-position: 50% 50%; /* background-position: 100% 100%; */ background-repeat: no-repeat; background-color: red; width: 100px; height: 200px; } </style> <div class="parent"> <div class="child"></div> </div>
网络异常，图片无法展示
|
font-size
这个属性有点特殊，他只和父元素的font-size值有关。
<style> .grandparent { position: relative; width: 300px; height: 200px; background: blue; font-size: 20px; } .parent { width: 100px; height: 100px; background: yellow; font-size: 40px; } .child { position: absolute; font-size: 100%; } </style> <div class="grandparent"> <div class="parent"> <div class="child">12345</div> </div> </div>
网络异常，图片无法展示
|
