CSS3全览_最新布局

CSS3全览_最新布局

目录

作者: https://www.cnblogs.com/xiaxiangx/

1. 浮动及其形状

很长时间, 浮动元素是所有 Web 布局方案的基础 ( 很大程度上依赖 clear 属性 )

  1. 浮动
    • 以前只有图像能浮动, 现在任何元素都可以浮动
    • float, 取值 left, right, none, 浮动元素后要注意, 浮动的元素脱离了常规的文档流, 不过对布局仍有影响. 使用 CSS 浮动元素的独特之处是, 浮动的元素基本上算是处在单独的平面上, 浮动元素四周的外边距不折叠. none 作用是彻底禁止元素浮动
    • 容纳块: 最近的块级祖辈元素, 浮动后变块元素
    • 浮动规则如下
      1. 浮动元素的左 (或右) 外边界不能超过容纳块的左 (或右) 内边界.
      2. 假如左侧有个浮动, 之后的浮动只能在后面, 除非可以另出一层, 右侧类似
      3. 左右浮动不能重叠
      4. 浮动元素的顶边不能比父元素的内顶边高. 如果浮动元素位于两个折叠的外边距之间, 在两个元素之间放置它的位置时, 将视有个块级父元素
      5. 浮动元素的顶边不能比前方任何一个浮动元素或块级元素的顶边高
      6. 浮动元素的顶边不能高于文档源码中出现在浮动元素之前的元素生成的框体所在的行框的顶边
      7. 空间不够时, 浮动元素会被挤在新的一行中
      8. 浮动元素必须放在尽可能高的位置上
      9. 左浮动元素必须尽量向左移动
    • 具体行为, 负外边距对浮动的影响, 导致浮动元素超出了所在的父元素, 原因是子元素也超出了所在的父元素, 当浮动比父元素宽时, 浮动元素会溢出
    • 浮动元素与内容重叠, 行内框与浮动元素重叠时, 其边框, 背景和内容都在浮动元素 "之上" 渲染. 块级框与浮动元素重叠时, 其边框和背景在浮动元素 "背后" 渲染, 而内容在浮动元素 "之上" 渲染
  2. 清除浮动
    • clear 取值, left, right, both, none, 清除浮动后, 浮动元素就不能与清除浮动的内容重叠, 浮动框的边界由浮动元素外边距的边界划定
  3. 浮动形状
    • 项规定浮动元素周围内容按什么形状流动, 首先定义一个形状. shape-outside,
      • 使用图像形状时, 内容会流入与之 "直接接触" 那一侧的透明部分
      • 其他形状, inset(), circle(), ellipse(), polygon(), margin-box, border-box, padding-box, content-box, 默认使用外边距框
      • shape-outside: inset(10px 0.5em 15px 0.5em);
      • 浮动框会裁剪超出的浮动形状
      • 使用百分数设置圆形浮动形状的半径时, 半径相对一个引用框计算, 根号下宽度平方加高度平方, 除以根号2, 椭圆提供两个半径, circle(farthest-side at top left), ellipse( 20px 30px at top left)
      • 多边形, polygon(25px 0, 50px 25px, 25px 50px, 0, 25px), 超出的形状会被裁剪. 多边形可以调整填充规则, nonzero, evenodd
    • 使用透明图像定义形状, shape-image-threshold, 指定透明度为多少时允许内容流入.
    • 为形状添加外边距, shape-margin 为形状添加 "外边距" , 它可能被margin裁剪掉, 因此shape-margin 要小于等于margin

2. 定位

