<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单位</title>
<style>
* {
padding: 0;
margin: 0;
}
body, html {
height: 100%;
}
/*1.宽高固定值: 像素 px pixel*/
div {
width: 1000px;
height: 30%;
background-color: red;
font-size: 2em;
}
a {
background-color: green;
width: 1000px;
height: 1000px;
}
/*2.宽高:占可视化窗口的百分比(vw vh)。
vw: viewport width, 1vw=视口宽度的1%, 100vw就是视口的宽度
vh: viewport height, 1vh=视口高度的1%,100vh就是视口的高度
注意: 支持css3的浏览器才支持vw vh 这两个长度单位
*/
/*3.em: 相对于父元素的字体大小;
4.父元素的 百分比
要给父元素设置一个高度,在div中,它的父元素是 body , body的父元素是 html,
html 的父元素是 可视化窗口,所以需要给body html 设置继承父元素的100%。
*/
</style>
</head>
<body>
<div>
123
</div>
<a href="">百度</a>
</body>
</html>
上述运行结果: