收藏
PHPz批改状态：合格
老师批语：
<style>.box {background-color: cadetblue;width: 200px;height: 200px;/* padding的四值, 上向下左,顺时针方向; */padding: 5px;/* 剪切成内容方框 */background-clip: content-box;/* 告诉浏览器设置的边框和内边距的值是包含在width和height内 */box-sizing: border-box;/* border还可以根据需要对不同方向的边框进行设置 *//* border-right-width: 5px;border-right-style: dotted;border-right-color: blue; *//* 也可以简写成 *//* border-right: 5px dotted blue; *//* 如果四个方向设置都是一样的可简写称 */border: 5px dotted blue;}</style><body><div class="box"></div></body>
媒体:显示/输出信息的介质/载体,屏幕,打印机
查询:根据当前媒体宽度的变化来选择不同的页面或显示效果
<style>p {font-size: 30px;color: blue;font-weight: bolder;}/* 设定最大宽度值是：400px,一旦小于400px p标签字体变成15px 字体颜色变成红色*/@media (max-width: 400px) {p {font-size: 15px;color: red;}}</style><body><p>你好</p></body>
em总是随着自身或父元素的字号发生变化,在布局时会显得非常的混乱
rem在根元素中设置的字号,在其它地方引用是使用rem,并且这个值是不变的
<style>html {font-size: 10px;}.content {font-size: 1.5em;}/* em随着父元素的1.5em而改变 所以这里的2em是 2个1.5em也就是30px */p {font-size: 2em;}/* rem只根据根元素变化,所以这里的2rem是 20px */p {font-size: 2rem;}</style><body><div class="content"><p>hello</p></div></body>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