相对元素框的常规位置定义元素的具体位置

  1. 基本概念

    • 定位 position, 取值, static, relative, absolute, fixed, sticky
    • 容纳块, 包含另一个元素的框体. position 属性的值是 relative 或 static, 其容纳块由最近的块级, 单元格或行内块祖辈元素的框体的内容边界划定, 如果 position 属性的值是 absolute, 其容纳块是 position 属性的值不是 static 的最近的祖辈元素, 具体规则如下
      • 如果祖辈元素是块级元素, 容纳块是那个元素的内边距边界, 即由边框限定的区域
      • 如果祖辈元素是行内元素, 容纳块是祖辈元素的内容边界. 在由左至右书写的语言中, 容纳块的顶边和左边是祖辈元素中第一个框体的内容边界的顶边和左边, 底边和右边是最后一个框体的内容边界的底边和右边. 在从右向左书写的语言中, 容纳块的右边界是第一个框体内容区的右边界, 左边界是最后一个框体内容区的左边界, 顶边和底边和前述情况一样
      • 如果没有祖辈元素, 元素的容纳块是初始容纳块

  2. 偏移属性

    • 四种, top, right, bottom, left, 偏移属性定义的是距容纳块相应边的偏移距离
    • 定义了上下左右四个定位, 宽度和高度自动推断出来

  3. 宽度和高度

    • 默认是 auto, width, height,
    • 限制宽度和高度, min-width 和 min-height, max-width, max-height

  4. 内容溢出和裁剪

    • 溢出, 用 overflow, 取值, visible, hidden, scroll, auto, scroll:裁剪了, 有滚动条

  5. 元素的可见性

    • visibility, 取值, visible, hidden, collapse, hidden: 和vue的show类似, collapse在渲染表格时使用

  6. 绝对定位

    • 绝对定位的容纳块, 绝对定位的元素完全从文档流中移除, 其位置相对容纳块确定

    • 绝对定位元素的位置和尺寸, 定义好四个位置, 宽度和高度自动决定

    • 自动确定边界的位置, 绝对定位元素的边界与 "静态位置" 的边界对齐

    • 非置换元素的位置和尺寸 , 绝对定位元素有 "自动缩放" 功能, 把外边距设为auto, 横向居中显示绝对定位元素, 过约束时忽略 right 属性的值, 过约束时忽略 margin-right

    • 外边距设为 auto, 纵向居中显示绝对定位元素

    • 置换元素的位置和尺寸

      1. 如果把 width 设为auto, width 的具体值由元素内容的内在宽度确定
      2. 在从左至右书写的语言中, 如果 left 的值是auto, auto 将替换为静态位置, 从右向左汇总, right 的auto值将被替换为静态位置
      3. 如果 left 或 right 的值仍是 auto, 把 margin-left 或 margin-right 的auto值替换为 0
      4. 如果此时 margin-left 和 margin-right 的值仍为 auto, 把二者设为相等的值, 即让元素居中显示在容纳块中
      5. 最后如果还有 一个属性的值为 auto, 修改为满足等式所需的值, 如果导致过约束, 用户代理将忽略 right

    • 纵轴布局类似

      1. 如果把 height 设为auto, height 的具体值由元素内容的内在高度决定
      2. 如果 top 的值是 auto, 替换为置换元素的静态位置
      3. 如果 bottom 的值是auto, 把值为 auto 的margin-top 或 margin-bottom 替换为0.
      4. 如果此时margin-top 和 margin-bottom 的值仍为 auto, 把二者设成相等的值, 即让元素居中显示在容纳块中
      5. 最后, 如果还有一个属性的值为auto, 修改为满足等式所需的值

      与非置换元素一样, 如果过约束了, 用户代理将忽略 bottom 的值.

    • Z轴上的位置, z-index, z-index的值越大, 元素离读者的距离越近. 因此, 值大的元素可能会遮盖其他元素. 使用 z-index 设置堆叠次序时, 子元素不能在父元素背后绘制. z-index: auto 可以视作 z-index: 0

  7. 固定定位

    • 固定定位实现框架式界面, 可以把页头固定在视图顶部, 把侧边栏固定在视图一侧

  8. 相对定位

    • 相对定位使用偏移属性移动元素, 相对定位中, 元素从常规的位置移开了, 但是其占据的空间并没有消失.
    • 相对定位的元素还可能与其他元素重叠. 过约束, 后一个设为前一个值的相反数

  9. 粘滞定位

    • position: sticky, 偏移属性( top, left等 ) 用于定义相对容纳块的粘滞定位矩形.
    • 带 auto 的偏移属性无效, 某个位置触发了多个粘滞定位, 那么这些元素会堆在一起

3. 弹性盒布局

