F12在页面上调元素大小等样式时（例：200px）
- 按住ctrl+上下可以+-100
- 按住alt+上下可以+-0.1
- 按住shift+上下可以+-10
- 直接按上下可以+-1
所有绝对定位和浮动的元素都会自动变成display：block 且不允许修改
属性值计算过程：
- 确定声明值：参考样式表中没有冲突的声明，作为CSS属性值。 图中白色底色的为没有冲突的样式：
- 层叠冲突：对样式表有冲突的声明使用层叠规则，确定CSS属性值
- 比较重要性（作者样式表覆盖浏览器样式表）
- 比较特殊性（权重）
- 比较源次序（代码靠后的覆盖代码靠前的）
- 使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值
- 使用默认值：对仍然没有值的属性，使用默认值
如果希望继承样式：可以设置inherit。
例如：color：inherit。相当于在第二部层叠冲突的时候就确定了color。不需要等到第三步使用继承
让a元素继承自父元素的颜色： text-decoration：none; color：inherit;
%、em、rem、auto等单位最终都会换算成绝对单位px
伪类：
a标签 爱恨法则：link visited hover active
偶数:nth-child(2n) <=> :nth-child(even)
奇数:nth-child(2n+1) <=> :nth-child(odd)
contenteditable属性-放到任何元素上，都可以让其变成可编辑的状态
<div contenteditable></div>
颜色的alpha通道（读音：阿尔法 ）
颜色的透明度。0是完全透明，1是完全不透明
rgba的最后一个值
写法：rgba（0，0，0，0.5）或 rgba（0，0，0 / 50%）
rgba的透明度 VS opacity透明度
rgba设置背景，是背景透明
opacity是整个元素的透明度，元素里的文字也会透明
尺寸的百分比
百分比是一个相对单位，其相对于元素的参考系，比如：
- 普通元素的参考系为父元素的内容区域（content区域）
- 绝对（固定）定位元素的参考系为父元素中第一个定位元素的padding+content区域
下面罗列常见的百分比情况：
| css属性 | 百分比相对于 | 备注 |
|---|---|---|
| width | 参考系的宽度 | |
| height | 参考系的高度 | 参考系高度受本身宽度影响时，设置无效 |
| padding | 参考系的宽度 | |
| border | 参考系的宽度 | |
| margin | 参考系的宽度 |
设置height为百分比是要父元素的高度是确定的
最大最小宽高
- 最大宽度：
max-width，最大高度：max-height - 最小宽度：
min-width，最小高度：min-height
当一个元素的尺寸会自动变化时，设置最大最小宽高，可以让它不至于变得过小或过大。
在实际开发中，我们通常为PC端的页面设置一个最小宽度，通常此宽度为设计稿的宽度
html { min-width: 1226px;}
又或者，我们会为页面中的所有图片设置一个最大宽度，让其不至于超过容器
img { max-width: 100% ;}
修改网页图标
index.html页添加
<link rel="shortcut icon" href="./img/xxx.ico" type="image/x-icon" />
引入iconfont字体图标
- 下载图标文件夹，将文件夹内的文件挪到项目里（除了demo的其它文件）
- 引入
- main.js引入import '@/assets/font/iconfont.css'
- App.vue的style引入@import './assets/font/iconfont.css';
- 使用：
<i class="icon-chehui iconfont"></i>
HTML语义结构
<header><footer><main>主体，一个页面只能有一个，且必须为顶层标签，<main>是顶层标签，不能放置在<header>、<footer>、<article>、<aside>、<nav>等标签之中<article>表示页面里面一段完整的内容,一篇文章或者一个论坛帖子.一个网页可以包含一个或多个<article>，比如包含多篇文章.<aside>可以用来放置侧边栏，但不一定就在页面的侧边；文章级别的，可以用来放置补充信息、评论或注释。<section>标签表示一个含有主题的独立部分，通常用在文档里面表示一个章节，比如<article>可以包含多个<section>。<section>总是多个一起使用，一个页面不能只有一个<section>。多个<section>可以放置在同一个<article>里面，一个<section>里面也可能包含多个<article>。<nav>导航<h1>~<h6><hgroup>主标题包含多级标题（比如带有副标题），将多级标题放在其中。注意，<hgroup>只能包含<h1>~<h6>，不能包含其他标签。
使用伪元素设置样式时，一部分不需要伪元素的需要单独设置
可以使用content:none;或者background:transparet;
img元素白边问题
原因：img 元素默认是行盒，对齐方式为 vertical-align: baseline;，这就导致了，baseline 以下的部分被空了出来，显示了背景的白色。
解决办法：
- 根本上消除 img 的对齐方式 —— 块状化：（这个方法用的最多）
img {
display: block;
}
- 更改 img 对齐方式，以下三种均可
img {
vertical-align: top;
vertical-align: middle;
vertical-align: bottom;
}
- 更改行高，行高是两条 baseline 之间的距离，因此可以暴力的让行高消失
{
line-height: 0;
/* font-size: 0; 当 line-height 使用数值、百分比或者 rem 定义时也可用这种方式，因为 line-height 参照的是 font-size 的值*/
}
伪元素before和after是不受通用样式（*）影响的
需要在通用样式里加入：
