基本规则

选择器的分类

元素选择器 a{}

伪元素选择器 ::before{}

类选择器 .link{}

属性选择器 [type=radio]}{}

伪类选择器 :hover{}

ID 选择器 #id{}

组合选择器 [type=checkbox] + lable{}

否定选择器 :not(.link){}

通用选择器 *{}

选择器的权重

ID 选择器 +100

类 伪类 属性 +10

元素 伪元素 +1

其他选择器 +0

:::info

优先级高的会覆盖优先级低的样式

:::

:::warning

权重不进位

:::

!important 优先级最高

元素 style 属性 优先级高

相同权重 后写的生效

非布局样式

  • 字体、字重、颜色、大小、行高
  • 背景、边框
  • 滚动、换行
  • 粗体、斜体、下划线

字体族

  • 衬线字体:serif
  • 非衬线字体:sans serif
  • 等宽字体: monospace
  • 手写体:cursive
  • 花体:fantasy

:::warning

font-family 中字体需要用双引号，但字体族不需要

:::

多字体 fallback

当一个字体找不到时就会接着向后找，都未找到会按照浏览器默认样式。

自定义字体

1
2
3
4
@font-face{
    font-familyL "fontName";
    src:url("./**.ttf");
}

行高

行高由 line-box 决定,line-box 由 inline-box 组成的,inline-box 决定行高的高度.

line-height 默认会垂直居中

底线

字符底部

基线

abg,ab 所在的即为基线，对于中午字符来说基线就是底线。

:::info

图片和文本默认都是按照基线对齐的，所以有的时候哦距离容器底部会有空隙，这时需要使用vertical-align:bottom的方式基于底线对齐

:::

背景

背景颜色

background 属性可以直接通过名字来设置颜色(不精准)，也可以通过 RGB 的形式来精准的指定颜色，还可以用 hsl(色像),来指定颜色饱和度，还可以用 hsla 来增加对透明的支持…

渐变色背景

linear-gradient(方向/角度,透明,…颜色)

1
2
3
height: 60px;
background: linear-gradient(45deg, transparent 40%, blue, aqua) no-repeat;
vertical-align: top;

背景图片和属性(雪碧图)

背景平铺

1
2
background-repeat:no-repeat
background:no-repeat

雪碧图是将多个图片集成到一个图片内然后通过像素区域获取目标图片

base64 和性能优化

优点：减少了 http 请求，节省了资源。

缺点：使用 base64 编码的图片体积会比原图片大 1/3、也会使 css 文件变大。

多分辨率适配

边框

1
2
border: 30px solid transparent;
border-image: url(./**.png) 30;

滚动

overflow:

visible:滚动条隐藏，溢出内容展示

hidden:滚动条隐藏，溢出内容隐藏

scroll:滚动条显示，溢出内容隐藏，允许滚动

auto:滚动条隐藏，溢出内容隐藏，允许滚动

文本折行

overflow-wrap(word-wrap) 通用换行控制，是否保留单词

word-break 针对多字节文字，中文句子也是单词

white-space 空白处是否段行

装饰性属性

font-weight(字重)

font-style:itatic(斜体)

text-decoration(下划线)

cursor(指针)

css 布局

基础布局方式

table

float+margin

兼容性最强

float 脱离文档流不脱离文本流，适合图文混排。

float 元素会形成块。

默认规则：尽量靠上、尽量靠左。

对父级元素的影响：

  • 从不距上消失
  • 高度塌陷

inline-block

可以像文本一样排版 block 元素

没有清除浮动相关问题

需要处理间隙:

  • 设置父元素的 fontsize 为 0，之后在子元素中重新设置 fontsize
  • 使用注释
1
2
3
/* block元素如div拥有独立宽高，默认情况下占据一行,常用于图文混排 */
display: inline; /* 默认不占据一行 */
display: inline-block; /* 对内表现为block对外表现为inline */

position

1
2
3
4
5
position: static; /* 正常渲染 */
position: relative; /* 相对与本身的四周做偏移保留初始位置 */
position: absolute; /* 脱离布局，不对文档造成影响，始终相对于最近的absolute坐标或者是relative坐标显示 */
position: fixed; /* 脱离布局，始终相对于可视区域显示 */
z-index: 1; /* 对于脱离文档流的,z-index的值大的在上层 */

flexbox

需要考虑不同版本浏览器的兼容问题。

1
2
display:flex			/* 父级容器也要定义 */
flex:1;					/* 单位:份，如需固定宽度则手动填写width,flex:none */

响应式布局

主要方法：

  • 隐藏+折行+自适应空间
  • rem/viewport/media query

css 效果

box-shadow

参数顺序:inset(内阴影,可选参数) x 方向偏移 y 方向偏移 模糊区域 扩展区域 颜色

不给偏移量只给拓展区域和颜色可以作为边框

给定偏移量修改拓展区域可以作为图形复制

text-shadow

参数:x 方向偏移 y 方向偏移 模糊区域 颜色

border-radius

绘制圆角矩形

1
border-radius: 10px;

圆形

1
border-radius: 50%;

background

clip-path

相比 border-radius 不改变容器大小

clip-path 可以使用动画

to be continue