百度前端实战训练营--Web布局（上）

Day4：Web布局（上）

CSS常用布局

1. • 什么是布局？

所谓布局，其实包含两个含义：

• 尺寸

• 定位

画一幅画

• 从哪里开始落笔 ---> 浮动

• 画在哪个位置 ---> 定位

• 画多大 ---> 盒模型

布局基本概念：

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

• 覆盖默认的布局行为

2. 普通文档流

默认布局其实就是普通文档流：

• 从左到右

• 从上到下

3. 块级元素、行级元素

4. 合理布局的作用

• 使内容更加清晰

• 页面载入更快

• 有利于搜索引擎的爬取

CSS flex 布局

1. • 什么是flex？

• flex是flexbox的缩写，意为“弹性布局”

• 一维的布局模型

• 任何一个容器都可以指定为flex布局

2. • Flex容器

3. • 常用属性

flex容器上的属性

• flex-direction

• flex-wrap

• flex-flow

flex元素上的属性

• flex-basis

• flex-grow（对剩余空间的分配）

• flex-shrink（对溢出空间的分配）

• flex

元素对齐

• align-items（处理元素在交叉轴方向上的对齐）

• justify-content（处理元素在主轴上的对齐）

4. • 为什么使用flex？

• 在元素外部处理空间分布

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

5. flex的适用场景

• 导航

• 拆分导航

• 元素居中

• 绝对底部

CSS 定位

1. • 定位

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

• position：

• static 静态定位（元素的默认布局，即左右上下）

• relative 相对定位（相对于父容器）

• absolute 绝对定位（脱离父容器，相对于根元素）

• fixed 固定定位（相对于页面，不随父元素布局影响）

• sticky 粘性定位（类似relative+fixed，实例：导航栏始终在对应内容上方）

2. • 浮动

• 把一个元素“浮动”起来，会改变该元素本身和在正常布局流中跟随它的其他元素的行为

• 这一元素会浮动到左侧或右侧，并且从正常布局流中移除，这时候其他的周围内容就会再这个浮动元素的周围环绕