css 基础知识

一一一一一某人
222 阅读8分钟

基础知识

核心概念和知识点

  • 核心功能: 一个属性和一个值形成一个声明。一个或多个声明被{}包裹就形成一个声明块。如果选择器和声明块组合就形成了一个css 规则集。

文档流

  • 概念: 就是 css 中的流式布局
  • 特性
    1. 块级元素会占满一整行，所以按行排列。
    2. 行内元素默认会在一行内按列排布。
  • 如何脱离文档流
    1. position: absolute或position: fixed
    2. float

值和单位

  • 屏幕分辨率: 是指屏幕屏幕横纵方向的像素点个数
  • rem: 是 css3 中的一个单位。相较于根元素(html)的font-size大小，计算方法(font-size * rem 值)。
html {
  font-size: 16px;
}
.test {
  height: 10rem; /* 等同于 height: 160px; */
}
  • em: 相较于使用 em 的单位的font-size大小，计算方法(font-size * em 值)
.test {
  font-size: 16px;
  height: 10em; /* 约等于 height: 160px; 实际上不到 160px */
}

项目常用字体

  • window: 'Source Han Sans CN'
  • apple: 'PingFang sc'

选择器

选择器

  • 基础选择器
    1. 标签选择器
    2. class选择器
    3. id选择器
    4. 通配符选择器(*)
  • 属性选择器
    1. [attr]: 指定属性值的元素
    2. [attr = val]: 属性等于指定值的元素
    3. [attr *= val]: 属性包含指定值的元素
    4. [attr ^= val]: 属性以指定值开始的元素
    5. [attr $= val]: 属性以指定值结尾的元素
    6. [attr ~= val]: (不推荐)属性包含某完整单词的元素
    7. [attr |= val]: (不推荐)属性以某完整单词开头的元素
  • 组合选择器
    1. A + B: 相邻兄弟选择器
    2. A ~ B: 兄弟选择器
    3. A > B: 子代选择器(必须是父子关系，不能隔一个)
    4. A B: 后代选择器(只要是后代就可以)
    5. AB紧挨: 交集选择器
  • 条件伪类选择器
    1. :is(A, B, C): 在该选择器里面可以添加选择器，用来匹配符合对应选择器的元素
    2. :not(A, B, C): 在该选择器里面可以添加选择器，用来匹配不符合对应选择器的元素
    3. :has(): 该选择器接受一个选择器组作为参数，只能用在 js 的获取 dom 节点中
    4. :lang(): 根据元素语言来匹配的选择器(可以在标签上添加对应的属性 lang)
    5. :dir(): 匹配特定文本书写方向的元素(可以在标签上添加属性 dir)
  • 行为伪类选择器
    1. :hover: 元素鼠标悬浮的状态
    2. :active: 元素访问完成的状态
    3. :selection: 元素被鼠标选中的状态
  • 结构伪类选择器
    1. :root: 文档的根元素
    2. :empty: 匹配没有子元素的元素
    3. :first-letter: 匹配元素的首字母
    4. :last-line: 匹配元素的第一行
    5. :nth-child(n): 某个父元素的第 n 个元素，如果是对应的元素则匹配，否则无匹配对象
    6. :nth-last-child(n): 与:nth-child(n)判断方法相同，从后往前匹配
    7. :first-child: 与:nth-child(n)判断方法相同，元素中为首的元素
    8. :last-child: 与:nth-child(n)判断方法相同，元素中末尾的元素
    9. :only-child: 如果父元素有且仅有该元素，则匹配
    10. :nth-of-type(n): 倾向用于标签，表示顺序的第 n 个某标签，
    11. :nth-last-of-type(n): 倾向用于标签，表示逆序的第 n 个某标签，
    12. :first-of-type: 倾向用于标签，表示顺序的第 1 个某标签，
    13. :last-of-type: 倾向用于标签，表示逆序的第 1 个某标签，
    14. :only-of-type: 倾向用于标签，表示父元素仅拥有一个该标签，
  • 伪元素
    1. ::before: 在元素前插入的伪元素
    2. ::after: 在元素后插入的伪元素

css 三大特性

继承性

  • 继承: 子标签会继承父标签的样式
  • css 有一个很重要的特性就是子类可以继承父类的样式。
  • 可以通过几个属性来控制继承的内容
    1. inherit: 继承父类对应属性的值
    2. initial: 应用该属性的默认值，例如 color 的默认值是#000
    3. unset: 如果属性是默认可以继承的，则取 inherit 消过，否则取 initial 效果
    4. revert: 效果等同于 unset，兼容性差

层叠性

  • 层叠: 当样式设置冲突时，层级低的会被层级高的覆盖

