回顾CSS盒子模型

[mamba-1024]

No description provided.

[mamba-1024]

说到css盒子模型我们就会想到CSS的布局模式。
那就先来掰扯一下CSS 布局模式吧.....它是一种基于盒子与其兄弟和祖辈盒子的交互方式来确定盒子的位置和大小的算法(嘿嘿嘿，这是从MDN文档里看到的官方说法)
我们常见的一些布局有：

• 流布局
  流动是默认的网页布局模式，块级元素在所包含的元素内自上而下垂直分布，内联(行内)元素在所包含的元素内从左到右水平分布显示
• 浮动布局
  使块元素实现浮动在一行，如：div{float: left;}所有div元素向左浮动
• 弹性盒子布局
  Flexible Box 或 Flexbox
• Grid布局
  网格布局

[mamba-1024]

定义一个弹性盒子(Flex container)

display: flex 使弹性容器成为块级元素
dispaly: inline-flex 使弹性容器成为单个不可分的行内级元素

常见的弹性盒子的属性

• flex-direction: 决定项目的排列方式
  row（默认）：主轴水平方向，从左开始
  row-reverse：主轴水平方向， 从右开始
  column：主轴垂直方向，从上开始
  column-reverse：主轴垂直方向，从下开始

• justify-content: 定义项目在主轴上的对齐方式
  center
  flex-start
  flex-end
  space-between 两端对齐，项目间距相等
  space-around 项目间距相等，两端距离容器的距离是项目间距的一半
  space-evenly 项目间距相等，两端距离容器的距离和项目间距一样

• align-item 定义项目在交叉轴的排列方式 下面假设交叉轴从上到下。
  stretch（默认）
  center
  flex-start
  flex-end
  baseline：项目的第一行文字的基线对齐

结果示例可以参考 MDN官方文档或者阮一峰老师的博客，偷懒一下。我就不一一画图描述了

[mamba-1024]

追加一个box-sizing的使用介绍

属性：

• border-box: 这个属性的总宽度是由内容宽度加内边距宽度再加上边框的宽度
  width = content + padding + border
• content-box: 它的宽度就是内容的实际宽度

我们可以在form表单上使用border-box属性，这样可以使表单和按钮的宽度保持一致（由于表单和按钮默认都有自己的边框和padding）