em的原理
- em：是当前浏览器默认的字号大小，也是根元素root的字号大小。
- 所以em=16px
- 用em做一个盒子演示
样式代码如下：
<style>
.box {/* 这里运用ie盒子 */box-sizing: border-box;background-color: green;/* 背景裁切 到内容区*//* background-clip: content-box; */border: 2px solid;}.box {/*当前盒子默认字号 em=16px */width: 15em;height: 15em;padding: 2em;/* 边框设置圆角属性 */border-radius: 1em;}
</style>
- 效果图
- 因为字号大小（font-size）具有继承性，所以当我们自定义了字号大小时，此时em就不再继承于浏览器或root（根）元素的字号大小，而会直接继承我们自定义的字号大小（font-size）。
示例代码
`<style>
.box {/* 因为字号具有继承性 *//* 当这里设置了字体大小：font-size=20px时，此时em=20px， */font-size: 20px;width: 15em;height: 15em;padding: 2em;/* 边框圆角设置 */border-radius: 1em;}
</style>`
效果图
总结
- em：始终与当前元素字号绑定，只要改变当前这个字号就可以动态的改变依赖于它的所有属性，例如，padding等
- font-size:这是一个可继承的属性，所以可以在子元素中直接继承它
小案例
- 用em制作一个简单的页面布局图
代码如下
`<style>
/* 添加点基本样式 */.header {color: white;padding: 1em 2em;margin: 2em;background-color: green;/* 设置边框圆角 */border-radius: 1em;/* 去掉边框 */border: none;/* 去掉轮廓 */outline: none;}.main {color: white;padding: 5em 10em;margin: 2em;background-color: green;/* 去掉边框 */border: none;/* 去掉轮廓 */outline: none;}.footer {color: white;padding: 1em 2em;margin: 2em;background-color: green;/* 设置边框圆角 */border-radius: 1em;/* 去掉边框 */border: none;/* 去掉轮廓 */outline: none;}/* 添加悬停效果 */.body:hover {/* 透明度 */opacity: 0.5;/* 光标样式 */cursor: pointer;transition: 0.5s;/* 阴影效果 */box-shadow: 0 0 3px yellow;}/* 只要改变当前元素的字号，就可以动态的改变所有依赖于这个字号的其他属性了 *//* 例如：width,height,border-radius */.small {font-size: 15px;}.medium {font-size: 20px;}.large {font-size: 25px;}
</style>
</head>
<body>
<div class="header medium">页眉</div>
<div class="main large">主体</div>
<div class="footer small">页脚</div>
</body>
</html>效果图
