1. 实例演示盒模型常用属性,注意box-sizing的用法

宽度 width: 100px;
高度 height: 100px;
内边距 padding: 5px;
背景色 background-color: cadetblue;
边框 border: 1px solid #000;

规定背景的绘制区域background-clip: content-box;

/* border-box    背景被裁剪到边框盒。 */
/* padding-box    背景被裁剪到内边距框。*/
/* content-box    背景被裁剪到内容框。 */

外边距 margin: 1px 2px 3px 4px 顺序为上右下左

box-sizing的用法，并举例

默认情况下，元素的宽度与高度计算方式如下：
width(宽) + padding(内边距) + border(边框) = 元素实际宽度
height(高) + padding(内边距) + border(边框) = 元素实际高度
在盒子内无内容时，这么计算是没有问题的，但是当盒子内的padding值改变时，盒子的大小也跟着改变了。

实例演示

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <style>
    .box {
      /* 元素的宽度 */
      width: 100px;
      /* 元素的高度 */
      height: 100px;
    }
    .box-1 {
      /* 内边距 */
      padding: 5px;
      /* 背景色 */
      background-color: #f29b76;
      /* 边框 */
      border: 1px solid #000;
      /* 规定背景的绘制区域： */
      /* border-box    背景被裁剪到边框盒。 */
      /* padding-box    背景被裁剪到内边距框。 */
      /* content-box    背景被裁剪到内容框。 */
      background-clip: content-box;
      /* 设置下外边距 */
      margin-bottom: 5px;
    }
    .box-2 {
      /* 内边距 */
      padding: 5px;
      /* 背景色 */
      background-color: #00a1e9;
      /* 边框 */
      border: 1px solid #000;
      /* 将边框包含在内容区的宽和高 */
      box-sizing: border-box;
      margin-bottom: 10px;
    }
  </style>
  <title>盒模型常用属性</title>
</head>
<body>
  <div class="box box-1"></div>
  <div class="box box-2"></div>
</body>
</html>

2. 实例演示媒体查询

<!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">按钮1</button>
    <button class="btn middle">按钮2</button>
    <button class="btn large">按钮3</button>
</body>
<style> 
    html {
        font-size: 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: 1.2rem;
    }
    .btn.middle {
        font-size: 1.6rem;
    }
    .btn.large {
        font-size: 1.8rem;
    }
    @media (max-width: 374px) {
        html {
    font-size: 12px;
    background-color: #F20E11;
        }
    }
    @media (min-width: 375px) and (max-width: 413px) {
        html {
            font-size: 14px;
            background-color: #00a1e9;
        }
    }
    @media (min-width: 414px) {
        html {
            font-size: 16px;
            background-color: #21e900;
        }
    }
</style>
</html>

3. 实例演示em,rem用法,并说出之间差别

em的值并不是固定的,会继承父级元素的字体大小.

<!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>
    <div>
        <span>你好！</span>
    </div>
    <style>
        html {
            font-size: 6px;
            /* 在根元素中设置的字号,在其它地方引用是使用rem,并且这个值是不变的 */
            /* 因为一个页面,只有一个根元素, html  */
            /* 1rem = 6px */
        }
        div {
            font-size: 3rem;
        }
        div span {
            /* 4rem = 4*6=24px */
            font-size: 4em;
        }
    </style>
</body>
</html>

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

<!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>
    <div>
        <span>你好！</span>
    </div>
    <style>
        html {
            font-size: 6px;
            /* 在根元素中设置的字号,在其它地方引用是使用rem,并且这个值是不变的 */
            /* 因为一个页面,只有一个根元素, html  */
            /* 1rem = 6px */
        }
        div span {
            /* 4rem = 4*6=24px */
            font-size: 4rem;
        }
    </style>
</body>
</html>

1. 实例演示盒模型常用属性,注意box-sizing的用法 2. 实例演示媒体查询 3. 实例演示em,rem用法,并说出之间差别

1. 实例演示盒模型常用属性,注意box-sizing的用法

box-sizing的用法，并举例

实例演示

2. 实例演示媒体查询

3. 实例演示em,rem用法,并说出之间差别

相关文章