番外-css盒子模型

1，首先我们创建父元素

<div class="parent">
  </div>

.parent {
  background: gray;
  width: 100%;
  height: 100%;
}

运行结果：

2，我们在父元素中创建一个子元素

现在代码变成：

<div class="parent">
    <div class="children"></div>
</div> 

将子元素宽度和高度减小一点，居中显示与父元素内
父元素样式变为：

.parent {
  background: gray;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;  /*水平居中*/
  align-items: center;      /*垂直居中*/
}

子元素的样式：
（calc()是一个css运算函数，下面表示在继承的父级100%宽度的情况下动态减去了86px）
需要注意的是calc(100% - 86px)，-左右各有一个空格，不是calc(100%-86px)

.children {
  background: #fff;
  width:calc(100% - 86px);
  height: calc(100% - 86px);
}

运行结果：

需知：页面中的元素实际所占的空间是由元素的宽高和margin、padding、border决定的。（宽度=width+左右padding+左右border+左右margin），（高度=height+上下padding+上下border+上下margin）

3，我们来修改一下子元素的样式

子元素样式里加上边框
border:表示盒子的边框（宽度 样式{solid:实线;dashed:虚线;double:双线;dotted:点线} 颜色）

border: 3px solid gold;  

运行结果：

4，子元素中再添加子元素

现在代码变为：

  <div class="parent">
    <div class="children">
      <div class="child1"></div>
    </div>
  </div>      

child1的样式为：

.child1 {
  background: blue;
  width: calc(100% - 0px);
  height: calc(100% - 0px);
}

运行结果：

这时，我们想让child1与children的边框拉开一些距离，就可以使用padding属性（padding：表示盒子的内边距，即内容与边框之间的距离）
children的样式变为：

.children {
  background: #fff;
  width:calc(100% - 86px);
  height: calc(100% - 86px);
  padding-left:50px;
  padding-right:50px;
  padding-top:50px;
  padding-bottom:50px;
}

运行结果：

可以发现，parent 不见了，children被撑开了。这是因为普通的盒子模型我们设置border会将盒子撑大，通过设置 box-sizing: border-box; 设置border的时候不会撑开盒子
在children的样式里添加box-sizing: border-box;
运行结果：

5，我们在children里再添加一个子元素

此时代码变为：

  <div class="parent">
    <div class="children">
      <div class="child1">
         </div>
      <div class="child2"></div>
    </div>
  </div>     

将child1的高度变为原来的一半，
样式分别为：

.child1 {
  background: blue;
  width: calc(100% - 0px);
  height: calc(50% - 0px);
}

.child2 {
  /*渐变色*/
  /* 线性渐变 */
  background: linear-gradient(to top right, rgb(239, 241, 239), green);
  /* 径向渐变 */
  /* background: radial-gradient(circle,rgb(239, 241, 239),green); */
  width: calc(100% - 0px);
  height: calc(50% - 0px);
}

再在child1和child2中添加margin属性（margin：表示盒子的外边距，即盒子与盒子之间的距离），隔开child1和child2，添加这句 margin: 5px;
运行结果：


可以很明显的看到这里没有对齐，那么是哪里出错了呢？
没错，我们加了margin: 5px; ，而 width: calc(100% - 0px);height: calc(50% - 0px);
我们需要把margin的5px在宽、高里减去。
都改为：

width: calc(100% - 10px);
height: calc(50% - 10px);

再运行，发现是没问题的了

6，将child1元素四等分

在child1里添加四个子元素，现在代码变为：

<div class="parent">
    <div class="children">
      <div class="child1">
        <div class="child1_child1">
          <div class="child_center">
            <p class="child_center_center">1</p>
          </div>
        </div>
        <div class="child1_child2">
          <div class="child_center">
            <p class="child_center_center">2</p>
          </div>
        </div>
        <div class="child1_child3">
          <div class="child_center">
            <p class="child_center_center">3</p>
          </div>
        </div>
        <div class="child1_child4">
          <div class="child_center">
            <p class="child_center_center">4</p>
          </div>
        </div>
      </div>
      <div class="child2"></div>
    </div>
  </div>

样式代码为：