弹性盒布局把已完艰巨的布局任务变得极为简单

  1. 弹性盒基础

    • 在元素上声明 display: flex 或 display: inline-flex 便激活弹性盒布局, 这个元素也成为弹性布局. 弹性容器的子元素称为弹性元素. 把一个元素设为弹性容器后, 只有直接子元素使用弹性盒布局, 其他后代元素不受影响. 主轴是横向, 也可以是纵向. 空白的处理方式有很多.

  2. 弹性容器

    • flex-direction 属性控制排布弹性元素的主轴. 取值, row, row-reverse, column, column-reverse. 不要使用 flex-direction 修改从右至左书写语言的布局. 正确的做法是使用 dir 属性, 或者使用, CSS writing-mode属性

    • 其他书写方向, 弹性盒能自动转换弹性方向, 书写模式由 writing-mode, direction, text-orientation属性设定, 也可以使用 HTML 的 dir 属性设置

    • 换行, 在容器中设置 flew-wrap 属性, 允许弹性元素换行, 变成多行或多列, 而不让弹性元素从容器中溢出, 或者缩减尺寸, 挤在同一行, 取值, nowrap, 挤在一行, wrap, 换行, wrap-reverse

    • 定义弹性流, flex-flow, 定义主轴和副轴的方向, 以及是否允许弹性元素换行. 它是 flew-flow 属性是 flex-direction 和 flew-wrap 两个属性的简写形式. 使用 flex-flow: wrap column-reverse;

    • 主轴: 内容沿此轴流动. 在弹性盒中, 指弹性元素流动的方向

      主轴尺寸: 主轴方向上内容的总长度

      主轴起边: 主轴上内容开始流动的那一端

      主轴终边: 主轴上内容流向的那一端, 与主轴起边相对

      垂轴: 理解为副轴

      垂轴尺寸: 副轴总长度

      垂轴起边: 垂轴上内容开始流动的那一端

      垂轴终边: 垂轴上内容流向的那一端, 与垂轴起边相对

    • flex-wrap 续谈

  3. 布置弹性元素

  4. 弹性容器

    • 如果弹性元素不能填满整个弹性容器, 弹性元素将统一向主轴起边靠紧.

  5. 调整内容

    • justify-content, 取值, flex-start, flex-end, center, space-between, space-around, space-evenly, (between, 两端有, 中间平分)
    • 单行溢出的影响, between只包括头, around和evenl包括中间

  6. 对齐元素

    • justify-content 定义弹性元素在弹性容器主轴方向上的对齐方式, 而 align-items 属性把所有弹性元素都向垂轴的起边, 终边或中线对齐
    • align-items, 取值, flex-start, flex-end, center, baseline, stretch(默认),
    • 基线对齐, baseline, 一行中的弹性元素向第一条基线对齐. 看谁的第一条基线最下
    • 如果想改变某个或某些弹性元素的对齐方式, 不是全部修改, 为相应的元素设置align-self属性, 这个属性的取值与 align-items 一样

  7. align-self属性

    • align-self, 这个属性在单个弹性元素上覆盖 align-items , 取值和 align-items 一样

  8. 对齐方式

    • align-content, 取值, flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, 作用于justify-content

  9. 弹性元素

    • 为有子节点的元素声明 display: flex 或 display: inline-flex 即可创建弹性容器, 子节点是弹性元素, 父节点是弹性容器
    • 弹性元素的特性, 弹性元素的外边距不折叠, 应用到弹性元素的 float 和 clear 将被忽略( 然而, float属性对框体的生成仍有影响, 因为display属性的计算值受它影响 ), 有个匿名弹性元素放没有标签的文本. vertical-align 对弹性元素没有影响, 只用于设定弹性元素中文本的对齐方式.
    • 绝对定位, float 不会浮动弹性元素, 但是 position: absolute 不一样, 如果绝对定位弹性容器的子元素,与绝对定位普通元素一样, 将从文档流中移除, 不再参与弹性布局. 但受到justify-content, align-self 值的影响, order 属性对其无影响
    • 最小宽度 min-width 默认是 auto, 而不是0, 如果将其设置为0, 不换行溢出情况下, 弹性元素会自动压缩适应

  10. 适用于弹性元素的属性

  11. flex属性

    • flex-grow, flex-shrink, flex-basis 的简写, 取值多加个 null
    • 弹性元素所在的框体尺寸由 flex 决定, 而不是 height 或 width, 要素三个, 弹性增长因子, 弹性缩减因子和弹性基准. 弹性基准指明如何应用弹性增长因子和弹性缩减因子.

  12. flex-grow属性

    • 开发人员在flex简写中定义 flex-grow 属性
    • flex-grow属性定义有多余的空间时是否允许弹性元素增大, 以及允许增大且有多余的空间时, 相对其他同辈弹性元素以什么比例增大, 取值是数字, 负数无效, 依据弹性元素的 增长因子的比例分配空闲空间
    • 使用 flex 分配的全部空间, 单独使用 flex-grow 只分配剩余空间

  13. flex-shrink属性

    • 定义空间不足以放下所有弹性元素时, 当前弹性元素相对其他同辈弹性元素将缩小多少. 宽度相同情况下与grow类似, 宽度不同情况下, 有个缩小比例, 缩小比例= 缺少的空间/((宽度1*缩减因子1)+(宽度2*缩减因子2)+...+(宽度n*缩减因子n)), 每个弹性元素缩小的量等于 缩小比例*缩减因子

    • 不同的基准, 如果宽度和弹性基准都是 auto, 缩减因子为零时, 弹性元素中的内容不换行. 缩减因子为任何正式都会导致内容黄

  14. flex-basis属性

    • 定义弹性元素的初始或默认尺寸
    • 自动确定弹性基准, 设为 auto 时, 不管是显式声明还是取默认值, flex-basis 等于元素在主轴方向上的尺寸, 就像没把元素变成弹性元素一样. 如果 width 或 height 也是auto, 那么弹性基准回落为 content
    • 默认值, 既没有声明 flex-basis , 也没有声明flex, 弹性元素的主轴尺寸是未弹性变形时元素的尺寸, 因为默认值是 auto
    • 长度单位, 弹性基准的优先级比 宽度或高度 高. 最小最大宽高值优先级更大, 弹性基准为百分数值时, 主轴尺寸相对弹性容器计算. 虽然弹性基准的百分数值相对弹性容器的宽度计算, 但是主轴尺寸受同辈元素的影响
    • 基准为 auto 时, 只有多出的空间按比例分配给允许增大的弹性元素. 基准为0分配全部空间. 如果声明了flex属性, 但是没有设定弹性基准要素, 默认为0

  15. flex 简写属性

    • initial, 根据width 或 height 属性确定尺寸, 允许缩小. 不能增大
    • auto, 可以根据 width 或 height 属性确定弹性元素的尺寸, 元素是完全弹性的, 既可以缩小也可以增大.
    • none, 没有弹性. 数值
    • 数字值, 只有一个是增大因子

  16. order属性

    • order 属性用于修改单个弹性元素的显示顺序, 默认是0, 越小排的越靠前

