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 组合器 - 组合器是解释选择器之间关系的某种机制
- 后代选择器 (空格)
- 子选择器(>)
- 相邻兄弟选择器(+)
- 通用兄弟选择器(~)
伪类 - 用于定义元素的特殊状态
- 设置鼠标悬停在元素上时的样式
- 为已访问和未访问链接设置不同的样式
- 设置元素获得焦点时的样式
Flexbox 布局模块
Tips: 弹性框布局模块,可以轻松地设计灵活的响应式布局结构,而无需使用浮动或者定位。
通过display属性设置为 flex, flex 容器将可伸缩
- flex-direction 属性定义容器要在哪个方向上堆叠flex 项目
a. column 值设置垂直堆叠flex 项目(从上到下)
b. column-reverse 值垂直堆叠flex项目(从下到上)
c. row 值水平堆叠flex 项目(从左到右)
d. row-reverse 值水平堆叠flex 项目(从右到左) - flex-wrap 属性规定是否应该对flex 项目换行
a. wrap 值规定flex 项目将要在必要时进行换行
b. wrap-reverse 值规定如果有必要,弹性项目将以相反的顺序换行 - flex-flow 属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性
- justify-content 属性用于对齐flex 项目
a. center 值将flex项目在容器的中心对齐
b. flex-start 值将flex项目在容器的开头对齐
c. flex-end 值将flex项目在容器的末端对齐
d. space-around 值显示行之前、之间和之后带有空格的flex项目
e. space-between 值显示行之间有空格的flex 项目 - align-items 属性用于垂直对齐flex项目
a. center 值将flex 项目在容器中间对齐
b. flex-start 值将flex 项目在容器的顶部对齐
c. flex-end 值将flex 项目在容器底部对齐
d. stretch 值拉伸flex 项目以填充容器
e. baseline 值使flex 项目基线对齐 - align-content 属性用于对齐弹性线
a. space-between 值显示的弹性线之间有相等的间距
b. space-around 值显示弹性线在其之前、之间、之后带有空格
c. stretch 值拉伸弹性线以占用据剩余空间
d. center 值在容器中线显示弹性线
e. flex-start 值在容器开头显示弹性线
f. flex-end 值在容器的末尾显示弹性线
flex 容器的直接子元素会自动成为弹性(flex)项目
用于子弹性项目的属性有
- order 指定子元素的排序
- flex-grow 规定某个flex项目相对于其余flex 项目增长多少
- flex-shrink 规定某个flex 项目相对于其余项目收缩多少
- flex-basis 规定flex 项目的初始长度
- flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性
- align-self
媒体查询
主要是针对不同尺寸的屏幕,可以用同一套代码适配不同的屏幕,
文本首行缩进
text-indent: 50xp;