前端与 CSS深入 | 青训营笔记

Linxx林同学
90 阅读9分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天. 今天主要以总结第一天深入学习CSS的总结复习笔记，将课堂笔记与以往笔记相结合，回顾CSS布局。

本堂课重点： 整体而言，全方面地介绍了布局里出现的最常见的知识。主要分三部分：

  1. 常规流**，很重要，分六大排版上下文，包含了BFC和flex排版上下文
  2. 浮动
  3. 定位**，包含了四大属性，介绍了相对定位以及绝对定位

布局Layout

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

布局相关技术

  • 常规流(文档流)

    • 行级
    • 块级
    • 表格布局
    • FlexBox
    • Grid布局

  • 浮动

  • 绝对定位

常规流

盒模型

布局时，把一个个元素理解为一个个盒子，而盒子里包含外边距margin，边框border，内边距padding，内容content(宽和高)

CSS将页面中的所有元素都设置为一个矩形的盒子。

将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置。

网页布局，就是摆放盒子。

而盒子的内部，就是内容区。而width和height决定了内容区的大小。

组成部分：1. 内容区(content)

  1. 内边距(padding) 3. 边框border 4. 外边距(margin)

1-3决定了盒子的大小。

所谓的盒子模型，就是有一组属性来决定元素的大小和位置。

image.png

宽度和高度：

  • 指定content box宽度
  • 取值为长度、百分数、auto
  • auto由浏览器根据其他属性确定
  • 百分数相对于容器的content box宽度
  • 百分数必然是在容器有指定的高度时，才生效的。

内边距padding

  • 指定元素四个方向的内边距
  • 百分数相对于容器宽度

边框border

  • 三个属性：

    • border-width
    • border-style
    • border-color

  • 四个方向

    • border-top
    • border-right
    • border-bottom
    • border-left

可以通过颜色来展示四个方向。

.test {
        width:200px;
        height:200px;
        background-color: black;
        border-top: 20px solid red;
        border-bottom: 20px solid blue;
        border-left: 20px solid yellow;
        border-right: 20px solid orange;
}

image.png

而如果宽度和高度都为0：

image.png

margin

  • 指定元素四个方向的外边距
  • 取值可以是长度、百分数、auto
  • 百分数相对于容器宽度

注意点：

  1. 当有宽度时，可以通过margin来设置水平居中，通过auto即可实现
  1. 重叠问题，当上下两个元素，上元素设置了margin-bottom和下元素也设置了margin-top时，会发生重叠，若上下都设置了100，那外边距会折叠成100. 若两者不同，选择大的。

示例：

.a {
    background:blue;
    height:100px;
    margin-bottom:100px;
}
.b {
    background:red;
    height:100px;
    margin-bottom:100px;
}

image.png

box-sizing: border-box

image.png

块级vs行级

块级：

  • 不与其他盒子并列摆放
  • 适合所有的盒模型属性
  • 块级盒子：body、article、div、main、section、h1-h6、p、ul li等
  • display: block

行级：

  • 和其他行级盒子一起放在一行或拆开成多行
  • 盒模型中的width、height不适用
  • 行级盒子
  • 内容分散在多个line box中：span em strong cite code等
  • display: inline

display属性

  • block
  • inline
  • inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行。
  • none

排版上下文

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

分五个：行级排版上下文、块级排版上下文、Table排版上下文、Flex排版上下文、Grid排版上下文

行级排版上下文
  • 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;

应用：在浮动布局中，父元素的高度默认被子元素撑开，比如父元素没设置高度，子元素多高，他就多高。

但是当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度塌陷。

父元素高度塌陷后，其下的元素会自动上移，导致页面的布局混乱！

比如：box1里有个box2，box1没有设置高度，默认高度被box2撑开，但是当box2开启浮动后，就从box1弹出去了，就无法撑开box1的高度了。就是高度塌陷问题了。

以及外边距重叠的问题，比如box里有个box1，而如果box1设置了margin-top，那么box也会默认设置margin-top，于是就变成了双重margin。

而BFC即可解决！

