CSS入门学习之盒模型、媒体查询、常用变量知识小结 -

盒模型常用属性

<!DOCTYPE html>
<html lang="en">
<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>
    <div class="box"></div>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: violet;
            border: 10px solid black;
            padding: 20px;
            background-clip: content-box;
            box-sizing: border-box;
        }
    </style>
</body>
</html>

四值语法、三值语法、双值语法、单值语法

.box {
            /* 四值语法：完整语法，上右下左，顺时针方向 */
            /* padding: 5px 10px 15px 20px; */
            /* 左右相同 */
            padding: 5px 20px 15px 20px;
            /* 等效三值语法 */
            padding: 5px 20px 15px;
            padding: 15px 20px 15px 20px;
            /* 等效于 */
            /* 双值语法，左右相同，上下相同，但并不是同一个值 */
            padding: 15px 20px;
            /* 三值与双值的记忆方法：第二个位置表示左右 */
            /* 单值语法：四个方向都相同 */
            padding: 20px;
        }

边框属性的特点

.box {
            /* 边框与padding,margin类似，但又有显著的不同，边框是可见的 */
            /* 可以设置宽度、样式，颜色 */
            /* border-right-width: 10px;
            border-right-style: solid;
            border-right-color: red; */
            /* border-right: 10px solid blue;
            border-left: 10px solid blue;
            border-top: 10px solid blue;
            border-bottom: 10px solid blue; */
            border: 10px dashed blue;
        }

margin属性

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

页面元素知识小结

页面中所有元素，都是一个矩形块
矩形块在一个二维平面中，只有垂直，水平两种排列方式
div:块元素

媒体查询

知识小结

媒体：显示/输出信息的介质/载体，屏幕，打印机，扫描仪
为什么要查询：因为媒体之间有差异，比如：PC和手机屏幕有差异
查询：根据当前媒体宽度的变化，来选择不同的页面或显示效果

实例：移动优先

<!DOCTYPE html>
<html lang="en">
<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" small>btn1</button>
    <button class="btn" middle>btn2</button>
    <button class="btn" large>btn3</button>
</body>
<style>
    html {
        font-size: 10px;
    }
    /* 最大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:414) {
        html {
            font-size: 16px;
        }
    }
</style>
</html>

em,rem用法与区别

知识小结

px:像素（是个绝对单位，是个矩形） 1in=96px
em,rem:相对单位
em:元素的字号大小

rem:根元素的字号大小

<!DOCTYPE html>
<html lang="en">
<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>
  <div>
      <span>Hello</span>
  </div>
  <style>
      html {
          font-size: 10px;
          /* 在根元素中设置的字号，在其它地方引用是使用rem，并且这个值是不变的 */
          /* 1rem=10px */
      }
      div {
          /* font-size: 32px; */
          /* 1em=16px */
          /* 32px=2em */
          font-size: 3rem;
      }
      div span {
          /* 参照父元素进行计算，2em=60px */
          /* 2em=2*16=32px */
          /* 但是 em在父元素中被重新定义了，1em=30px */
          /* 所以在这里 2em=60px */
          font-size: 2em;
          font-size: 20px;
          font-size: 2rem;
      }
  </style>
</body>
</html>