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

Chichi_77_
79 阅读2分钟

深入CSS（下）

display属性

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

行级排版上下文

  • Inline Formatting Context

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

  • IFC内的排版规则

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

块级排版上下文

  • Block Formatting Context

  • 某些容器会创建一个BFC

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

  • BFC内的排版规则

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

Flex Box（一种新的排版方式）

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

主轴

4.png

侧轴

5.png

Flexibility

  • 可以设置子项的弹性，当容器有剩余空间时，会伸展；容器空间不够时，会收缩
  • flex-grow 有剩余空间时的伸展能力
  • flex-shrink 容器空间不足是收缩的能力
  • flex-basis 没有伸展或收缩时的基础长度

Grid布局

  • 相较于flex的单向，grid是二维的

  • 将容器划分为网格，然后把子元素放入网格中，通过网格线放置（线的编号）

  • 划分网格

    • grid-template-columns:100px 100px 200px;
grid-template-rows:100px 100px;

    • grid-template-columns:30% 30% auto;//auto表示剩余自动占满
grid-template-rows:100px auto;

    • grid-template-columns:100px 1fr 1fr;//1fr剩余的占一份
grid-template-rows:100px 1fr;

  • 网格线放置

    • .a{
    grid-row-atart:1;
    grid-column-start:1;
    grid-row-end:3;
    grid-column-end:3;
}

    • .a{
    grid-area:1/1/3/3;
}

float

  • 文字环绕图片

    img{
    float:left;
}

position 绝对定位

  • static 默认值，非定位元素

  • relative 相对自身原本位置偏移，不脱离文档流

    • 在常规流里面布局
    • 相对于自己本应该在的位置进行偏移
    • 使用top、left、bottom、right设置偏移长度
    • 流内其它元素当它没有偏移一样布局

  • absolute 绝对定位，相对非static祖先元素定位

    • 脱离常规流
    • 相对于最近的非static祖先定位
    • 不会对流内元素布局造成影响

  • fixed 相对于视口绝对定位

    • 脱离常规流
    • 相对于窗口定位
avatar
文章
阅读
粉丝