页面布局模型
盒模型中两种常见规则
块级 Block Level Box
- 不和其他盒子并列排放
- 适用所有的盒模型属性
- 块级元素
- 生成块级盒子：body,article,div,main,section,h1-6,p,ul,li等；
- display:block；
- 块级排版上下文：
- 某些容器会创建一个BFC（Block Formatting Context）
- 根元素
- 浮动，绝对定位，inline-block
- Flex子项和Grid子项
- overflow值不是visible的块盒
- display:flow-root
- BFC内排版规则：
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠
- 某些容器会创建一个BFC（Block Formatting Context）
行级 Inline Level Box
- 和其他行级盒子一起放在一行或拆开成多行
- 盒模型中的width、height不适用
- 行级元素
- 生成行级元素；内容分散在多个行盒（line box)中：span,em,strong,cite,code等；display:inline;
- 行级排版上下文：
- 只包含行级盒子的容器会创建一个IFC（Inline Formatting Context）
- IFC内排版规则：
- 盒子在一行内水平摆放
- 一行放不下，换行显示
- text-align决定一行内盒子的水平对齐
- vertical-align决定一个盒子在行内的垂直对齐
- 避开浮动（float）元素
<span>
This is a text and
<div>block></div>
and other text.
</span>
<style>
span{
line-height:3;
boder:2px solid red;
background:coral;
}
div{
line-height:1.5;
background:lime;
}
运行结果如下：
display属性
- block 块级盒子
- inline 行级盒子
- inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体时不会被拆散成多行
- none 排版时被完全忽略
Flex Box 是什么？
- 一种新的排版上下文
- 它可以控制子级盒子的：
- 摆放的流向（➡ ⬅ ⬆ ⬇）
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
主轴对齐
纵轴对齐
Flexibility
- 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
- flex-grow有剩余空间时的伸展能力
- flex-shrink容器空间不够时收缩的能力
- flex-basis没有伸展或收缩时的基础长度
Grid布局（二维布局）
通过grid line 网格线划分
如下图，使用1133划分黄色区域：grid-area:1/1/3/3;
举例：
浮动float
文字环绕效果 文字排版时绕开图片
position属性
position：relative
- 在常规流里面布局
- 相对于自己本应该在的位置进行偏移
- 使用top,left,bottom,right设置偏移长度
- 流内其他元素当它没有偏移一样布局
position：absolute
- 脱离常规流
- 相对于最近的非static祖先定位
- 不会对流内元素布局产生影响
position：fixed
- 相对于窗口进行定位
