盒子的分类和弹性布局的一些属性

盒子的分类

• 不同的元素产生的盒子类型给可能不同 ，但都是矩形

• 一个元素，产生数码样的盒子，取决于它CSS的 display 属性

• display：none 不生成盒子

• display：inline 行盒

• display：block 块盒

• display：其他取值 其他盒子

• 盒子的组成

• margin 外边距：与其他盒子之间的距离

• border 边框

• padding 内边距：边框与内容之间的距离

• content 内容 ：内容的宽度和高度

• 常规流水平居中的方法：

  step1：给一个固定宽度

  step2：给元素添加 margin：auto；

• Margin - 单独的边

  CSS 拥有用于为元素的每一侧指定外边距的属性：

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

  所有外边距属性都可以设置以下值：

  • auto - 浏览器来计算外边距
  • length - 以 px、pt、cm 等单位指定外边距
  • % - 指定以包含元素宽度的百分比计的外边距
  • inherit - 指定应从父元素继承外边距

  **提示：**允许负值

• 容器和项目

容器：元素（装东西）

A 装了一个 B 元素

A 就是 B 的容器

A ：父元素（容器)

B: 子元素 （项目)

• 主轴和交叉轴

• 主轴：默认情况下，水平向右（X 轴）

  水平方向的元素摆放位置：左，中，右

• 交叉轴：默认情况下，垂直向下（Y轴）

  垂直方向元素拜访位置： 上，中，下

创建 Flex 弹性布局

• 针对某个父元素使用 display：flex；过后，这个父元素自动变成容器，里面的所有子元素（项目）都默认在一行显示。

• 当所有项目宽度之和大于容器宽度的时候，所有项目依旧在一行显示，但每个项目都在自动缩小。

  是否换行显示： 前提：所有项目宽度之和超过容器宽度的时候

  flex-wrap（值）：nowrap：不换行（默认）

  wrap：换行，wrap-reverse：换行且第一行在最下方

• justify - content ： flex -start ； 主轴左对齐

  justify - content ： flex - end ； 主轴右对齐

  justify - content ： flex - center； 主轴居中对齐

• justify - content ： space - between

  justify - content ： space - around

  justify - content ： space - evenly

  • space-between, space-around, space - evenly 的相同点和不同点：

  ​ 相同点： 项目和项目之间的距离是相等的。

  ​ 不同点： space-between : 项目和容器之间的距离， 项目和项目之间的距离 * 0

  ​ space-around : 项目和容器之间的距离， 项目和项目之间的距离 * 0.5

  ​ pace - evenly ： 项目和容器之间的距离， 项目和项目之间的距离 * 1

• 项目在交叉轴上的对齐方式 align - items

• 值：

  flex - start ：交叉轴起点对齐 （顶点对齐)

  center : 交叉轴中间点对齐 （居中对齐）

  clex - end ： 交叉轴终点对齐 （底部对齐）

  ​ align - items ： flex - start；

  ​ align - items ： center ；

  ​ align - items ： flex - end；