BFC 内的排版规则

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

Flex Box是什么?

  • 一种新的排版上下文

  • 它可以控制子级盒子的:

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

Flex布局也叫弹性盒子布局，它的目标是提供一个更有效布局和对齐方式，并且能够父元素在子元素未知大小和动态变化情况下依旧能够分配好各元素之间的间隙，说白了即是无论子元素在什么情况下，都能够保持规定的间隙排版。

Flex弹性盒子的优势在于只需要声明布局的行为，而不需要给出具体的实现，浏览器就会负责完成实际布局。当布局不涉及到不定宽度，分布对齐的场景时，就要优先考虑弹性盒布局。

Flex布局是一个完整的模块，包括一套完整的属性。其中采用flex布局的父元素，被称为Flex容器，它的子元素被称为flex项目

而Flex布局的开启方式，需要给父元素开启flex，容器内的元素才能实现布局。

父元素

父元素（容器）可以设置以下六个属性：

  • flex-direction 排列方向，比如从右到左，从上到下
  • flex-wrap 决定是否能挤到两行，原第一行该被挤到第二行还是正常排列。
  • flex-flow 前两者的简写，没啥用
  • justify-content 元素在主轴上的对齐方式
  • align-items 元素在交叉轴上的对齐方式
  • align-content 交叉轴的排列，是否需要被占满。

子元素

子元素有以下六个属性：

  • order 子元素的排列顺序
  • flex-grow 有剩余空间的放大比例
  • flex-shrink 空间不足的缩小比例
  • flex-basis
  • flex 代表着flex-grow、flex-shrink、flex-basis
  • align-self

浮动

通过浮动可以使一个元素向其父元素的左侧或右侧移动。

使用float属性来设置元素的浮动。

可选值：

none 默认，元素不浮动

left. 元素向左浮动

right 元素向右浮动

注意：元素设置浮动以后，水平布局的等式便不需要强制成立。

元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置。

所以元素如果设置了浮动，那么下面的那个还在文档流的元素就会直接向上移动，因为上面那个元素脱离文档流了，位置就空出来了。

特点：

  1. 浮动元素会完全脱离文档流，不再占据文档流中的位置。
  2. 设置浮动以后元素会向父元素的左侧或右侧移动
  3. 浮动元素默认不会从父元素中移出。
  4. 浮动元素向左或向右移动时，不会超过它前边的其他浮动元素。
  5. 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
  6. 浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和他一样高。
  7. 浮动元素不会盖住文字，文字会自动环绕在浮动元素周围，所以可以利用浮动来设置文字环绕图片的效果。

定位

position 属性

  • static 默认值，非定位元素
  • relative 相对自身原本位置偏移，不脱离文档流
  • absolute 绝对定位，相对非 static 祖先元素定位
  • fixed 相对于视口绝对定位

position: relative

  1. 元素开启相对定位后，如果不设置偏移量元素不会发生任何的改变。

偏移量(offset)

  1. 相对定位是参照于元素在文档流的位置进行定位
  2. 会提升元素的层级
  3. 不会脱离文档流
  4. 不会改变元素的性质块还是块，行内还是行内
  • 当元素开启定位后，可以通过偏移量来设置元素的位置
  • top
  • bottom
  • left
  • right

position: absolute

特点：

  1. 开启绝对定位后，元素会从文档流中脱离
  2. 会使元素提升一个层级
  3. 绝对定位元素是相对于其包含块进行定位的

而开启绝对定位的元素是相对于最近的非static祖先定位

  • 正常情况下，包含块就是离当前元素最近的祖先块元素

比如：<div><div></div></div> 里边的div的包含块就是外面的div

对于em和里边的div的包含块都是外面的这个div

  • 绝对定位的包含块：

    包含块就是离它最近的开启了定位的祖先元素，如果他上一个元素开启了，那么包含块就是他，如果在最外层开启了，那么包含块就是最外层。

    如果所有的祖先元素都没有开启定位，那么就对根元素进行定位

这也是最常见的定位，绝对定位！

avatar
文章
阅读
粉丝