前端-重拾CSS

text-align - 文本对齐方式

# 文本对齐方式
text-align: center;

# 值会拉伸线条，使每条线都有相等的宽度
text-align: justify;

# vertical-align 属性设置元素的垂直对齐方式
vertical-align: middle;

text-transform 属性用于指定文本中的大写和小写字母

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

# text-indent 属性用于指定文本第一行的缩进
p {
  text-indent: 50px;
}

# letter-spacing 属性用于指定文本中字符之间的间距
h1 {
  letter-spacing: 3px;
}

# 用 em 设置字体大小
# 为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素。
# W3C 建议使用 em 尺寸单位。
# 1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。
# 可以使用这个公式从像素到 em 来计算大小：pixels/16=em

position 属性 static/relative/fixed/absolute/sticky

# position: relative; 的元素相对于其正常位置进行定位

# position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，
# 它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素

position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。
然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动

float 属性 - 用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里

# left - 元素浮动到其容器的左侧
# right - 元素浮动在其容器的右侧
# none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
# inherit - 元素继承其父级的 float 值

CSS 组合器 - 组合器是解释选择器之间关系的某种机制

1. 后代选择器 （空格）
2. 子选择器（>）
3. 相邻兄弟选择器（+）
4. 通用兄弟选择器（~）

伪类 - 用于定义元素的特殊状态

1. 设置鼠标悬停在元素上时的样式
2. 为已访问和未访问链接设置不同的样式
3. 设置元素获得焦点时的样式

Flexbox 布局模块

Tips: 弹性框布局模块，可以轻松地设计灵活的响应式布局结构，而无需使用浮动或者定位。
通过display属性设置为 flex, flex 容器将可伸缩

1. flex-direction 属性定义容器要在哪个方向上堆叠flex 项目
   a. column 值设置垂直堆叠flex 项目（从上到下）
   b. column-reverse 值垂直堆叠flex项目（从下到上）
   c. row 值水平堆叠flex 项目（从左到右）
   d. row-reverse 值水平堆叠flex 项目（从右到左）
2. flex-wrap 属性规定是否应该对flex 项目换行
   a. wrap 值规定flex 项目将要在必要时进行换行
   b. wrap-reverse 值规定如果有必要，弹性项目将以相反的顺序换行
3. flex-flow 属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性
4. justify-content 属性用于对齐flex 项目
   a. center 值将flex项目在容器的中心对齐
   b. flex-start 值将flex项目在容器的开头对齐
   c. flex-end 值将flex项目在容器的末端对齐
   d. space-around 值显示行之前、之间和之后带有空格的flex项目
   e. space-between 值显示行之间有空格的flex 项目
5. align-items 属性用于垂直对齐flex项目
   a. center 值将flex 项目在容器中间对齐
   b. flex-start 值将flex 项目在容器的顶部对齐
   c. flex-end 值将flex 项目在容器底部对齐
   d. stretch 值拉伸flex 项目以填充容器
   e. baseline 值使flex 项目基线对齐
6. align-content 属性用于对齐弹性线
   a. space-between 值显示的弹性线之间有相等的间距
   b. space-around 值显示弹性线在其之前、之间、之后带有空格
   c. stretch 值拉伸弹性线以占用据剩余空间
   d. center 值在容器中线显示弹性线
   e. flex-start 值在容器开头显示弹性线
   f. flex-end 值在容器的末尾显示弹性线

flex 容器的直接子元素会自动成为弹性（flex）项目

用于子弹性项目的属性有

1. order 指定子元素的排序
2. flex-grow 规定某个flex项目相对于其余flex 项目增长多少
3. flex-shrink 规定某个flex 项目相对于其余项目收缩多少
4. flex-basis 规定flex 项目的初始长度
5. flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性
6. align-self

媒体查询

主要是针对不同尺寸的屏幕，可以用同一套代码适配不同的屏幕，

文本首行缩进

text-indent: 50xp;