Web网页制作-知识点（4）——CSS盒子模型、弹性盒模型（flex box)、文档流、浮动、清除浮动、定位、圆角、阴影（一）

CSS盒子模型

概念

所有HTML元素可以看作盒子，在CSS中，“box model”这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：

外边距（margin），边框（border），内边距（padding），和实际内容（content）。

我用Minecraft游戏中服务器的地皮系统来作为示例：

1. Margin（外边距）-清楚边框外的区域，外边距是透明的
2. Border（边框）-围绕在内边距和内容外的边框
3. Padding（内边距）-清楚内容周围的区域，内边距是透明的
4. Content（内容）-盒子的内容，显示文本和图像

注意：设置margin和padding时，四个值则按从上开始，顺时针进行设置；两个值，则第一个为上下，第二个为左右。

弹性盒模型（flex box）

内容

弹性盒子由弹性容器（Flex container）和弹性子元素（Flex item）组成。

弹性容器通过设置display属性的值为flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

默认弹性盒里内容横向摆放。  

默认弹性盒里内容横向摆放。

父元素上的属性

display属性

display:flex;开启弹性盒。

属性设置后子元素默认水平排列。

flex-direction属性

定义

flex-direction属性指定了弹性子元素在父容器中的位置。

语法

<style>
    father{
        display:flex;
        flex-direction:row||row-reverse|column|column-reverse;
    }
</style>

1. row：横向从左到右排列（左对齐），默认的排列方式
2. row-reverse：反转横向排列（右对齐，从后往前排,最后一项排在最前面）
3. column：纵向排列
4. column-reverse：反转纵向排列

justify-content属性

定义

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐

语法

<style>
    father{
        display:flex;
        justify-content:flex-start|flex-end|center;
    }
</style>

1. flex-start弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
2. flex-end弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
3. center弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）

align-items属性

定义

align-items设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

语法

<style>
    father{
        display:flex;
        align-items:flex-start|flex-end|center;
    }
</style>

1. flex-start弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
2. flex-end弹性盒子元素的侧轴（纵轴） 起始位置的边界紧靠住该行的侧轴结束边界。
3. center弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

子元素上的属性

flex

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

文档流（标准流）

文档流是文档中可显示对象在排列是所占用的位置/空间。

例如：块元素自上而下摆放，内联元素从左到右摆放。

标准流里面的限制非常多，导致很多页面效果无法实现。

文档流产生的问题：

1. 高矮不齐，底边对齐
2. 空白折叠现象

1.无论多少个空格、换行、tab，都会折叠为一个空格

2.如果我们想让img标签之间没有空隙，必须紧密连接

要解决这些问题，就需要脱离文档流。

使一个元素脱离标准文档流有三种方式：

1. 浮动
2. 绝对定位
3. 固定定位

浮动

定义

float属性定义元素在哪个方向浮动，任何元素都可以浮动。

浮动的原理

1. 浮动以后使元素脱离了文档流
2. 浮动只有左右浮动，没有上下浮动

元素向左浮动

脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象。

看下面的情况，只有黄色方块浮动：

元素向右浮动

所有元素向左浮动

当所有元素同时浮动的时候，就会变成水平摆放，向左或者向右。

当容器不足时

当容器不足以横向摆放内容的时候，会在下一行摆放：

清除浮动

浮动的副作用

当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动，

1. 浮动元素会造成父元素高度塌陷
2. 后续元素会受到影响

<head>
<style>
  .container{
    border:1px solid red;
  }
  .box{
    width:100px;
    height:100px;
    background-color:#fff176;
    float:left;
    margin:5px;
  }
</style>
</head>
 
<body>
  <div class="container">
      <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>

原本container的块元素应该包含三个子元素的，但是由于浮动的副作用，导致父元素高度塌陷为0，显示为一条边框直线了。

当父元素出现塌陷的时候，对布局是不利的，所以我们必须清除副作用，解决方案有很多种：

1. 父元素设置高度
2. 受影响的元素增加clear属性
3. overflow清除浮动
4. 伪对象方式

父元素设置高度

如果父元素高度塌陷，可以给父元素设置高度，撑开元素本身大小。

<head>
<style>
  .container{
    border:1px solid red;
    width:350px;
    height:300px;
  }
  .box{
    width:100px;
    height:100px;
    background-color:#fff176;
    float:left;
    margin:5px;
  }
</style>
</head>
 
<body>
  <div class="container">
      <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>

Web网页制作-知识点（4）——CSS盒子模型、弹性盒模型（flex box)、文档流、浮动、清除浮动、定位、圆角、阴影（二)：https://developer.aliyun.com/article/1531004