CSS 基础知识 2
属性值简写
- padding 和 marigin 是看不到的，border 可以设置样式和颜色
- padding、margin 的缩写
案例
<!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>
em 介绍
- 1em 等于浏览器默认 font-size 例如 16px
- em 在嵌套标签中，如果是父子关系，会受到影响，成倍递增或减少
案例
<!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>
rem 设置
- rem（reset em），意思重置 em
- 重置 em 后，后续使用 rem 来表示大小
<!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>