CSS大汇总 - 技术栈

概述

上一篇文章讲述了HTML作为名词（noun）的基本用法与汇总，这篇文章来讲述CSS作为形容词（adj）的基本概念与常见用法。

基本形式

css 复制代码

    body {
      font-family: 'Poppins', sans-serif;
      color: #444;
      background-color: #f3f3f3;
      height: 100vh;
      padding: 2rem;
    }

上述代码就是一个针对body元素的css代码块，包括选择器和声明块

具体解释

CSS的作用就是通过具体的选择器来选择组件/元素，然后自定义声明块的内容改变具体的元素/组件的表现形式

1，书写位置

具体分为：内联CSS，内部CSS，外部CSS

内联CSS：书写在元素内部（非常不推荐）

内部CSS：在 <head> 标签内创建 <style> 标签

外部CSS：另创一个CSS文件，在head内部用<link href="..." rel="...">进行连接（最常使用）

2，选择器

类型：全局、类名、id、类/伪类、元素，例如"*"、".login-btn"、"#submit-btn"、"li:hover"、"p"

Addition：

1，伪类：形如a:hover,li:last-child形式的选择器称为伪类，作用有选择一个元素的不同状态，选择多个元素中的某个单独元素等

2，优先级：目的是为了实现"先全局，后细节"的思想，具体的顺序为：关键字->内联CSS->id->类/伪类->元素

关键字：

!important 会强制覆盖所有优先级规则，若多个样式同时加 !important，仍会按原优先级排序；且滥用会导致样式调试困难，仅建议用于'修复第三方样式冲突'等极端场景。

3，继承

解释：HTML中有父元素和子元素，在CSS中对父元素进行选择修改后，子元素也会随之发生隐式修改，但是如若子元素显示声明其格式，那么使用显示声明的格式

4，组合选择器

组合选择器中常使用的有后代选择器和兄弟选择器

组合选择器：形如nav p，选择第一个元素之后的元素，目的是为了具体确定所选元素的位置，实现具体进行样式修改

兄弟选择器（相邻兄弟选择器）：形如 p+span，选择与 p 共享同一父元素'且'紧跟在 p 后的第一个 span 元素

3，声明块

内容：字体大小，内容填充，边缘间距，颜色，字体风格等

Addition：

声明块中的字体大小，字体风格，边缘间距，内容填充，颜色等大部分都是由UI设计师提供的，前端开发人员只需要设计布局等

其他重要知识点

1，CSS盒子模型

如上图所示，盒子模型包括内容，内边距（填充），边框，外边距（边缘间距）。因为这个模型对于组件设计时过于复杂，所以实际应用设计时往往使用下图所示的代码块

css 复制代码

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

通过 html { box-sizing: border-box } 定义根元素的盒模型为 border-box，再通过 * { box-sizing: inherit } 让所有元素继承该属性，确保全局统一使用 border-box 盒模型，避免尺寸计算偏差。

2，元素类型

元素类型分为内联元素、块级元素、内联块元素

内联元素:

width/height 完全无效，尺寸由内容决定；
竖直方向 margin 无效（不显示且不影响布局）；
竖直方向 padding 会显示（如背景延伸），但不会推开上下元素（可能覆盖其他内容）；
仅水平方向 margin/padding 有效（显示且影响布局）。

块级元素：元素会占据一行，多个块级元素默认垂直排列（上下分布）
内联块元素：元素不会占据一行，可以修改width,height等，多个内联块元素串行放置

Addition：

1，常见的内联元素：<span>、<a>、<em>、<i>等，块级元素：<p>、<div>、<h1>等，内联块元素：<img>、<input>等

2，内联元素，块级元素，内联块元素之间可以相互转换，通过display:block/inline/inline-block

3，布局设计

所谓布局设计，就是将HTML上的各种组件按照需求确定其位置，CSS中的布局设计包括浮动布局，flexbox布局，grid布局

由于浮动布局可能会出现元素上下间距消失的现象（解决方法为clearfix技术，比较繁琐），这门技术已经有点过时，在这里小编不再详细讲述

1，Flexbox

具体的Flexbox如图所示，分为Flex container和Flex items，主轴（main axis）和交叉轴（cross axis）

使用Flexbox步骤：

1，如下图所示，确定选定的元素，设置display:flex

css 复制代码

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
}

2，使用Flexbox性质来实现整体容器和各个项目的布局
justify-content:将整体的Flexbox容器在主轴方向确定具体位置，如space-between（两端贴边，中间间距相等），center（整体居中对齐，间距手动设置）等
align-items：控制所有 Flex 项目在交叉轴方向的对齐方式（如主轴水平时，交叉轴为垂直方向）：

flex-start：项目靠交叉轴起点对齐（如垂直顶部）；
center：项目在交叉轴居中对齐（如垂直居中）；
stretch（默认）：项目拉伸至与 Flex 容器的交叉轴高度一致。

gap：手动设置具体项目之间的间距
align-self：单独设置某个项目对齐最长项目的位置
order：order 取值为整数（正负均可，如 order: -1、order: 2），数值越小越靠前，默认值为 0；若多个项目 order 相同，按 HTML 文档流顺序排列。 flex: flex-grow flex-shrink flex-basis：这里三个参数含义如下：

