前端基础

27 01月

复习前端：CSS

2023-01-27 前端基础

复习前端：CSS

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

CSS 是一种编程语言吗？

CSS不是一种编程语言而是一种样式表（CSS = Cascading Style Sheet）。然而，在高级阶段，CSS 中有许多接近编程的复杂选项。

编程语言和样式表有什么区别？

编程语言

使用编程语言，制定了一系列指令，即计算机完成任务所需执行的步骤。有更接近机器码而远离人类语言的语言（如 Assembly），也有更接近人类语言而远离机器码的高级编程语言（如 C# 和 Java）。编程语言数不胜数，而且它们的数量只会增加，所以总是有新的东西可以谈论，新的库可以探索。可以通过多种方式对它们进行分类——例如，有面向对象的编程语言、函数式语言，或者我们可以根据它们的用途进行分类。

样式表

样式表是在信息学中用来格式化和显示结构化文档（如 HTML 或 XML）的语言。样式表决定什么样式规则适用于文档的每个元素，浏览器显示什么颜色、背景、布局、字体等。

高级 CSS 技术和编程

在CSS中，可以声明函数，使用面向对象，构建一个透明的、易于维护的模块化系统。

CSS 预处理器

CSS 预处理器是可以生成 CSS 代码的 CSS 扩展，这意味着可以使用编程方法自动执行步骤。预处理器有很多，但最著名的两个是 Sass 和 Less。

这些有助于创建和维护复杂应用程序和网站的 CSS 结构，并创建可由多人编辑的透明代码。有了它们，就可以在 CSS 中使用嵌入、循环和继承。

清除浮动的方法

为什么要清除浮动？清除浮动是为了解决子元素浮动导致父元素高度塌陷的问题。

添加新元素

<div class="parent">
  <div class="child"></div>
  <div style="clear: both"></div>
</div>

使用伪元素

.parent::after{
  content: "";
  display: block;
  height: 0;
  clear:both;
}

触发父元素 BFC

.parent {
  overflow: hidden;
}

弹性布局

容器属性（用于 flex 布局容器的属性）。

justify-content

定义子元素在主轴（水平轴）上的对齐方式。

.container {
    justify-content: center | flex-start | flex-end | space-between | space-around;
}

align-items

定义的元素如何在横轴（垂直轴）上对齐。

.container {
    align-items: center | flex-start | flex-end | baseline | stretch;
}

flex-direction

内部元素是如何在 flex 容器中布局的，定义了主轴的方向 (正方向或反方向)。

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}
  • row：flex 容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。
  • row-reverse：表现和 row 相同，但是置换了主轴起点和主轴终点
  • column：flex 容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同
  • column-reverse：表现和column相同，但是置换了主轴起点和主轴终点

flex-wrap

指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许控制行的堆叠方向。

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap：默认值，flex 的元素被摆放到到一行，这可能导致 flex 容器溢出。cross-start 会根据 flex-direction 的值等价于 start 或 before。
  • wrap：flex 元素被打断到多个行中。cross-start 会根据 flex-direction 的值等价于 start 或 before。
  • wrap-reverse：和 wrap 的行为一样，但是 cross-start 和 cross-end 互换。

flex-flow

flex-flow 属性是 flex-direction 属性和 flex-wrap 的简写。

.container {
    flex-flow: <flex-direction> || <flex-wrap>;
}

align-content

定义多条网格线的对齐方式。

.container {
    align-content: center | flex-start | flex-end | space-between | space-around | stretch;
}

元素属性（用于容器内子元素的属性）

flex-grow

定义元素的放大比例，默认为 0，即使有剩余空间也不会放大。如果所有子元素 flex-grow 都为1，那么剩余空间会平分，如果一个子元素 flex-grow 为 2，那么这个子元素会占用剩余空间的2倍。

.item {
    flex-grow: <number>; /* default 0 */
}

flex-shrink

定义元素的缩小比例，默认为 1，即如果空间不够，子元素会缩小。如果所有子元素flex-shrink都为1，而一个子元素flex-shrink为0，则该子元素不会收缩。

.item {
    flex-shrink: <number>; /* default 1 */
}

flex-basis

在分配额外空间之前定义项目占用的主轴空间。默认是 auto，也就是子元素的原始大小。如果设置为固定值，则子元素将占据固定空间。

.item {
    flex-basis: <length> | auto; /* default auto */
}

flex

flex 属性是 flex-grow、flex-shrink 和 flex-basis 的简写。默认值为0 1 auto，即有剩余空间不放大。如果剩余的空间不够，就缩小，子元素占用它的大小。

.item {
    flex: none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]
}

flex 有两个简洁值：auto和none，分别代表1 1 auto（元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器） 和 0 0 auto（元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器）

order

定义元素的排序顺序。值越小，排名越高，默认为0。

.item {
    order: <integer>;
}

align-self

定义单个子元素的排列。如，align-items 设置居中，使所有子元素居中对齐。然后，可以通过将 align-self 设置为子元素来单独设置子元素的顺序。

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

什么是 BFC

BFC的全称是 Block Formatting Context，即块级格式化上下文。简单的说，BFC就是页面上一个隔离独立的容器，不受外界干扰，不受外界干扰。

如何触发 BFC

  • float 不是没有
  • overflow 不可见
  • position 是绝对的还是固定的
  • display 是 inline-block 或 table-cell 或 table-caption 或 grid

BFC的渲染规则是什么

  • BFC是页面上一个隔离的独立容器，不受外界干扰或外界干扰
  • BFC计算高度时，浮动子元素也参与计算（即内部有浮动元素时不会发生高度塌陷）
  • BFC的区域不会和float的元素区域重叠
  • BFC 中的元素垂直放置
  • BFC 中两个相邻元素的外边距会重叠

BFC应用场景

  • 清除 float：BFC内部的浮动元素会参与高度计算，所以可以用来清除浮动，防止高度塌陷
  • 避免一个元素被浮动元素覆盖：BFC的区域不会与浮动元素的区域重叠
  • 防止重叠边距：属于同一个BFC的两个相邻Boxes的边距会塌陷，但不同的BFC不会塌陷
csscss3scssBFC