详解CSS中的percentage百分比值使用方法
- 高洛峰原创
- 2017-03-09 16:33:262522浏览
一起来了解CSS中的percentage百分比值使用方法
百分比值是CSS中设计各种元素尺寸以及页面布局的基础手段,这里就带大家来彻底掌握CSS中的percentage百分比值使用,包括percentage转px的方法等,here we go~
百分比旨在相对于父元素的相同属性的大小。
如果用来设置字体，则相对的就是父元素的字体大小。
大多数浏览器中100db36a723c770d327fc0aef2ce13b1 和6c04bd5ca3fcae76e30b72ad730ca86d 标签中的默认字体尺寸是100%.
html {font-size: 100%;}
body {font-size: 100%;}
100% = 1em = 16px = 12pt
如果用来设置宽和高等非字体尺寸，则以百分比为单位的长度值是基于具有相同属性的父元素的长度值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
p.parent {
margin:150px;
width: 200px;
height: 200px;
border: 1px solid blue;
}
p.child {
width: 50%;
height: 50%;
border: 1px dashed black;
}
</style>
</head>
<body>
<p class="parent">
<p class="child"></p>
</p>
</body>
</html>
再啰嗦一点关于父元素的问题：何为父元素，相对定位（relative），绝对定位（absolute），浮动（float），固定（fixed）中如何找寻父元素？
由于HTML是树形结构，标签套标签，一般情况下的父子关系很明朗。
<p class="parent">
<p class="child"></p>
</p>
1.相对定位元素，它的父元素符合标签嵌套。
2.绝对定位元素，它的父元素是离它最近的定位元素（绝对定位，相对定位，固定，但不包括浮动）或者视窗尺寸（没找到定位元素时）。
3.浮动元素，它的父元素也符合标签嵌套。
4.固定元素（特殊的绝对定位），它的父元素是视窗（浏览器默认用来展示内容的区域的尺寸，不是html 或body 的尺寸）。
注意一下绝对定位就行了，其他的相对简单。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
html {
width:1000px;
}
body {
width:800px;
}
#box {
width:50%;
height:300px;
position: absolute;
margin-left: 200px;
border: 1px solid red;
}
#can {
position:absolute;
top:100px;
left:100px;
width:50%;
height:50%;
border:1px solid black;
}
</style>
</head>
<body>
<p id="box">
<p id="can"></p>
</p>
</body>
</html>
box 宽度为视窗的一半，can 的宽高是 box 的宽高的一半。
将 can 设置为 position: fixed; 则其父元素将不再是 box 而是浏览器视窗。
can 的宽高是视窗宽高的一半。
浮动元素的父元素跟普通元素的父元素是一样的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
html {
width:1000px;
}
body {
width:800px;
}
#box {
width:50%;
height:300px;
position: absolute;
margin-left: 200px;
border: 1px solid red;
}
#can {
float:left;
width:50%;
height:50%;
border:1px solid black;
}
</style>
</head>
<body>
<p id="box">
<p id="can"></p>
</p>
</body>
</html>
注意： padding、 margin 如果设置了百分比，上，下，左，右 用的都是父元素宽度 的值为标准去计算。
percentage转px
Example 1: Margins
<p style="width: 20px"> <p id="temp1" style="margin-top: 50%">Test top</p> <p id="temp2" style="margin-right: 25%">Test rightright</p> <p id="temp3" style="margin-bottom: 75%">Test bottombottom</p> <p id="temp4" style="margin-left: 100%">Test left</p> </p>
得到的offset如下：
temp1.marginTop = 20px * 50% = 10px; temp2.marginRight = 20px * 25% = 5px; temp3.marginBottom = 20px * 75% = 15px; temp4.marginLeft = 20px * 100% = 20px;
然后，我又测试了padding，原以为padding的值会根据应用了该属性的相关元素来计算，但让我惊讶的是，padding也是根据应用该属性的父元素的宽来计算的，跟margin表现一致。(再插一句：当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的,元素竖向的百分比设定也是相对于容器的宽度，而不是高度。)
但有一个坑，上面都是对于未定位元素。好奇的我又很好奇，对于非静态定位元素的top, right, bottom, 和left的百分比值又怎么计算呢？
Example 2: Positioned Elements
<p style="height: 100px; width: 50px"> <p id="temp1" style="position: relative; top: 50%">Test top</p> <p id="temp2" style="position: relative; right: 25%">Test rightright</p> <p id="temp3" style="position: relative; bottom: 75%">Test bottombottom</p> <p id="temp4" style="position: relative; left: 100%">Test left</p> </p>
得到的offset如下：
temp1.top = 100px * 50% = 50px; temp2.rightright = 100px * 25% = 25px; temp3.bottombottom = 100px * 75% = 75px; temp4.left = 100px * 100% = 100px;
对于定位元素，这些值也是相对于父元素的，但与非定位元素不同的是，它们是相对于父元素的高而不是宽。
when the parent element does not have a height, then percentage values are processed as auto instead
虽然有点困惑，但只需要记住：对于margin和padding，百分比按照父元素的宽计算，对于定位元素，则按照父元素的高计算。
以上是详解CSS中的percentage百分比值使用方法的详细内容。更多信息请关注PHP中文网其他相关文章！