第四天

<!-- 元素分为两类，内联元素，块元素

对应的排列方式与页面的排列方式是一致的

所有页面是一个二维的空间，只有宽和高

二维空间中的元素排列只有两种方法：水平，垂直
默认先水平，排列不下，在换行按垂直方向排列

只要这个元素的类型确定，列如是一个内联元素 display：inline,则这个元素就水平排列，一行显示不下就换行显示

如果这个元素的display：block,就是一个块元素，

块元素两边默认会自动添加换行，两边不允许存在其他元素，总是独占一行 -->

<!-- 所以，页面中的所有元素，都是以一个可视的矩形块进行排列布局的 -->

<!-- 这个矩形块就是盒子，它的描述方式就是：“盒模型” -->

<div class="box">Hello world!</div>
<div class="box">Hello world!</div>
<style>
  .box {
    width: 150px;
    height: 150px;
    display: block;

    /* 可视属性只有两个，边框和背景色  */
    border: 5px dashed red;
    background-color: violet;
    background-clip: content-box;
    /* 可以通过添加内边距，让内容与边框之间可以呼吸 */
    padding: 10px;

    margin: 10px;
  }
  /* 为了简化布局，计算方便，我们通常直观的认为盒子的width,height应该就是盒子最终的大小 */
  .box {
    /* width/height  = padding + border + width/height */
    box-sizing: border-box;
    /* content-box = width/height  */
    /* box-sizing: content-box; */
  }
  /* box-sizing: border-box;计算盒子大小时，将内边距与边框全部计算在内
         所以，width:,height就是最终大小，从而简化布局 */
  */

         /* 实现须有元素样式的初始化 */
         * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  /* 盒模型常用属性
         1.width 宽度
         2.height 高度
         3.border 边框
         4.padding 内边距
         5.margin  */
</style>