box-sizing属性、常用的元素居中方式 - 前端学习

box-sizing属性

盒子属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子属性</title>
  <style>
      :root {
          font-size: 10px;
      }
      .box {
          /* 宽 */
          width: 20em;
          /* 高 */
          height: 30em;
          /* 背景色 */
          background-color: aqua;
      }
      .box {
          /* 内边距 */
          padding: 3em;
          /* 边框 */
          border: 3px solid;
          /* 将背景色裁切到内容区,让padding可视化 */
          background-clip: content-box;
      }
      .box {
          /* content-box: w3c标准盒子模型,width/height不含padding/border  */
          box-sizing: content-box;
          /* border-box:padding,border计算在盒子大小内 */
          box-sizing: border-box;
          /* 叫 ie盒子 或者 怪异盒模型 */
          /* margin不影响盒子大小，影响盒子的排列 */
      }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

margin

margin只会对页面中的元素的位置或多个元素的排列产生影响,对盒子大小无影响
水平方向，margin累加
垂直方向，margin折叠。margin折叠之后,大者胜出

全局的盒子大小设置
只要清零不可视的元素就可以了。

      margin: 0;
      padding: 0;
      /* 全局使用IE盒子模型 */
      box-sizing: border-box;

元素的高度：内容超出了怎么办

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>元素的高度：内容超出了怎么办？</title>
  <style>
      :root {
          font-size: 10px;
      }    
      .box {
          width: 20em;
          height: 15em;
          background-color: rgb(231, 130, 130);
          border: 1px solid;
          /* 默认值，不隐藏溢出 */
          overflow: visible;
          /* 隐藏溢出 */
          overflow: hidden;
          /* 滚动条 */
          overflow: scroll;
          /* 内容如果超出，滚动条自动出现 不然自动隐藏  */
          overflow: auto;
      }
  </style>
</head>
<body>
  <div class="box">
      1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中境外输入病例18例（广东7例，辽宁4例，天津2例，上海2例，福建1例，云南1例，陕西1例），本土病例85例（河北82例，辽宁2例，北京1例）；无新增死亡病例；无新增疑似病例。
      1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中境外输入病例18例（广东7例，辽宁4例，天津2例，上海2例，福建1例，云南1例，陕西1例），本土病例85例（河北82例，辽宁2例，北京1例）；无新增死亡病例；无新增疑似病例。
  </div>
</body>
</html>

容器最小高度和最大高度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>容器最小高度和最大高度</title>
  <style>
      body>* {
          margin: 1em;
      }
      body div {
          border: 2px solid;
      }
      body div:first-of-type {
          /* 高度由内容撑开 */
          height: auto;
      }
      body div:nth-of-type(2) {
          /* 最小高度，小于最小高度不会塌掉，会留出空白
          超出最小高度会自动撑开 */
          min-height: 20em;
      }
      body div:nth-of-type(3) {
          /* 最大高度 */
          max-height: 3em;
          /* 滚动条 */
          overflow: auto;
      }
  </style>
</head>
<body>
  <div>1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例</div>
  <div>
          1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
          1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
          1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
          1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
          1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
          1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
          1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
          1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
  </div>    
  <div>
          1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
          1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
          1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
          1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
          1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
          1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
          1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
          1月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例103例，其中本土病例85例<br>
  </div>
</body>
</html>

常用的元素居中方式

水平居中

  <style>
      .box {
          width: 15em;
          height: 15em;
          border: 1px solid #000;
      }
      .box {
          /* 行内元素或行内块元素水平居中 */
          text-align: center;
      }
      .box>div {
          width: 5em;
          height: 5em;
          background-color: yellow;
      }
      .box>div {
          /* 块元素的水平居中 */
          /* auto:这个值由浏览根据上下文自动计算 */
          margin: 0 auto
      }
  </style>

垂直居中问题: 行内元素
只要line-height和height相等就能实现行内元素垂直居中（图片无效）

      .box a {
          line-height: 15em;
      }

padding
可以对图片生效。
不要设置高度，由padding挤出来。

  .box {
      padding: 5em 0;
  }

水平且垂直的解决方案
1.行内元素
text-align + line-height

  .box {
      text-align: center;
      line-height: 15em;
  }

2.padding
不能设置高度。或者使用auto让宽高失效。

  .box {
      padding: 5em
  }

3.margin

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>margin</title>
  <style>
      .box {
          width: 10em;
          height: 15em;
          background-color: rgb(231, 125, 125);
          box-sizing: border-box;
      }
      .box {
          position: relative;
      }
      .box {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
      }        
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

批改老师：

天蓬老师

批改状态：合格

老师批语：是刚报名的吗？作业进度有点慢了