收藏
天蓬老师批改状态：合格
老师批语：对不同的盒模型都要了解
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>盒模型</title><style>@media screen and (min-width: 320px) and (max-width: 800px) {:root {font-size: 0.625em;}}@media screen and (min-width: 800px) and (max-width: 1280px) {:root {font-size: 1em;}}@media screen and (min-width: 1280px) {:root {font-size: 2em;}}.box {box-sizing: border-box;border-radius: 4em;width: 30em;height: 30em;background: rgb(5, 243, 37);background-clip: content-box;padding: 1em 2em 3em 4em;border-top: 0.3em solid black;border-right: 0.4em solid rgb(23, 87, 226);border-bottom: 0.4em dashed rgb(207, 8, 101);border-left: 0.5em solid rgb(170, 46, 8);margin: 1em 2em;}</style></head><body><div class="box"></div></body></html>
border-box:表示盒子内容+padding+boder才等于设置的宽度,常用于自适应的环境中，比较整齐；content-box:表示盒子内容等于设置的宽度，大小会受内边距、边框影响。em:1em表示浏览器默认字体的大小，一般为16px。所有的px单位全部改为em,可实现自适应的效果；比如上述的列子，通过判断屏幕的大小，自动改变字体的大小，对应的边框，内边距及盒子的长宽随之进行改变，可实现在小屏幕比如手机和大屏幕比如电脑展示不同效果的内容。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