css 选择器的权重和优先级？

  • 权重: 行内样式 > id 选择器 > class 选择器 > 标签选择器 > 伪类选择器 > 继承样式 > 通配符
  • 同权重的遵循就近原则

选择器的优先级

  • 顺序从上到下(括号内表示权重，但无法通过权重相加增大)
    1. (10000): !important
    2. (01000): 标签内联样式sytle
    3. (00100): id选择器
    4. (00010): class选择器, 伪类选择器, 属性选择器
    5. (00001): 标签选择器, 伪元素选择器
    6. (00000): 通配符, 后代选择器, 兄弟选择器
    7. (-00001): 继承样式

常用属性

@规则

  • @media: 媒体查询，根据不同的屏幕宽度使用不同的样式。
  • @keyframes: 帧动画。
  • @namespace: 告诉 css 引擎必须遵守 XML 的命名空间。
  • @font-face: 描述将要下载的外部的字体。
  • @document: (不常用) 是写在 css 样式表中的条件规则，根据规则可以匹配一个或者多个匹配函数，最终在指定的 url 中将 css 样式生效。目前该规则只在 firefox 浏览器中有效，而且需要添加-moz-。
    1. url(): 匹配整个 URL。
    2. url-prefix(): 匹配 URL 是否以参数指定的值开头。
    3. domain(): 匹配文档的域名是否为参数的域名或者子域名。
    4. regexp(): 匹配文档的 URL 是否与参数的正则表达式匹配，该表达式必须匹配整个 URL。
  • @page: (不常用) 用于在打印文档时修改某些 css 属性，只能修改 margin,orphans,widow 和 page breaks of the document。
  • @charset: css 文件的字符编码
  • @import: 在 style 或者 css 文件中引入其他的 css 文件
  • @supports: (不常用)

animation 动画的参数及用法

  • animation-name: 制定绑定到 css 选择器上帧动画的名称
  • animation-duration: 定义动画完成一个周期需要多长时间
  • animation-timing-function: 定义动画完成一个周期的方式
keyinstruction
linear全程速度相同。
ease默认值；开始慢，然后加快，最后变慢。
ease-in动画以低速开始
ease-out动画以低速结束
ease-in-out动画以低速开始和结束
cubic-bezier(n,n,n,n)贝塞尔曲线（速度曲线）；其中 n 可以为 0 到 1 的值
step-start在显示过程中都是以下一帧的显示效果来填充动画
stap-end在显示过程中都是以上一帧的显示效果来填充动画
stap在显示过程中都是以上一帧的显示效果来填充动画
  • animation-delay: 定义动画的延迟时间；值可以为负，-n表示立即执行动画，但动画的前 n 秒不执行
  • animation-iteration-count: 定义动画的播放次数
keyinstruction
n动画播放 n 次
infinite动画一直播放

  • animation-direction: 定义是否循坏交替反向播放动画

  • animation-fill-mode: 定义在动画播放前和播放后要应用的样式

keyinstruction
  • animation-play-state: 指定动画的播放和暂停的状态

background-clip 的基本用法

  • 常规属性和属性值

    keyinstruction
    border-box背景被裁剪到边框盒。
    padding-box背景被裁剪到内边距框。
    content-box背景被裁剪到内容框。
    text背景被裁剪到内容框。

  • 特殊的额外属性值

    .text {
  -webkit-background-clip: text;
}

  • 使用方法: 一般使用 rem 设置字号，用 px 设置边框，用 em 设置其他的大部分属性，尤其是内边距、外边距和圆角(有时候用百分比设置容器宽度)

css 使用技巧

特殊技巧

  • text-align: justify;只有在文字有多行的时候才能两端对齐。这时可以使用行内标签，例如<i></i>，然后为标签设置样式display:inline-block; width: 100%;
  • 使用 css 实现文字裁剪背景
.test {
  /* 文字裁剪背景 */
  -webkit-background-clip: text;
  /* 文字透明 */
  -webkit-text-fill-color: transparent;
  background-image: url();
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
  • 文字超出部分
/* 单行 */
.test {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 多行 */
.test {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
  • 文字阴影
/* text-shadow: [X-offset,Y-offset,Blur,Color]; */
/*
X轴偏移量：指阴影居于字体水平偏移的位置。
Y轴偏移量：指阴影居于字体垂直偏移的位置。
模糊：指阴影的模糊值。
颜色：指阴影的颜色;
*/
.test {
  text-shadow: 1px 1px 1px #000000;
}
  • 让滚动条的滚动效果更加平滑
.test {
  scroll-behavior: smooth;
}

不固定高宽 div 垂直居中的方法

/* 方法一 */
.parent {
  height: 100px;
}
.parent::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* 微调整空格 */
}
.children {
  display: inline-block;
  vertical-align: middle;
}

最后愿大家面试进大厂，代码无BUG

avatar
文章
阅读
粉丝