彻底掌握CSS中的percentage百分比值使用

作者：Chinaxiang 字体：[增加减小] 来源：互联网时间：2017-08-06

本文主要包含CSS,百分比,percentage等相关知识,Chinaxiang 希望在学习及工作中可以帮助到您

百分比旨在相对于父元素的相同属性的大小。
如果用来设置字体，则相对的就是父元素的字体大小。
大多数浏览器中<html> 和<body> 标签中的默认字体尺寸是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">
div.parent {
margin:150px;
width: 200px;
height: 200px;
border: 1px solid blue;
}
div.child {
width: 50%;
height: 50%;
border: 1px dashed black;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>

再啰嗦一点关于父元素的问题：何为父元素，相对定位（relative），绝对定位（absolute），浮动（float），固定（fixed）中如何找寻父元素？
由于HTML是树形结构，标签套标签，一般情况下的父子关系很明朗。

<div class="parent">
<div class="child"></div>
</div>

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:

您可能想查找下面的文章:

2017-08-06框架边框与页面内容的垂直边距marginheight
2017-08-06css弹出层覆盖底层具体实现
2017-08-06纯CSS实现设置半个字符的样式
2017-08-06如何定义html hr 样式(多种效果)
2017-08-06div overflow 超出隐藏属性使用说明
2017-08-06浏览器兼容之旅第三站:IE常见Bug总结及修复方法—part1
2017-08-06通过CSS样式来修改ExtJS:TreePanel的小图标
2017-08-06css border引发的血案
2017-08-06div+css无图边框圆角实现思路及代码
2017-08-06CSS 使用规则总结

彻底掌握CSS中的percentage百分比值使用

您可能想查找下面的文章:

相关文章

文章分类

最近更新的内容