盒模型常用属性

1.盒模型常用属性

属性	定义
width	宽度
height	高度
background-color	背景颜色
border	边框
padding	内边距
background-clip	背景的绘制区域
box-sizing	允许您以特定的方式定义匹配某个区域的特定元素
margin	外边距

2.盒模型写法

.box {
        /* 宽度200px */
        width: 200px;
        /* 高度200px */
        height: 200px;
        /* 背景颜色 */
        background-color: red;
        /* 边框 */
        border: 10px solid black;
        /* 内边距 */
        padding: 20px;
        /* 背景被裁剪到内容框 */
        background-clip: content-box;
      }

3.padding写法

.box {
        /* 四值:完整语法, 上右下左,顺时针方向 */
        /* 上内边距是5px,右内边距是10px,下内边距是15px,左内边距是20px */
        padding: 5px 10px 15px 20px;        
        /* 三值语法: 左右相等,而上下不等 */
        padding: 5px 20px 15px;
        /* 双值语法: 左右相同,上下也相同,但并不是同一个值*/
        padding: 15px 20px 15px 20px;
        padding: 15px 20px;
        /* 三值与双值的记忆方法: 第二个位置的值一定表示的是左右  */
        /* 单值: 四个方向全相同 */
        padding: 20px;
      }

4.padding,margin类似,但又有显著的不同, 因为padding边框是可见的

          .box {
        /* 右边框宽度 */
        border-right-width: 10px;
        /* 右边框样式 实线*/
        border-right-style: solid;
        /* 右边框颜色 */
        border-right-color: blue;
        /* 右边框宽度，边框样式，边框颜色简写 */
        border-right: 10px solid blue;
        /* 左边框宽度，边框样式，边框颜色简写 */
        border-left: 10px solid blue;
        /* 上边框宽度，边框样式，边框颜色简写 */
        border-top: 10px solid blue;
        /* 下边框宽度，边框样式，边框颜色简写 */
        border-bottom: 10px solid blue;
        /* 上下左右边框样式，实线，边框颜色简写 */
        border: 10px solid blue;
        /* 上下左右边框样式，虚线，边框颜色简写 */
        border: 10px dashed blue;
      }

.box {
        margin: 20px;
      }
      .box:last-of-type {
        background-color: red;
        margin-top: 50px;
        /* margin会在垂直方向出现折叠,谁大用谁的 */
      }

5.总结

1.页面中所有元素,都是一个矩形块

2.矩形块在一个二维平面中,只有”垂直”,”水平”二种排列方式

3.与这种排列方式对应的,就只有二种元素类型: 块元素, 行内元素

4.div:块元素，就算后面有空间，其它元素也必须在第二行显示

6.布局原则

1.布局前提: 是在一个”宽度受限,而高度无限的空间内”

2.布局时,必须将width,height其中一个限制死,否则无法完成布局

3.根据人类的观看习惯, 通常是将宽度限制,而高度随内容舒展

媒体查询

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>媒体查询</title>
</head>
<body>
    <!-- 媒体: 显示/输出信息的介质/载体, 屏幕, 打印机 -->
    <!-- 查询: 根据当前媒体宽度的变化来选择不同的页面或显示效果 -->
    <button class="btn samll">btn1</button>
    <button class="btn middle">btn2</button>
    <button class="btn large">btn3</button>
</body>
<style>
    /* em: 默认元素字号,16px,  */
    /* rem: 根元素的字号, 16px */
    html {
        font-size: 10px;
        /* 1rem = 10px; */
    }
    /* 按钮基本样式 */
    .btn {
        background-color: seagreen;
        color: white;
        border: none;
        outline: none;
    }
    .btn:hover {
        cursor: pointer;
        opacity: 0.8;
        transition: 0.3s;
        padding: 0.4rem 0.8rem;
    }
    .btn.small {
        /* font-size: 12px; */
        font-size: 1.2rem;
    }
    .btn.middle {
        /* font-size: 16px; */
        font-size: 1.6rem;
    }
    .btn.large {
        /* font-size: 18px; */
        font-size: 1.8rem;
    }
    /* 最大374px时生效,是不是当小于374px才有效果 */
    @media (max-width: 374px) {
        html {
            font-size: 12px;
        }
    }
    /* 374px - 414px 之间 */
    @media (min-width: 375px) and (max-width: 413px) {
        html {
            font-size: 14px;
        }
    }
    /* >414px 之间 */
    @media (min-width: 414px) {
        html {
            font-size: 16px;
        }
    }
    /* 以上是一个由小到大的匹配过程: 移动优先 */
    /* 以上是一个由大到小的匹配过程: PC优先 */
</style>
</html>

rem与rm的区别

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>常用单位</title>
</head>
<body>
    <!-- px: 像素,绝对单位, 1in = 96px -->
    <!-- em,rem,vh,vw: 相对单位 -->
    <div>
        <span>Hello</span>
    </div>
    <style>
        html {
            font-size: 10px;
            /* 在根元素中设置的字号,在其它地方引用是使用rem,并且这个值是不变的 */
            /* 因为一个页面,只有一个根元素, html  */
            /* 1rem = 10px */
        }
        div {
            /* font-size: 32px; */
            /* 1em = 16px */
            /* 32px = 2em */
            font-size: 3rem;
        }
        div span {
            /* font-size: 2em; */
            /* 2em = 2*16=32px */
            /* 但是 em在父元素中被重新定义了, 1em = 30px  */
            /* 2em = 60px */
            /* em总是随着自身或父元素的字号发生变化,在布局时会显得非常的混乱 */
            /* font-size: 20px; */
            font-size: 2rem;
        }
    </style>
</body>
</html>