flex-grow：控制 Flex 项目在容器有剩余空间时的 "分配比例"，初始值为 0（默认不分配剩余空间）：

若所有项目设为 flex-grow: 1，且 flex-basis 相同（或为 0），剩余空间会被所有项目平均分配，实现均匀分布；
若项目 flex-grow 比例为 2:1（如 A 为 2，B 为 1），则 A 分配的剩余空间是 B 的 2 倍。

flex-shrink：表示项目能否自动缩小，初始值为1，表示能自动缩小，如需禁止需设为0，之后项目的宽度大于等于初始长度
flex-basis：表示项目初始值宽度大小，初始值为auto，由自身内容确定

Notice：

在使用align-items之前会将所有项目的初始长度沿交叉轴占据整个项目
Flexbox主轴方向可以改变，用于手风琴设计
使用Flexbox会自动将元素变为块级元素,如果是内联块元素不会进行修改

2，Grid

具体的Grid如上图所示，分为Grid container、Grid content 和 Grid items，水平轴（Rows axis）和垂直轴（Column axis）

使用Grid具体步骤如下：

1，如下图所示，确定选定的元素，设置display:grid

css 复制代码

.form {
  display: grid;
  grid-template-columns: 2.5fr 2.5fr 1fr;
  grid-template-rows: auto auto;
  gap: 0.4rem 1rem;
}

2，使用Grid性质来实现整体容器以及各个项目的布局
grid-template-columns：设置容器内项目的列数
grid-template-rows：设置容器内项目的行数
column-gap：设置列间距
row-gap：设置行间距
justify-content：当 Grid 容器的主轴尺寸 > 网格整体的主轴尺寸 时（如容器水平宽度大于网格总宽），控制 "网格整体在容器主轴方向（默认水平）的对齐方式"，例如 center 让网格在容器水平居中。
align-content：当 Grid 容器的交叉轴尺寸 > 网格整体的交叉轴尺寸 时（如容器垂直高度大于网格总高），控制 "网格整体在容器交叉轴方向（默认垂直）的对齐方式"，例如 center 让网格在容器垂直居中。 justify-items：将所有项目在网格内沿水平方向进行设置，例如center 设为网格水平中心
align-items：将所有项目在网格内沿竖直方向进行设置，例如center设为网格竖直中心
justify-self：单独设置某个项目在单元格内的水平方向，例如start设为单元格的水平起始位置
align-self：单独设置某个项目在单元格内的竖直方向，例如end设为单元格的竖直最末位置
grid-column：单独设置某个项目在竖直方向上的占据空间，形式为start/end
grid-row：单独设置某个项目在水平方向上的占据空间，形式为start/end

Notice：

在实际前端开发设计中，往往只设置列数而不设置行数，因为行数会随列数自动确定
Grid主轴方向也可以改变，但实际一般不改变
fr 是 Grid 专属单位，代表'剩余空间的比例'，2.5fr 2.5fr 1fr 表示'将容器剩余空间按 2.5:2.5:1 的比例分配给 3 列'，适合自适应布局。

4，绝对定位

执行步骤：

确定放置位置的父元素，设置position:relative
对子元素进行操作：

css 复制代码

.element {
  position: absolute; /* 开启绝对定位 */
  top: 20px;    /* 距离定位基准顶部 20px */
  left: 50px;   /* 距离定位基准左侧 50px */
  /* right: 30px; 距离定位基准右侧 30px */
  /* bottom: 10px; 距离定位基准底部 10px */
  
  transform: translate(0, -50%); /* 将移动的组件在竖直方向上移动一半组件的距离*/
}

解释：首先进行大致的定位，即将整个组件移动至大体位置，然后通过transform:translate(...,...)进行细致调整，具体如下图所示

5，响应式布局

目的：为了让Web在不同的尺寸屏幕上实现布局的合理性以及好的视觉效果

实现手段：媒体查询

实现技巧：

设置字体大小时使用rem而非px，rem是根元素大小，目的是为了将所有的字体大小设置都有一个基准，具体代码如下：

css 复制代码

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

其中百分数62.5%得来的过程是--基准/16px=62.5%(16px是台式电脑下的默认字体大小值)--基准根元素大小为10px

父容器宽度设置为max-width:具体rem，子元素width:百分数%
max-width：设定的是容器最大宽度，当视口宽度大于容器最大宽度时，两边会留有空白；当视口宽度小于容器最大宽度时，容器宽度会随着视口宽度的改变而改变

将父容器使用max-width会将其宽度动态化而非固定不变，同理子容器用百分数也是如此
在不同的尺寸下查看各个元素/组件的排版问题，如果不合适则需要进行调整，通过改变根元素font-size，用flexbox、grid进行布局调整

最后

前端开发之路任重而道远，在未来仍有很多知识需要学习，小编也是一个初学者，让我们一起加油！如果这篇文章能帮到你的话，荣幸之至；如果有错误的话并指出来的话，小编将不胜感激。