CSS中的布局 | 青训营笔记

VII
146 阅读6分钟

这是我参与「第四届青训营 」笔记创作活动的的第3天，整理一下之前课上关于CSS中布局部分的内容。

一、本堂课重点内容

  1. 布局相关技术
  2. 理解布局的基础——盒模型
  3. 盒模型中的两种布局规则：块级规则和行级规则
  4. 排版上下文（ IFC 和 BFC ）
  5. Flex 布局、Grid 布局和浮动

二、详细知识点介绍

1. 什么是布局

  • 确定内容的大小和位置的算法
  • 依据元素、容器、兄弟结点和内容等信息来计算

2. 布局相关技术

  • 常规流（文档流）：包含块级规则、行级规则、Flex布局、Grid布局等
  • 浮动
  • 绝对定位

3. 理解布局的基础——盒模型

（1）content-box

盒模型.svg

  • width
    • 指定 content box 宽度
    • 取值为长度、百分数（相对于容器的 content box 宽度）、auto（由浏览器根据其它属性确定）
  • height
    • 指定 content box 高度
    • 取值为长度、百分数、auto
    • 容器具有指定的高度时，百分数才生效
  • padding
    • 指定元素四个方向的内边距（上、右、下、左）
    • 百分数为相对于容器（不是自身）的宽度
  • border
    • 三种属性：border-width、border-style、border-color
    • 四个方向：上、右、下、左
    • 可以通过将 content 的宽、高设置为0，然后设置边框宽度来绘制三角形
  • margin
    • 指定四个方向的外边距
    • 百分数为相对于容器的宽度
    • 使用margin: auto可以实现水平居中
    • 外边距折叠（margin collapse）：块级元素的上外边距和下外边距有时会合并成一个外边距，其大小取其中最大的一个

（2）border-box

width 和 height 包含 padding 和 border

border-box.svg

（3）overfow

  • visible
  • hidden
  • scroll

4. 盒模型中的两种常见的布局规则：块级和行级

  • 块级盒子
    • 不和其它盒子并排摆放
    • 适用所有的盒模型属性
    • body、article、div、main、section、h1-6、p、ul、li等标签都是块级盒子
    • 可以通过display: block将元素指定为块级
  • 行级盒子
    • 和其它行级盒子一起放在一行或拆开放在多行，内容分散在多个行级盒子中
    • 盒模型中的 width、height 不适用（宽、高由盒子中的内容决定）
    • span、em、strong、cite、code等都是行级元素
    • 可以通过display: inline将元素指定为行级

display: inline-block：本身是行级，可以放在行级盒子中；可以设置宽、高；作为一个整体不会被拆散成多行 display: none：布局时被忽略

5. 常规流

  • 根元素、浮动和绝对定位的元素会脱离常规流
  • 其它元素都在常规流之中
  • 常规流中的盒子，在某种排版上下文（行级排版上下文、块级排版上下文、Table 排版上下文、Flex 排版上下文、Grid 排版上下文）中参与布局

6. 排版上下文

（1）行级排版上下文（Inline Formatting Context，IFC）

  • 只包含行级盒子的容器会创建一个 IFC
  • IFC 内的排版规则
    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align决定一行内盒子的水平对齐
    • vertical-align决定一个盒子在行内的垂直对齐
    • 避开浮动元素

（2）块级排版上下文（Block Formatting Context，BFC）

  • 以下元素会创建一个 BFC
    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex 子项和 Grid 子项
    • overflow值不为visible的块级盒子（可以解决外边距折叠的问题）
    • display: flow-root
  • BFC 内的排版规则
    • 盒子从上到下摆放
    • 垂直外边距合并
    • 内部盒子的外边距不会与外面的合并
    • 不会和浮动元素重叠

当一个盒子中既有块级元素又有行级元素时（如下面例子所示），浏览器会通过创建匿名的块级盒子包裹行级元素

<span>
    This is a text and
    <div>block</div>
    and other text
</span>

image.png

7. Flex 布局

详细介绍见：Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)

8. Grid 布局

  • 通过grid-template相关属性将容器划分为网格：长度、百分比、auto、fr（均分之后占几份）
  • 设置每一个子项占哪些行和列
    • grid-row-start/grid-row-end指定开始行和结束行
    • grid-column-start/grid-column-end指定开始列和结束列
    • 或者直接指定grid-area: 开始行/开始列/结束行/结束列

注意行号和列号都是针对于网格线而言，而不是网格区域，且序号从1开始

image.png

8. 浮动（float）：可以实现文字环绕图片的效果

9. 定位方式(position）

  • static
  • relative：相对于元素自身位置偏移，不脱离常规流
  • absolute：相对于最近的非static的祖先元素进行定位，脱离常规流
  • fixed：相对于视口进行定位，脱离常规流

三、课后个人总结

1. IFC 和 BFC

  • 当块级元素中仅包含内联级别元素时就会产生一个 IFC（需要注意的是当 IFC 中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个 IFC ），IFC 的 line box 高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的 padding/margin 影响)
  • BFC 是一个独立的布局环境，其中元素的布局不受外界的影响。而 BFC 内部的盒子会在垂直方向，一个接一个地放置（html标签本身就是一个 BFC ）

2. 外边距折叠

除了兄弟元素之间会出现外边距折叠，父子元素之间出现的外边距折叠问题更严重：

为子元素指定的外边距会传递给父元素，导致父子元素同时移动

解决方案：为父元素添加属性overflow: hidden，从而开启元素的 BFC，使其成为一个独立的布局而不会影响到外部的布局

3. 清除浮动

老师说不需要掌握，但是在面试题中看到过，所以记录一下

  • 为父元素添加overflow: hidden属性，原理同解决外边距折叠的方法一样
  • 在父元素上使用伪元素
.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
}
  • 为父元素指定固定高度

四、引用参考

BFC与IFC的区别_两块大鸡腿�的博客-CSDN博客_bfc和ifc

外边距重叠问题解决(超级全面)_money_monkey的博客-CSDN博客

Grid布局详解 - 简书 (jianshu.com)

清除浮动的4种方式_star@星空的博客-CSDN博客_清除浮动

avatar
文章
阅读
粉丝