前端+AI：CSS3（二）

CSS：层叠样式表。

往期文章~
1、前端+AI：HTML5语义标签（一）

1.选择器

1.1 分类

1.1.1 基础选择器

• 类型/标签选择器
• 类选择器
• id选择器：唯一的（主要搭配js使用）
• 通配符选择器：*

1.1.2 关系选择器

• 后代选择器：中间 空格 隔开
• 子代选择器：中间 > 拼接
• 邻接兄弟选择器：中间 + 拼接
• 通用兄弟选择器：中间 ~ 拼接 (后面所有的p元素)
  

1.1.3 分组/并集选择器

不同的选择器组合在一起。使用逗号（,）分割。

1.1.4 伪类和伪元素选择器

1.1.4.1 伪类选择器（:）

使用冒号（:），选择元素的特定状态或结构位置

• 状态伪类：根据用户交互或状态变化选择。

  • 链接伪类：根据链接的不同状态。
  • 结构伪类：根据元素位置选择。
  • 表单伪类：针对表单元素的状态。

  使得checkbox选中后，协议样式改变。
  

链接伪类（LVHA顺序）	作用
a:link	未访问
a:visited	已访问
a:hover	鼠标悬停
a:active	点击

结构伪类​​	作用​​
:first-child	一组兄弟元素中的第一个元素
:last-child	一组兄弟元素中的最后一个
:nth-child(n)n可以是数字（从1开始）、关键字（odd奇数，even偶数）、公式（如3n，n+2，公式的n从0开始）。	一组兄弟元素列表中第n个元素

分享一个小技巧
1、强制查看hover的样式。找到该元素，右键该元素，然后选择Force state，即可查看hover的样式。

2、快速定位到某个元素的样式：鼠标放到需要查看样式的元素身上，按住快捷键Ctrl + Shift + c即可。

1.1.5.1 伪元素选择器（::）

选择元素的特定部分。

使用场景：

• 让表单的placeholder文字改变颜色。
• 做装饰效果。

伪元素选择器	作用
::first-line	选择首行
::first-letter	首字母
::placeholder	选择input或者textarea占位符
::before	元素内插入伪元素，作为第一个元素
::after	元素内插入伪元素，作为最后一个元素

1.1.5 属性选择器（[]）

❗ 属性$=值，属性^=值，不能匹配数字。

2.文本样式

2.1 分类

• 字体样式
  • text-decoration：设置文本的装饰效果（下划线、删除线）
• 字体布局
  • 文本对齐：text-align，justify，两端对齐
  • 首行缩进：text-indent：2em（em：字体的大小）
  • 字间距：letter-spacing，设置文本字符的间距
  • 行高：行高等于盒子高度，可以让单行文本垂直居中。

2.2 简写和继承

font简写：font-style font-weight font-size/line-hight font-family

3. 三大特性

• 继承性： 继承的权重是0。h标签默认加粗、a标签默认有下划线等，这些不能通过继承父亲属性修改样式。只能自己去修改。
• 层叠性：就近原则
• 优先级
  

4. 盒子模型

4.2 圆角边框

• 胶囊按钮：设置圆角为宽度/高度（较小的值）的一半。
• 圆角：正方形宽度的一半

4.3 外边距

• 外边距折叠：并列关系的区块元素，上下两个外边距将合并为一个外边距。其大小等于最大的单个外边距。
• 外边距塌陷：嵌套关系的区块元素，给子盒子设置上下外边距会让父盒子塌陷移动。
  • 解决方案：给父盒子添加上边框
  • 给父盒子添加上内边距
  • 给父盒子添加**overflow:hidden;**属性

4.4 尺寸计算 box-sizing

属性值	描述
content-box	默认值。元素的 width 和 height 仅包含内容区域，不包含 padding 和 border。理解： width = 内容的宽度
border-box	元素的 width 和 height 包含内容、padding和 border。理解： width = border + padding + 内容的宽度