.child1 {
  position: relative;
  background: blue;
  width: calc(100% - 10px);
  height: calc(50% - 10px);
  margin: 5px; /*margin：表示盒子的外边距，即盒子与盒子之间的距离*/
}

.child1_child1 {
  position: absolute; /*设置父元素为相对定位，子元素设置为绝对定位，然后再设置偏移量*/
  top: 0;
  width: 50%;
  height: 50%;
  background-color: pink;
}
.child1_child2 {
  position: absolute;
  top: 0px;
  left: 50%;
  width: 50%;
  height: 50%;
  background-color: skyblue;
}
.child1_child3 {
  position: absolute;
  top: 50%;
  width: 50%;
  height: 50%;
  background-color: rgb(36, 165, 135);
}
.child1_child4 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  background-color: rgb(180, 218, 26);
}
.child_center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96%;
  height: 80%;
  transform: translate(-50%, -50%);
  background: #fff;
}
.child_center_center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-family: "微软雅黑";
  font-style: normal;
  font-weight: 400;
}

运行结果：

这四块元素的位置分布，使用了css的position属性。
首先，将这四块元素的父元素child1的position设置为 position: relative;，然后这个四块元素的position设置为position: absolute;（设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素。）。
因为要四等分，所以这四个元素的宽、高都设置为50%。然后根据left，top属性定位。

至于居中的文本样式就是老生常谈了。
全部代码：

<!--  -->
<template>
  <div class="parent">
    <div class="children">
      <div class="child1">
        <div class="child1_child1">
          <div class="child_center">
            <p class="child_center_center">1</p>
          </div>
        </div>
        <div class="child1_child2">
          <div class="child_center">
            <p class="child_center_center">2</p>
          </div>
        </div>
        <div class="child1_child3">
          <div class="child_center">
            <p class="child_center_center">3</p>
          </div>
        </div>
        <div class="child1_child4">
          <div class="child_center">
            <p class="child_center_center">4</p>
          </div>
        </div>
      </div>
      <div class="child2"></div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.parent {
  background: gray;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;  /*水平居中*/
  align-items: center;      /*垂直居中*/
}
.children {
  background: #fff;
  /**
   * 页面中的元素实际所占的空间是由元素的宽高和margin、padding、border决定的
   * 宽度=width+左右padding+左右border+左右margin
   * 高度=height+上下padding+上下border+上下margin
   */
  width: calc(100% - 86px);
  height: calc(100% - 86px);
/*普通的盒子模型我们设置border会将盒子撑大，通过设置 box-sizing: border-box; 设置border的时候不会撑开盒子 */
  border: 3px solid gold; /*border:表示盒子的边框（宽度 样式{solid:实线;dashed:虚线;double:双线;dotted:点线} 颜色）*/
   box-sizing: border-box;
  padding-top: 50px; /*padding：表示盒子的内边距，即内容与边框之间的距离*/
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 50px;
}
.child1 {
  position: relative;
  background: blue;
  width: calc(100% - 10px);
  height: calc(50% - 10px);
  margin: 5px; /*margin：表示盒子的外边距，即盒子与盒子之间的距离*/
}
.child2 {
  /*渐变色*/
  /* 线性渐变 */
  background: linear-gradient(to top right, rgb(239, 241, 239), green);
  /* 径向渐变 */
  /* background: radial-gradient(circle,rgb(239, 241, 239),green); */
  width: calc(100% - 10px);
  height: calc(50% - 10px);
  margin: 5px;
}
.child1_child1 {
  position: absolute; /*设置父元素为相对定位，子元素设置为绝对定位，然后再设置偏移量*/
  top: 0;
  width: 50%;
  height: 50%;
  background-color: pink;
}
.child1_child2 {
  position: absolute;
  top: 0px;
  left: 50%;
  width: 50%;
  height: 50%;
  background-color: skyblue;
}
.child1_child3 {
  position: absolute;
  top: 50%;
  width: 50%;
  height: 50%;
  background-color: rgb(36, 165, 135);
}
.child1_child4 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  background-color: rgb(180, 218, 26);
}
.child_center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96%;
  height: 80%;
  transform: translate(-50%, -50%);
  background: #fff;
}
.child_center_center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-family: "微软雅黑";
  font-style: normal;
  font-weight: 400;
}
</style>