深入CSS（下） | 青训营笔记

ACorCC
68 阅读3分钟

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

常规流布局 Normal Flow

  • 根元素、浮动和绝对定位的元素会脱离常规流
  • 其他元素都在常规流之内（in-flow）
  • 常规流中的盒子，在某种排版上下文中参与布局

行级元素

span、em、strong、cite、code等

块级元素

body、article、div、main、section、h1-6、p、ul、li等

行级排版上下文

  • Inline Formatting Context (IFC)

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

  • IFC内的排版规则

    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align决定一行内盒子的水平对齐
    • vertical-align决定一个盒子在行内的垂直对齐
    • 避开浮动(float)元素

块级排版上下文

  • Block Formatting Context (BFC)

  • 某些容器会创建一个BFC

    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow值不是visible的块盒
    • display: flow-root;

  • BFC内的排版规则

    • 盒子从上到下摆放
    • 垂直margin合并
    • BFC内盒子的margin不会与外面的合并
    • BFC不会和浮动元素重叠

Flex Box 排版上下文

  • 它可以控制子级盒子的

    • 摆放的流向
    • 摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许折行

Webkit 内核的浏览器，必须加上-webkit前缀

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

容器的属性

  • flex-direction

    • 决定主轴的方向（即项目的排列方向）

  • flex-wrap

    • 属性定义，如果一条轴线排不下，如何换行

  • flex-flow

    • flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

  • justify-content

    • 项目在主轴上的对齐方式

  • align-items

    • 项目在交叉轴上如何对齐

  • align-content

    • 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

子项目的属性

  • order

    • 项目的排列顺序。数值越小，排列越靠前，默认为0

  • flex-grow

    • 项目的放大比例，默认为0，即如果存在剩余空间，也不放大

  • flex-shrink

    • 项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

  • flex-basis

    • 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏它的默认值为auto，即项目的本来大小。可以设为px值

  • flex

    • flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

  • align-self

    • 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

Grid 布局

二维布局

浮动 float

通过浮动图片，可以实现文字环绕图片的效果

对于左右布局之类可以用flex布局等来实现，避免清除浮动等问题

绝对定位

position属性

值含义
static默认值，非定位元素
relative相对自身原本位置偏移，不脱离文档流
absolute绝对定位，相对于最近的非static祖先元素定位，脱离常规流
fixed相对于视口绝对定位
sticky粘性定位
avatar
文章
阅读
粉丝