CSS布局方法及相关技术
首先我们得了解布局是什么：- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
相关技术：
大体可分为常规流、浮动、绝对定位常规流又可细分为行级、块级、表格布局、FlexBox和Grid布局
又可将每一个内容看成一个个盒子，每个盒子包含高度height、宽度width、边框border、内边距padding和外边距margin五个部分。
padding属性：指定元素四个方向的内边距；设置百分数相对于容器宽度
border属性：指定容器边框样式、粗细和颜色。
margin属性：指定元素四个方向的外边距；设置百分数相对于容器宽度
margin的常用用法是使目标内容居中的效果，即margin：0 auto;
overflow属性：当内容超出盒子时可使用的属性
- visible：将超出盒子的内容显示出来
- hidden：将超出盒子的内容隐藏
- scroll：设置一个滚动条
CSS盒模型
CSS的盒模型布局结构可分为块级和行级。块级：
- 不和其他盒子并列摆放,独占一行
- 适用所有的盒模型属性
- 和其他行级盒子一起放在一行或拆开成多行
- 盒模型中的width、height不适用
块级元素：生成块级盒子，比如body、article、div、section等元素。
行级元素：生成行级盒子，内容分散在多个行盒中，比如span、strong、em等元素。
除此之外也可通过display：block或display：inline把指定内容转化为块级盒子或行级盒子。
display属性：盒模型的一个重要属性。包括：
- block：块级盒子
- inline：行级盒子
- inline-block：本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
- none：排版时完全被忽略，基本不用到
常规流布局
行级排版上下文(Inline Formatting Context)的排版规则：
- 盒子在一行内水平摆放，一行放不下时，换行显示
- text-align决定一行内盒子的水平对齐
- vertical-align决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素
块级排版上下文(Block Formatting Context)的排版规则：
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会与浮动元素重叠
FlexBox是什么
- 一种新的排版上下文
- 它可以控制子级盒子的：
- 摆放的流向
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许拆行
flex里的控制元素排版的重要属性：
justify-content属性：控制flex里面元素的主轴对齐关系
align-items属性：控制flex里面元素的交叉轴对齐关系
flex盒子的弹性能力Flexibility:
- 可以设置子项的弹性:当容器有剩余空间时，会伸展;容器空间不足时，会收缩。
- flex-grow：有剩余空间时的伸展能力
- flex-shrink：容器空间不足时收缩的能力
- flex-basis：没有伸展或收缩时的基础长度
为了丰富页面的排版布局方式，而flex布局方法也略显单一，进而推出了Grid排版上下文，即网格布局。
Grid排版上下文display:grid
- display:grid使元素生成一个块级的Grid容器
- 使用grid-template相关属性将容器划分为网格
- 设置每一个子项占哪些行或列 、
Floa浮动
使需要的内容浮动到指定内容的左边或右边，达到相互环绕的效果。重要属性：
float:left---左浮动
float:right---左浮动
float:none 或 clear:left---清除浮动
Position绝对定位
重要属性：position:static：默认值，非定位元素。
position:relative：相对自身原本位置偏移，不脱离文档流(常规流)，使用top、left、right、bottom设置偏移长度。
position:absolute：绝对定位，相对于非static祖先元素定位。设置偏移长度同relative一致
position:fixed：相对于视口绝对定位。
absolute绝对定位一定是相对于设置了relative的元素定位的！！！
通过不同的布局方式以及各种各样的样式渲染HTML内容，将之从枯燥的文字变为生动的翰墨，这不正是CSS的魅力所在嘛。
