收藏
天蓬老师批改状态：合格
老师批语：单位很多, 一旦确定使用一种, 尽可能保持 统一
- em是继承与父级和本身的font-size值，会跟随font-size值的设置一直改变，不好控制，可用于来设置响应式布局和需要跟随大小变化而变化的值的单位
- rem是根据与根属性(html)的font-size的值，要是没有设置的话会根据根属性继承浏览器的值，一般是16px，来设置，主要用于文字、标题和需要能把握固定尺寸的值的单位
<style><style>h2:nth-of-type(1){font-size:1.2em;此时字体的默认值为16px，第一行为1.2倍的em，就是1.2x16=19.2px}h2:nth-of-type(2){此时字体的默认值为16px，第一行为1.2倍的em，就是1.3x16=20.8pxfont-size:1.3em;}span{因为他是第二个h2的子元素，所以继承父级的字号为20.8px，它本身字号得20.8x0.8=16.64pxfont-size:0.8em;在这个属性上面设置过字号了，所以它继承了等于16.64pxwidth:1em;}</style><body><h2>你好中文网</h2><h2>你好<span>中文网</span></h2></body>
<style>html {font-size: 20px;}.panel h2{给标题设置为1.3倍的字体，就是20x1.3=26pxfont-size: 1.3rem;}.panel-body{给文字设置为0.8倍的字体，就是20x0.8=16pxfont-size: 0.8rem;首行缩进2个字，就是2x16=32text-indent: 2em;}</style><html><body><div class="panel"><h2>嫦娥五号成功返回地球后，世界各国态度大不同</h2><div class="panel-body"><p>综合外媒报道，中国“嫦娥五号”返回器携带月球表面土石样本于当地时间星期四12月17日凌晨，成功在内蒙古四子王旗预定区域安全着陆。而上一次人类将月球样本带回地球还是40多年前，中国也成为全球第三个实现月球采样返回能力的国家。世界各个航天大国对此反应不一，有的点赞祝贺，有的毫无表示，还有的阴阳怪气。</p></div></div></body></html>
vh和vw就是根据屏幕来写的百分比，vmia就是最小不能小于屏幕的多少百分比，vmax就是最大不能大于屏幕的多少百分比
<style>.b {width: 50vw;height: 50vh;background-color: blue;}</style><body><div class="b"></div></body>块级元素会根据你屏幕的大小来占据你50%的高和50%宽
<style>.b {width: 50vmax;height: 50vmax;background-color: blue;}</style><body><div class="b"></div></body>因为这个是占据屏幕最长边的百分比，所以会选择最长的边，然后来占据其百分之50的地方
<style>.b {width: 50vmax;height: 50vmax;background-color: blue;}</style><body><div class="b"></div></body>因为这个是占据屏幕最短边的百分比，所以会选择最短的边，然后来占据其百分之50的地方
vh和vw适合适用在改变页面大小里面的块的尺寸，可以设置其来适应窗口的大小，rem和em可以适用于在改变页面大小里面的块的字体的尺寸，两者结合可以设计出智适应网页
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
