盒模型，多媒体查询实例，rem和em的区别

1，盒子模型常用属性

        <style>
        .box1 {
                width: 200px;
                /* 盒子宽度 */
                height: 200px;
                /* 盒子高度 */
                background-color: darkcyan;
                /* 背景颜色 */
                border: 10px solid black;
                /* 边框 */
                padding: 20px;
                /* 盒子内边距 */
                padding:有四值语法，三值语法，双值语法，单值语法。单值语法适用于四个值相等的情况下。
                background-clip: content-box;
                /* 背景裁切 */
                box-sizing: border-box;
                布局前提:是在一个"宽度受限。而高度无限的空间内”，布局时,必须将width, he ight其中一个限制死，否则无法完成布局
    /* box-sizing属性允许我们在元素的总宽度和高度中包含填充和边框。如果box-sizing: border-box;在元素填充上设置并且边框包含在宽度和高度中,默认情况下，元素的宽度和高度计算如下：width + padding + border =元素的实际宽度 height + padding + border =元素的实际高度这意味着：当您设置元素的宽度/高度时，元素通常看起来比您设置的大（因为元素的边框和填充被添加到元素的指定宽度/高度）。下图显示了两个具有相同指定宽度和高度的<div>元素： */}
            </style>

盒子大小

2，多媒体查询实例

        <style>
            body{
                background-color:red;
            }
            @media(max-width:400px){
                body{
                    background-color: aqua;
                }
            }
      /*媒体查询：对当前媒体设备 宽度的变化来选择不同的页面或显示效果  */
        </style>

rem与em区别及实例演示

        <style>
            html {
                font-size: 6px
                    /* 在根元素中设置的字号,在其它地方引用是使用rem,并且这个值是不变的 */
                    /* 因为一个页面,只有一个根元素, html  */
                    /* 1rem = 6px */
            }
            .a {
                font-size: 4rem;
                /* 3remx6px=18px */
            }
            div p {
                /* font-size: 3em; */
            }
        </style>

rem与em的区别：

区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

1，盒子模型常用属性

2，多媒体查询实例

rem与em区别及实例演示

更多相关文章

随机推荐