4. 栅格布局

布局一直是最为重要的功能, float和clear布局方法不恰当. 弹性布局只适用特定情况, 栅格布局最好

  1. 创建栅格容器

    • 栅格有两种, 行内栅格和常规栅格. 栅格容器不是块级容器. 浮动元素不会打乱栅格容器, 栅格容器的外边距不与其后代的外边距折叠.
    • 有些 CSS 属性和功能不能用在栅格容器和栅格元素上
      • 栅格容器上的所有 column 属性( 例如 column-count, columns 等) 都被忽略
      • 栅格容器没有 ::first-line 和 ::first-letter 伪元素, 如果使用, 将被忽略
      • 栅格元素 (而非栅格容器) 上的 float 和 clear 属性将被忽略. 尽管如此, float 属性对栅格容器中子元素的 display 属性的计算还是有影响的, 因为栅格元素的 display 值在变成栅格元素之前计算
      • vertical-align 属性对栅格元素不起作用, 不过可能会影响栅格元素中的内容
      • 如果为栅格容器声明的 display 值是 inline-grid, 而目标元素是浮动的或绝对定位的, 那么 display 的计算值将变为 grid (取代 inline-grid)

  2. 基本的栅格术语

    • 栅格容器是确立栅格格式化上下文的框体, 即定义一个栅格区域, 其中的元素根据栅格布局规则排布. 栅格元素是在栅格格式化上下文中参与栅格布局的东西
    • 栅格轨道, 两条相邻的栅格线之间夹住的整个区域, 从栅格容器的一边延续到对面, 即栅格列或栅格行. 栅格轨道的尺寸由栅格线的位置决定. 可以对比表格中的列和行理解. 用适用性更广的语言来说, 可以称之为块级轴和行内轴轨道
    • 栅格单元, 指四条栅格线限定的区域, 内部没有其他栅格线贯穿, 类似单元格. 这是栅格布局中区域的最小单元. 栅格单元不能直接使用 CSS 栅格属性处理, 既没有属性能把一个栅格元素放在指定的栅格单元中
    • 栅格区域, 值任何四条栅格限定的矩形区域, 由一个或多个栅格单元构成. 最小的栅格区域是一个栅格单元, 最大的栅格区域是栅格中所有的栅格单元. 单个区域能使用 CSS 栅格属性直接处理, 定义好栅格区域后即可在其中放置栅格元素

  3. 放置栅格线

    • grid-template-rows, grid-template-columns, 百分比相对容器, 使用这两个属性可以大致定义栅格模板中的栅格线, 一条栅格线始终可以使用数字引用, 此外创作人员也可以为其命名.

    • 固定宽度的栅格轨道

      #grid{
	display: grid;
    grid-template-columns: 
        [start col-a] 200px [col-b] 50% [col-c] 100px [stop end last];
    grid-template-rows:
        [start col-a] 200px [col-b] 50% [col-c] 100px [stop end last];
}

      使用 100% 可能导致当前行被推到容器外面, 这个问题的处理方式有两种, 一种是设定极值, minmax(a, b), a是最小尺寸, b是最大尺寸, 然后在尺寸内尽量占满全部. 还可以使用calc() 计算.

    • 弹性栅格轨道

      • 弹性栅格轨道的尺寸基于弹性容器中非弹性轨道以外的恐惧确定, 或者基于整个轨道中的具体内容而定.
      • 份数单位, 把余下空间分成一定份数, 分配给各栏, 可以使用 fr 单位, 可以写成 grid-template-rows:1fr 1fr 1fr 1fr, grid-template-rows:2em 1fr 1fr 10%: 不管中间有多大空间, 平均分成两份. 如果想确保一个最小值, 其中一列可以写成 minmax(5em, 3fr), 但是最小值部分不允许使用 fr 单位, 设定最大值 minmax(0, 500px), 通常为500px
      • 根据内容设定轨道的尺寸, min-content 和 max-content
      #grid{
    display: grid;
    grid-template-columns: 
        max-content max-content max-content max-content;
    grid-template-rows:
        max-content max-content max-content max-content;
}

      • 需要使用 minmax 限定栅格轨道的尺寸

        #grid{
	display: grid;
    grid-template-columns: 
        minmax(0, max-content)  minmax(0, max-content)  minmax(0, max-content)  minmax(0, max-content);
  
}

    • 根据轨道中的内容适配, fit-content(argument), minmax(min-content, max-content)

    • 重复栅格线, grid-template-columns: repeat(3, 2em 1fr 1fr) 2em;

      • 自动填充的轨道, 一直重复, 直到没有空间, repeat(auto-fill, [top] 5em [bottom]);

      • 自动重复的局限是, 只能有一个可选的栅格线名称, 一个尺寸固定的轨道和另一个可选的栅格线名称. 不能个重复多个尺寸固定的轨道, 也不能重复多个尺寸弹性变化的轨道. 在一个轨道模板中只能有一个自动重复的模式

      • 固定数量的重复模式可以和自动填充的轨道结合在一起使用

        #grid{
	display: grid;
    grid-template-columns: 
        repeat(3, 20em) reapeat(auto-fill, 2em);
   	或 repeat(auto-fill, 2em) repeat(3, 20em);
}

      • 使用 auto-fit , 没有栅格元素的轨道将被剔除, 除此之外, auto-fit 的行为与 auto-fill 一样

    • 栅格区域, 把栅格画出来, grid-template-areas, 字符任意

      • #grid{
	display: grid;
  	grid-template-areas:
        "h h h h"
        "l c c r"
        "l f f f";

      • 每个标识单位单边一个栅格单元, 合并的形状必须为矩形, 不想使用的栅格单元可用一个 . 或多个 ... 字符占位

      • 命名栅格区域就自动为首位两条栅格线命名了, 举例, header区域, 第一条列栅格线和第一条行栅格线都是 header-start, 结尾的列栅格线和行栅格线都是 header-end, 也可以反向操作, 按规则命名栅格线从而命名栅格区域

  4. 在栅格中附加元素

    • 使用行线和列线, grid-row-start, grid-row-end,grid-column-start, grid-column-end

      • 使用方式

      • .one{
    grid-row-start: 2; grid-row-end: 4;
    grid-column-start: 5; grid-column-end: 10;
}
.three{
    grid-row-start: 4; grid-column-start: 6;
}
# 没写end默认向后移动一位

      • 还可以把结束值改为 span 1, span. span 后面的数字是指 "跨指定数目的栅格轨道". grid-column-end: span 1, span 后面的数字不能为 0 或负数. 开始值也可以是 span, 代表从结束往前. 与span后的数字不同, 栅格线的编号可以使用负数, 表示从后向前. span后出现名称, span 2 col-a: 表示以 col-a 为名称的后两位

      • 还可以引用栅格线名称的方式, 即通过栅格区名称的方式

      • grid-template-areas:
	"header header header header"
	"leftside content content rightside"
	"leftside footer footer footer";
