我正在参与掘金创作者训练营第5期， 点击了解活动详情

CSS布局

CSS布局的概念

• 通过CSS去拾取网页中的元素，并且控制它们相对普通文档流、周边元素、父容器甚至浏览器窗口的位置
• 覆盖默认的布局行为

布局的基本概念

• 盒子模型
• 普通文档流
  • 从左到右
  • 从上到下

块级元素与行内元素

行内元素：

• 与其他行内元素并排；
• 不能设置宽、高。默认的宽度，就是文字的宽度。

块级元素：

• 霸占一行，不能与其他任何元素并列；
• 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。

行内元素和块级元素的分类：

在以前的HTML知识中，我们已经将标签分过类，当时分为了：文本级、容器级。

从HTML的角度来讲，标签分为：

• 文本级标签：p、span、a、b、i、u、em。
• 容器级标签：div、h系列、li、dt、dd。

PS：为什么说p是文本级标签呢？因为p里面只能放文字&图片&表单元素，p里面不能放h和ul，p里面也不能放p。

现在，从CSS的角度讲，CSS的分类和上面的很像，就p不一样：

• 行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。
• 块级元素：所有的容器级标签都是块级元素，还有p标签。

行内元素和块级元素的相互转换

我们可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。

块级元素可以转换为行内元素：

一旦，给一个块级元素（比如div）设置：

display: inline;

那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：

• 此时这个div不能设置宽度、高度；
• 此时这个div可以和别人并排了。

行内元素转换为块级元素：

同样的道理，一旦给一个行内元素（比如span）设置：

display: block;

那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：

• 此时这个span能够设置宽度、高度
• 此时这个span必须独占一行了，别人无法和他并排
• 如果不设置宽度，将撑满父亲 标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：脱离标准流！

css中一共有三种手段，使一个元素脱离标准文档流：

• （1）浮动
• （2）绝对定位
• （3）固定定位

合理布局的作用

• 使内容更加清晰
• 页面载入更快
• 有利于搜索引擎的爬取

什么是flex布局？

• flex是flexbox的缩写，意为“弹性布局”
• 一维的布局模型
• 任何一个容器都可以指定为flex布局

Flex容器

、

Flex容器上的属性

• flex-direction属性
  • flex-direction：用于设置盒子中子元素的排列方向。属性值可以是：

属性值	描述
row	从左到右水平排列子元素（默认值）
column	从上到下垂直排列子元素
row-reverse	从右向左排列子元素
column-reverse	从下到上垂直排列子元素

备注：如果我们不给父容器写flex-direction这个属性，那么，子元素默认就是从左到右排列的。

• flex-wrap
  • flex-wrap：控制子元素溢出时的换行处理。
• flex-flow
  • flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。
  • flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。
• flex-basis
  • flex-basis 属性用于设置或检索弹性盒伸缩基准值。
• flex-grow
  • flex-grow 属性用于设置或检索弹性盒子的扩展比率。
• flex-shrink
  • flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
• flex
  • flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
  • flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

元素的空间分配

相关链接：img.smyhvae.com/20190821_21…

元素的对齐

• align-items
  • align-items：设置子元素在侧轴上的对齐方式。
  • 属性值可以是：
    • flex-start 从侧轴开始的方向对齐
    •  flex-end 从侧轴结束的方向对齐
    •  baseline 基线 默认同flex-start
    •  center 中间对齐
    •  stretch 拉伸
• justify-content
  • justify-content: flex-start; 设置子元素在主轴上的对齐方式。属性值可以是：
  • flex-start 从主轴的起点对齐（默认值）
  • flex-end 从主轴的终点对齐
  • center 居中对齐
  • space-around 在父盒子里平分
  • space-between 两端对齐,平分

为什么使用flexbox?

• 在元素内部处理空间分布
• 让元素自己处理空间分布

Flex的适用场景

• 导航
• 拆分导航
• 元素居中
• 绝对底部

定位

• 定位能够把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置
• position：

  • stastic 静态定位

  • relative 相对定位

  • absolute 绝对定位

  • fixed 固定定位

  • sticky 粘性定位