盒模型常用属性、媒体查询、em，rem区别

盒模型常用属性

<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的区别

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>

盒模型常用属性

媒体查询

em和rem的区别

相关文章