前端CSS基础-CSS深入2

布局方式 块级 vs. 行级

CSS中的概念

块级box	行级box
不和其他盒子并列摆放	和其他行级盒子一起放在一行 或 拆开成多行
适用所有的盒模型属性	盒模型中的width、height不适用

HTML里面的概念，如Div，一般一个HTML标签生成啦一个box

块级元素	行级元素
生成块级盒子	生成行级盒子、内容分散在多个行盒中
body、article、div、main、section、h1-6、p、ul、li等	盒span、em、strong、cite、code
display:block	display:inline

display 属性

display	属性
block	块级盒子
inline	行级盒子
inline-block	本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成行
none	排版时完全忽略

行级排版上下文

注意：只包含行级盒子的容器会创建一个IFC

块级排版上下文

排版规则

Flex Box

当容器内有很多的上下文，现在做布局多用的方式。

示例

默认从左到右的流向。
可以控制流向、对齐等等排版内容。

主轴和侧轴

• 主轴： 通过justify-content对齐
  
• 侧轴：通过align-items对齐
  默认值是stretch（单词释义：撑大、拉紧）
  

Flex宽度和高度的计算（重要特性）

下图：把剩余的空间按2:1分给a和b上。

缩写属性

basis:不被压缩和拉伸的时候默认是100px，实际上平常都直接写宽度是100

Grid布局

Flex主要是一条线，单一方向的布局方式，Grid偏向于二维。

display: grid

划分网络

第一种：分别设置列和行
第三种：最后fr：代表一份，100px除去后各占一份。

grid line 网格线

表示这条黄色的线：
起始点 -> 结束点 (1,1) -> (3,3)

绝对定位 position属性

position: relative

position: absolute

position: fixed

总是相对于视口去定位，特别适合做导航栏