每日一篇——23秋招CSS面经（2）

何小幸
90 阅读5分钟

每日一篇——23秋招CSS面经（2）

⭐flex

对于轴线：

  • 设定主轴方向
    • flex-direction：
      • row(default)
      • row-reverse
      • column
      • column-reverse
  • 是否换行
    • flex-wrap:
      • nowrap(default)
      • wrap
      • wrap-reverse
  • 前两者可以合并
    • flex-flow:
      • row nowrap(default)
  • 主轴对齐方式
    • justify-content:
      • flex-start(default) 左对齐
      • flex-end 右对齐
      • center
      • space-between 两端对齐，中间间隔相同
      • space-around 每个成员两侧的间隔相等
  • 成员在交叉轴（主轴外的另一个轴）的对齐方式，默认可以理解为y轴
    • align-items:
      • flex-start 交叉轴起点对齐
      • flex-end 交叉轴终点对齐
      • center
      • baseline 文字基线对齐
      • stretch(default) 若未设置高度，则默认占满整个交叉轴
  • 多根轴线（多行）的对齐方式（多根主轴在交叉轴上的对齐方式）
    • align-content:
      • flex-start 与交叉轴起点对齐
      • flex-end 与交叉轴终点对齐
      • center
      • space-between 交叉轴两端对齐，中间平均分布
      • space-around 每根轴线两侧间隔都相同
      • stretch(default) 占满整个交叉轴

对于其中的每一项：

  • order 值为数字，为排序的权重
  • flex-grow 值为数字，意为成员的放大比例，默认为0，若都设为1，则会放大等分剩余空间（忽略其原本宽度，全部等分）
  • flex-shrink 值为数字，意为成员的缩小比例，默认为1，若空间不足，则会缩小相同比例，若设为0，则不缩小，若都不缩小，则会超出
  • flex-basis 值为长度，意为在未分配剩余空间时，成员占据的主轴空间大小，默认为auto，即为成员的本来大小
  • flex 为flex-grow flex-shrink flex-basis的简写，默认为0 1 auto ，后两者可选，我们常用这个属性，其实本质大多数用的都是flex-grow
  • align-self 单个成员的交叉轴对齐方式
    • auto(default) 继承自父元素 如果没有父元素，则默认为stretch
    • flex-start
    • flex-end
    • center
    • baseline
    • stretch

⭐清除浮动

  • 父元素固定宽高

    • 缺点：子元素宽高不确定时无法使用

  • 添加新元素，并设clear:both

    • 缺点：不利于维护

  • 使用伪元素

    • 缺点：兼容性不好

  • 触发父元素BFC

    • 有些属性会影响其他样式，例如overflow:hidden，容易剪裁内容

⭐Grid布局

①定义grid布局：

  • display: grid/inline-grid

②设置行与列的布局

  • grid-template-rows / grid-template-columns
    • 基本使用：grid-template-rows(grid-template-columns): 100px 100px 200px，设置三行（列），高度（宽度）分别为100 100 200px
    • repeat()：grid-template-rows(grid-template-columns): repeat(3, 100px)，设置三行（列），高度（宽度）均为100px
      • auto-fill：grid-template-rows(grid-template-columns): repeat(auto-fill, 100px)，不定有几行/几列，能装多少装多少，当可用空间不足以容纳更多的列时，会创建空的隐式网格项来填充空白区域
      • auto-fit：尽量将每一列放入网格容器中，使得不留下空白的空间，当可用空间不足以容纳更多的列时，会自动调整已有的网格项的大小，以填充剩余空白区域
    • fr：占比，与flex-grow类似，grid-template-rows(grid-template-columns): 100px 1fr 2fr，除去100px，剩下按1:2划分
    • minmax()：grid-template-rows(grid-template-columns): 1fr 1fr minmax(100px, 2fr)，表示第三行（列）最少为100px，最大不能超过前两行（列）的两倍
    • auto：自动调整，grid-template-rows(grid-template-columns): 100px auto 100px，实现自由适配的三栏布局
  • row-gap / columns-gap / gap：行间距列间距以及二合一写法

③划分区域自定义放置元素

  • grid-template-areas：划分区域

    • grid-template-columns: 120px  120px  120px;
  grid-template-rows: repeat(3, 300px);
  grid-template-areas:
    ". header  header"
    "sidebar content content"
    "sidebar .  .";

      定义三行三列，通过grid-template-areas来划分区块，并为其命名， . 表示空

  • grid-area：放置元素

    • .sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.header {
  grid-area: header;
}

      规定哪个类的内容放在哪个区块中

④划分区域自动填充元素

  • grid-auto-flow
    • row 默认值，按行进行依次填充
    • column，按列进行依次填充
    • 附加值dense，是否紧凑填充，可以自动在后方找到合适大小的块填充到前面的单元格中，防止按序填充时出现元素过大填充不满的现象

⑤自由安排元素位置

  • grid-column-start、grid-column-end、grid-row-start、grid-row-end：分别对应网格的上边框位置、下边框位置、左边框位置、右边框位置，通过这四个元素将内容定位到网格中（左上方顶点为1，向右向下递增）
    • span：声明项目跨度（占几个格子），在start中设置，end就可以不用设置
  • 简写形式：grid-area: 2 / 1 / 4 / 3（其中，2表示起始行，1表示起始列，4表示结束行，3表示结束列）

⑥所有元素在单元格内的对齐方式

  • justify-items / align-items：水平/垂直对齐方式
    • start
    • end
    • center
    • stretch（默认）
  • place-items：水平和垂直的合并形式，写两个就是左水平右垂直，写一个就是两者共用

⑦单个元素在单元格内的对齐方式

  • justify-self、align-self、place-self：与⑥中用法完全一致，只是针对单个元素使用

⑧单元格在容器内的对齐方式

  • justify-content / align-content：水平/垂直对齐方式
    • start(默认)
    • end
    • center
    • stretch
    • space-between
    • space-around
    • space-evenly
  • place-content为上两者的合并形式

⑨多出来的东西怎么放？隐式网格

  • grid-auto-columns / grid-auto-rows：定义隐式网格的单元格长宽

一些面试题

  1. 请解释什么是CSS Grid布局？
  2. Grid布局中有哪些主要的概念和术语？
  3. 请解释Grid容器和Grid项之间的区别是什么？
  4. 如何在父元素上应用Grid布局？
  5. 请解释Grid布局中的行和列是如何定义的？
  6. 如何指定Grid项在网格中的位置？
  7. Grid布局中的重叠和层叠是如何处理的？
  8. 如何控制Grid项的大小和对齐方式？
  9. 请解释Grid布局的自动布局机制。
  10. 如何媒体查询和响应式设计与Grid布局结合使用？
avatar
文章
阅读
粉丝