这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天

1.布局

布局分为三种：文档流、浮动、定位

1.1.文档流

文档流有三种盒子：块级(block)、行内块(inline-block)、行内盒(inline)

• 块级元素独占一行，可设置width、height
• 行内块元素可以与行内元素(行内和行内块)从左到右排列,可设置width、height
• 行内元素可以与行内元素(行内和行内块)从左到右排列,但不可设置width、height

1.1.1.BFC(块级排版上下文)

本质上就是一个特殊的css布局环境

以下容器会创建BFC

• 根元素
• 行内块、浮动、非static定位
• flex容器
• overflow不是visible的块级盒子

BFC内部的排版规则

• 垂直margin合并
• BFC内盒子的margin不会与外面盒子的margin合并(可利用此性质解决外边距合并问题)
• BFC不会和浮动元素重叠

1.1.2.flex盒子

• 一种新的排版上下文
• 可以控制子盒子的
  • 摆放的流向(上下左右)
  • 摆放的顺序
  • 盒子宽度和高度
  • 水平和垂直方向的对齐

1.2.浮动布局

浮动元素的特点：

• 脱离文档流
• 浮动元素从左到右排列
• 浮动元素不会覆盖文字(可以用来实现图片环绕文字的效果)

1.3定位

• static 默认
• relative 相对于自身位置偏移，不脱离文档流
• absolute 绝对定位，相对于非static元素定位(如果都没有，就相对于page作为偏移对象)
• fixed 固定定位，相当于视口绝对定位
• sticky 粘性定位，不脱离文档流，如果元素指定位移属性，当浏览器视口距离粘性定位的元素恰好等于这个位移属性的值，那么这个元素将固定在这个视口的位置(类似于固定定位)

今天就写布局了，明天再更新css其它内容，青训营太棒了