#masthead{
    grid-row-start: header;
    grid-column-start: header; grid-row-end: header;
}
#sidebar{
    grid-row-start: 2; grid-row-end: 4;
    grid-column-start: leftside / span 1;
}
#main{
    grid-row-start: content; grid-row-end: content;
    grid-column-start: content;
}
#navbar{
    grid-row-start: rightside; grd-row-end: 3;
    grid-column-start: rightside;
}
#footer{
    grid-row-start: 3; grid-row-end: span 1;
    grid-column-start: footer; grid-column-end: footer;
}

    • 行和列的简写属性, grid-row, grid-column, 适用于栅格元素和绝对定位的元素, grid-row: R3 / 7; grid-column: col-B / span 2;

      • 以斜线分割的两个部分中, 前一部分定义的是开始栅格线, 后一部分定义的是结束栅格线.
      • 如果值中没有斜线, 那么定义的是开始栅格线, 结束栅格线取决于开始栅格线的值. 如果开始栅格线是用名称引用的, 那么结束栅格线也使用那个名称引用. 如果只提供一个数字, 那么第二个数字被设为auto. 使用相同的名称命名栅格线和栅格区域是有一定风险的.
      • 最好不要使用相同的名称命名栅格区域和栅格线

    • 隐式栅格

      • 但栅格元素超出了显式定义的栅格时, 浏览器会再创建隐式栅格线, 可以根据条件新建命名的栅格线

    • 错误处理

      • 开始线和结束线互换, 结果对调

      • 开始线和结束线 都使用 span, 结束线的值将被丢弃, 替换为auto

      • 如果只用具名跨度指明栅格元素的位置, 该如何处理

        grid-row-start: span footer;
grid-row-end: auto;

        规范不允许这样做, 因此, span footer 将替换为 span 1

    • 使用区域, grid-area, 直接引用栅格区域 grid-area: header , 栅格线顺序, 上左下右, grid-area: 1 / 1 / 2 / 2; 只有三个值, 那么缺少的 grid-column-end 假如是名字, 那么就和 grid-column-start 的值相同, 如果开始线的值是一个数字, 那么结束线的值被设为auto. 如果只有两个值或一个值也是这样处理, 名字和数值是不同处理方案

    • 栅格元素重叠, 重叠时会分层

  5. 栅格流

    • 栅格流主要分为两种模式, 即行优先和列优先, 不过二者都可以通过密集流(denseflow)增强. 栅格流通过 grid-auto-flow 属性设置.
    • grid-auto-flow 取值 row(默认), column || dense, 先填满一行, 再下一行. column, 先填满一列, 再下一列.
    • 栅格流放的是栅格区域, 再把栅格元素附加到栅格区域中. 如果自动流动的元素比所在的列宽, 或者比所在的行高, 解决方式有 添加 tall 或 wide 类( 或二者兼具)
    • 行流的工作方式, 在每一行从左到右排, 如果有足够的恐惧放下一个栅格元素, 就把栅格元素放在那, 如果栅格元素被其他栅格元素占据了, 就跳过那个栅格元素.
    • 如果想让栅格元素尽量靠近, 而不管顺序会受到什么影响, 只需要在grid-auto-flow的值里加上关键字dense
    • 设为密集栅格流时, 浏览器会沿流动方向 ( row 或 column ) 从起点 ( 在从左到右书写的语言中是左上角 ) 开始扫描整个栅格, 找到能放下的就放心, 密集栅格流能让相册更紧凑

  6. 自动增加栅格线

    • 默认情况下, 自动增加的行是所需的最小尺寸. 想进一步控制尺寸, 使用 grid-auto-rows 和 grid-auto-columns 属性, 取值: 可以是一个尺寸值, 也可以是一对极值, minmax()
    • 使用 grid-auto-rows: 80px;

  7. grid简写属性

    • 以简洁的句法定义栅格模板, 或者设定栅格流, 并为自动增加的轨道设定尺寸. 但是二者不能同时设置. 此外, 未定义的值都重置为初始值

    • grid:
	"header header header header" 3em
	". content sidebar ." 1fr
	"footer footer footer footer" 5em /
	2em 3fr minmax(10em, 1fr) 2em;
