![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：现在就应该忘掉px, 尽可能只用相对单位
Collection
Collection
案例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>属性值简写</title><style>h2 {background-color: grey;}.box {width: 200px;height: 200px;background-color: greenyellow;/* 值：上 右 下 左，顺时针 *//* padding和marigin是看不到的，border可以设置样式和颜色 */padding: 10px 20px 20px 30px;border: black solid 5px;margin: 20px 20px 20px 20px;}.box {/* 第二个值代表左右 */padding: 10px 20px 30px;padding: 10px 30px;}</style></head><body><h2>php.cn</h2><div class="box"></div></body></html>
案例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>em介绍</title><style>/* 1em等于浏览器默认font-size 例如16px */ul {font-size: 0.9em;}p {font-size: 0.8em;}</style></head><body><!-- 1、ul和li属于有父子关系，所以会成倍缩放 --><ul><li>item1</li><ul><li>item2</li></ul></ul><!-- 2、非父标签，不会缩小 --><p>itme3 <p>item4</p> </p></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>rem设置</title><style>/* rem 我理解的字面意思是reset em */html {/*1.默认1em=16px2.当前重置了html的根元素em实际值10px：16*0.625=10px*/font-size: 0.625em;}/*使用:root，可以应用与html，xhtml，意思就是根元素*/:root {font-size: 0.625em;}p {/* 1.8rem = 重置后的1em*1.8=1.8*10px=18px */font-size: 1.8rem;}</style></head><body><p>你好rem</p></body></html>