盒模型所有常用属性、`box-sizing`的用法、理解定位元素的水平与垂直对齐技术垂直居中

盒模型常用属性

每个盒子都由四个部分组成

组成部分	描述
内容区域（content）	包含元素的主要内容可以是文本图片等
内边距区域（padding）	填充的是内容与边框的边距可以用于延伸内容区的背景
边框区域（border）	用于显示边框
外边距区域（margin）	可以用于分开相邻元素

常用属性及含义

属性	描述
`width min-width max-width`	用于设置内容区域或者带边框区域的宽度
`height min-height max-height`	用于设置内容区域或者带边框区域的高度
`padding`	用于设置内边距的宽度和高度
`border`	用于设置边框的宽度和高度
`margin`	用于设置外边距的宽度和高度

示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>盒模型常用属性</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        margin: 50px;
        border: 10px solid red;
        background-color: blue;
        padding: 10px;
      }
      span {
        background-color: greenyellow;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span>文本内容</span>
    </div>
  </body>
</html>

显示结果

注意：盒模型的外边距会产生重合现象

`box-sizing`的用法

box-sizing定义了浏览器如何计算一个元素的总高度与宽度
即width height属性所描述的是内容区还是带边框区域的宽度高度
其参数有：
- content-box默认值，表示当前宽度高度为盒模型的内容区的宽高度
- border-box表示当前宽度高度为带边框区域整体（除去外边距）的宽高度

示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>box-sizing用法</title>
    <style>
      .box1 {
        box-sizing: content-box;
        width: 100px;
        height: 100px;
        border: 10px solid red;
        padding: 10px;
      }
      .box2 {
        box-sizing: border-box;
        width: 100px;
        height: 100px;
        border: 10px solid red;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</html>

显示结果

理解定位元素的水平与垂直对齐技术垂直居中

利用绝对定位实现

示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>定位元素的对齐</title>
    <style>
      .container {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        position: relative;
      }
      .item {
        width: 100px;
        height: 100px;
        background-color: greenyellow;
        /* 水平左右居中1 */
        /* margin-left: auto;
        margin-right: auto; */
        /* 水平左右居中2 */
        /* position: absolute;
        left: 0;
        right: 0;
        margin: auto; */
        /* 垂直上下居中 */
        /* position: absolute;
        top: 0;
        bottom: 0;
        margin: auto; */
        /* 完全居中 */
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item"></div>
    </div>
  </body>
</html>