# 行轨道与列轨道直接以斜线分割
# 等价于
grid-template-areas:
	"header header header header"
	". content sidebar ." 
	"footer footer footer footer";
grid-template-rows: 3em 1fr 5em;
grid-template-columns: 2em 3fr minmax(10em, 1fr) 2em;

    • 融合 grid-auto-flow, grid-auto-rows 及 grid-auto-columns

    • grid-auto-flow: dense rows;
grid-auto-rows: 2em; 
grid-auto-columns: minmax( 1em, 3em);
# 等效
grid: dense rows 2em / minmax(1em, 3em);

    • 相同的结果, 使用 grid 属性时的输入量更好. 如果简写, 与列轨道和行轨道相关的属性都归为默认值. 因此, 下面两个规则是等效的:

      grid: dense rows 2em / minmax(1em, 3em);
# 等效
grid: 
dense rows 2em / minmax(1em, 3em);
grid-template-rows: auto;
grid-template-columns: auto;

    • 子栅格, grid 属性还可以取一个值: subgrid, 每个 module 元素中的栅格元素 ( 即其子元素 ) 将根据 #grid 定义的栅格对齐.

  8. 释放栅格空间

    • 栏距, 两个栅格轨道之间的间隔. 一个轴上只能设定一个间隔值. 使用 grid-row-gap, grid-column-gap, 取值只能是数字和百分比. 可以写极值. 使用

      #grid{
 display: grid; height: 500px;
    grid-template-rows: 100px 1fr 1fr 75px;
    grid-row-gap: 15px;
}

    • 简写属性, grid-gap, 目前改为 gap, 定义两个, 一个行栏距, 一个列栏距

    • 栅格元素与盒模型

      • 当 width 和 height 的值都是 auto. 所有元素可以根据需要自由伸缩. 如果width 或 height 的值不是 auto, 为了满足算式, 外边距的值将被覆盖.
      • 计算栅格轨道的尺寸时将会忽略栅格元素的外边距
      • 尺寸超出后做出让步的是右外边距和下外边距
      • 与块级布局一样, 可以使用auto值指定让那边的外边距做出让步. 假设我们想让栅格元素向栅格区域的右边对齐. 把栅格元素的左外边距设成 auto 便会得到这样的结果
      • 把上下外边距都设为 auto, 元素将纵向居中显示, 开始栅格线和结束栅格区域作用容纳块和定位上下文, 栅格元素就在这个上下文中定位
      • 不过, 绝对定位带来一个问题: 与栅格线有关的额属性, 其 auto 值的行为变了, 例如, 在绝对定位的栅格元素上应用 grid-column-end:auto, 结束栅格线为一条新的特殊栅格线, 这种行为的一个影响是, 如果绝对定位的栅格元素没有指定开始栅格线和结束栅格线, 那么定位上下文为栅格元素容器的内边距内边界

  9. 栅格的对齐方式

    • 栅格布局的对齐

      属性 对齐的目标 适用于
      justify-self 行内方向上的一个栅格元素 栅格元素
      justify-items 行内方向上的全部栅格元素 栅格容器
      justify-content 行内方向上的整个栅格 栅格容器
      align-self 块级方向上的一个栅格元素 栅格元素
      align-items 块级方向上的全部栅格元素 栅格容器
      align-content 块级方向上的整个栅格 栅格容器
      • 只要没有显式设定 width 或 height , 元素的内容将自动 "收缩" , 而不是像默认行为那样, 占满整个栅格区域. left 和 right 在纵向对齐方式上当做 start 处理
      • 在横轴对齐, self-start(RTL) 和 self-end 与预期一致, 但是, 在纵轴上, RTL失效, self-start 在上, self-end 在下
      • stretch, 在指定的方向上拉伸元素, 从一边延伸到另一边, 条件是宽高设为auto, 否则无效果
      • 纵向对齐还有两个值可用, align-self: last-baseline;, align-self: baseline;

    • 纵向对齐和横向对齐全部元素

      • align-items 和 justify-items, 这两个属性的取值与前一模一样, 而且作用也相同, 只不过应用的对象是栅格容器中的全部栅格元素, 而且必须应用到栅格容器上, 而不能应用到单个栅格元素上
      • align-content 和 justify-content 属性以一定的方式分布栅格元素, 抑或横向对齐或纵向对齐整个栅格, 取值, space-between, space-around, space-evenly, 还有一个比较新的值, stretch, 把余下的空间均匀分配给各个栅格轨道, 而不分配给栏距, 没有浏览器支持
      • 在纵向上, align-content, left 和 right 没有实际意义, 因此当做 start 处理

  10. 分层和排序

    • 默认情况下, 栅格元素按照在文档源码中的顺序叠放, 即在文档源码中靠后的栅格元素, 像是在靠前的栅格元素前面. 如果想自己设定顺序, 可以使用 z-index 属性. 正值离屏幕近, 负值远
    • 调整栅格元素顺序的另一种方式是使用 order 属性, 这个属性的作用与在弹性盒布局中一样, 为栅格轨道中的栅格元素设定 order 值便可以改变栅格元素的顺序.
    • 可以使用 order 重排栅格元素布局顺序得唯一情况是, 文档源码与布局的顺序不同.

