聊聊 CSS

先补充一些概念

• C/S（客户端/服务器）：要下载到本地才能用
  • 需要安装、偶尔更新、不跨平台
• B/S（浏览器/服务器）：在浏览器输入网址就可以使用
  • 无需安装、无需更新、可跨平台

!NOTE

B/S 架构优点如此之多，可以抛弃 C/S 架构吗？-- 不可以

必须用 C/S 的软件：大型专业应用（性能）、军工应用（安全）

那我们前端人员只能写网页吗？-- 不是

我们可以使用熟悉的语言去开发客户端应用，比如 React Native、Uni-App + Vue。还可以使用 Electron 去开发跨平台的 PC 端应用

---

选择器优先级

内联样式 > ID > 类 > 标签 > 通配

选择器权重计算

权重值：格式为（a，b，c）

• a：一个选择器中【ID】选择器的个数
• b：一个选择器中【类、伪类、属性】的个数
• c：一个选择器中【元素、伪元素】的个数

权重值比较规则：从左往右比，谁大谁胜出。若一样大，后写的优先

例子

div.box1 ul.list li --(0, 2, 3)
div.box1>ul>li -- (0, 1, 3)

特殊情况

• 出现 内联样式，则第4位是 1
• 出现 !important，则第5位是 1

字体相关

设置 font-size:40px 那该元素的高是 40px 吗？

不是，40px 是字体的高度，但是字体设计时一般会有些字超出字体边框，所以浏览器会采取自适应策略适当增加元素的高以能包含字体，所以高度会稍大些。

为了不使字体重叠影响观感，line-height一般设为 1.667 也就是 font-size 的1.667倍