5. 表格布局

通过 CSS 排布表格的方式

  1. 表格格式化

    • 表格的视觉排布

      • 表格内部元素生成矩形框, 有内容, 内边距和边框, 但是没有外边距
      • 一个行框 (row box) 包含一个由栅格单元构成的行
      • 一个行组 (row group) 框包含的栅格单元就是行组中各行框包含的栅格单元
      • 一个列宽 (column box) 包含一个或多个栅格单元构成的列
      • 一个列组 (column group) 框包含的栅格单元就是列组中各列宽包含的栅格单元
      • 虽然单元格可能跨多行或多列, 但是 CSS 没有定义具体方式.
      • 单元格的矩形框不能超出表格或行组的最后一个行框. 如果表格的结构可能导致这样的结果, 单元格必须变小, 直至能在表格或行组中放下为止.

    • 设定显示方式的值

      • display, 取值, table, inline-table, table-row(tr), table-row-group(tbody), table-header-group(thead), table-footer-group(tfoot), table-column(col), table-column-group(colgroup), table-cell(th, td), table-caption
      • 行主导, 这个模型假设创作人员在使用标记语言时会显示声明行.
      • 列, 单元格可以同时属于两个上下文 (行和列), 尽管在文档源码中单元格是行的后代. 在 CSS 中, 行和行组会只能应用四个与表格无关的属性: border, background, width 和 visibility. 仅当 border-collapse 属性的值为 collapse 时才能为列和列组设置边框, 仅当单元格及所在的行是透明背景时列和列组的背景才可见, width, 定义列和列组的最小宽度, visibility, 如果列或列组的 visibility 属性值为 collapse, 那么列 (或列组) 中的单元格都不渲染

    • 匿名表格对象

      • CSS的表格模型可能插入七种不同的匿名对象.

        对象插入规则

      1. 如果 table-cell 元素的父元素不是 table -row, 在 table-cell 和其父元素之间插入一个匿名 table-row 对象. 插入的对象将包含 table-cell 元素的全部后续同辈元素. 父元素为 table-row-group 时上述规则也成立
      2. 如果 table-row 元素的父元素不是 table, inline-table 或 table-row-group, 在 table-row 元素和其父元素之间插入一个匿名 table 元素. 插入的对象将包含 table-row 元素的全部后续同辈元素.
      3. 如果 table-column 元素的父元素不是 table, inline-table 或 table-column-group, 在 table-column 元素和其父元素之间插入一个匿名 table 元素.
      4. 如果 table-row-group, table-header-group, table-footer-group, table-column-group 或 table-caption 元素的父元素不是 table, 在这些元素和其父元素之间插入一个匿名 table 对象
      5. 如果 table 或 inline-table 元素的子元素不是 table-row-group, table-header-group, table-footer-group, table-row 或 table-caption, 在 table 元素和其子元素之间插入一个匿名 table-row 对象. 插入的匿名对象包括 table-row-group, table-header-group, table-footer-group, table-row 或 table-caption 之外的子元素的全部后续同辈元素.
      6. 如果 table-row-group, table-header-group 或 table-footer-group 的子元素不是 table-row, 在他们和其子元素之间插入一个匿名 table-row 对象, 插入的匿名对象包含子元素的全部后续同辈元素 ( table-row 对象自身除外 )
      7. 如果 table-row 元素的子元素不是 table-cell, 在元素和其子元素之间插入一个匿名 table-cell 对象. 插入的匿名对象包含子元素的全部后续同辈元素 (table-cell 元素自身除外)

    • 表格中的层

      • 分为 单元格, 行, 行组, 列, 列组, 表格
      • 默认情况下, 所有元素的背景都是透明的

    • 标题, caption-side, 取值 top, bottom

  2. 单元格的边框

    • 两种边框模式, 分离边框模式 (separated border model) 在单元格的布局之间有间隔时起作用. 另一个选项是折叠边框模型 (collapsed border model), 此时单元格之间在视觉上没有间隔, 单元格之间的边框将合并或折叠在一起. 前者是默认模型, 以前版本中后者是默认模型
    • 使用 border-collapse, 取值 collapse, separate, inherit
    • 分离单元格的边框, 在这种模型中, 表格中的每个单元格都与其他单元格相隔一定的距离, 而且单元格之间的边框不会折叠在一起.
      • 边框间距, border-spacing , 这个属性的值可以是一个或两个长度. 如果想让所有单元格都相距 1 像素, border-spacing: 1px; border-spacing: 1px 5px; 横向间距1px, 纵向间距 5px; border-spacing 值在表格上声明, 而不是在单个单元格上声明.
      • 处理空单元格, empty-cells, 取值, show, hide
    • 折叠单元格的边框
      • 折叠边框模型就像 HTML 排布没有间距的单元格一样, 它比分离边框赋值一些
      • border-collapse 属性的值为 collapse 时, display 属性的值为 table 或 inline-table 的元素不能有内边距, 但是可以有外边距. 因此, 在折叠边框模型中, 表格四周的边框与最外层的单元格之间肯定没有间隔
      • 边框可以应用于单元格, 行, 行组, 列和列组. 当然, 表格自身始终可以有边框
      • 在折叠边框模型中, 单元格的边框之间肯定没有间隔.
      • 折叠的边框居中放在单元格之间假想的栅格线上
      • 折叠边框的布局, 内边距和内容宽度在边框内侧. 单元格之间的边框, 一半在两个单元格之间的栅格线一侧, 另一半在栅格线的另一侧, 外侧的边框超出表格宽度.
      • 边框折叠, 具体那条边框胜出, 有严格的规则
      • 如果折叠的边框中有一条边框的 border-style 为 hidden, 那么那一条边框在折叠的所有边框的优先级最高. 这个位置的边框都将被隐藏
      • 如果所有边框都可见, 那么较宽的边框比较窄的边框优先级高
      • 如果折叠的各个边框具有相同的宽度, 但是式样不同, 那么优先级从大到小的顺序为: double, solid, dashed, dotted, ridge, outset, groove, inset, none
      • 如果折叠的各个边框具有相同的样式和宽度, 但是样式不同, 这些样式从这些元素中获取, 优先级从高到低分别为: 单元格, 行, 行组, 列, 列组, 表格.

  3. 表格的尺寸

    • 宽度, table-layout, 取值, auto, fixed. 固定宽度的表格布局比自动宽度模型快一些

      • 固定布局, 这种模型中, 布局由表格, 列和单元格的宽度决定, 如果列元素的 width 属性的值不是 auto, 设定的就是整列的宽度, 如果列的宽度是auto, 但是表格第一行中位于这一列的单元格的 width 属性的值不是 auto, 那么这个单元格的宽度就是整列的跨度. 如果这个单元格跨多列, 其宽度将平分到各列中. 如果列的宽度仍是自动确定的, 将自动确定, 尽可能保持各列宽度相等.
      • 自动布局, 自动布局与 HTML 常年使用的表格布局基本一样.计算过程

      1. 计算一列中每个单元格的最小宽度(换行)和最大宽度(不换行)

      2. 计算各列的最小宽度和最大宽度

      3. 如果单元格横跨多列, 那么所跨的那几列的最小宽度之和必须等于单元格的最小宽度. 同样, 列的最大宽度之和也要等于横跨多列的单元格的最大宽度.

        计算表格的宽度

      4. 如果表格的宽度值不是 auto, 比较表格宽度的计算值与每一列的宽度之和加上边框和单元格间距 (使用百分数设定的宽度可能就在此时计算). 两者之中较大的那个就是表格的最终宽度. 如果表格宽度的计算值比列宽度, 边框和间距之和大, 差值除以列数后得到的值将增加到各列上.

      5. 如果表格宽度的计算值是 auto, 表格的最终宽度等于列宽度, 边框和间距之和, 这就意味着, 表格的宽度正好能放得下内容, 这与传统的 HTML 表格是一样的. 宽度为百分数的列将以哪个百分数为限, 但用户代理不一样满足这个限制.

    • 高度, 最简单的情况, 通过 height 属性显式设定表格的高度. 此时, 表格的高度由 height 属性的值定义. height 更像是 min-height. 如果表格的 height 属性的值为 auto, 那么表格的高度等于表格中每一行的高度之和加上边框和单元格的间距. 最好不要为表格设定高度

    • 对齐方式, 横向对齐, 使用 text-align 属性, 纵向对齐, vertical-align 属性设定, 三个值, top, bottom, middle, baseline, 每种对齐效果都是通过自动增加单元格的内边距实现的, baseline 由第一行文本的基线定义. vertical-align 的其他值, sub, super, text-top 和 text-bottom, 应用到单元格上被忽略, 视为baseline, 有时被视为 top

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/xiaxiangx/p/14149025.html