选择器种类
| 类型 | demo | 权重 |
|---|---|---|
| id选择器 | #box | 100 |
| 类选择器 | .box | 10 |
| 属性选择器 | a[href='xxx'] | 10 |
| 伪类选择器 | .box:hover .box:last-child | 10 |
| 伪元素选择器 | .box::after | 1 |
| 标签选择器 | div | 1 |
| 子级选择器 | .box > div | 0 |
| 后代选择器 | .box div | 0 |
| 兄弟选择器 | div + h1 | 0 |
| 匹配所有 | * | 0 |
- !important优先级最高，内联样式其次
- 权重不可越级，100个权重为10的选择器组合，也不会高于权重100的选择器
行内元素和块级元素的区别
行内元素
- 不会占用一行
- 设置宽高无效
- 垂直方向的margin和padding无效
块级元素
- 可以设置宽高
- 独占一行
- 多个块级默认从上到下
伪类和伪元素
伪类
将特定的效果添加到元素上，如：
.box:hover {color: red;}
伪元素
在目标元素的前后插入一部分内容，但不影响元素和dom结构，只是在表现中出现
.box::after {content: '伪元素';}
这里说一下:after和::after的区别，单冒号是伪类，双冒号是伪元素，但这里存在了一些历史问题，
起初，伪元素的前缀使用的是单冒号语法，但在css3的最新规范里，伪元素的语法被修改成使用双冒号，成为::before、::after。所以建议伪元素使用双冒号语法，单冒号的存在是可以理解成是为了向下兼容。
盒模型
一个元素的盒模型由：content、padding、border、margin组成
标准盒模型
设置的width和height只会作用域conten
IE盒模型，怪异盒模型
width和height会包含border和padding、如border：1px，padding：10px，width：20px，那么conten实际宽度只有9
一些情况下，我们根据设计稿要求需要宽高包含padding和border，那么设置：box-sizing: border-box即可
可继承的属性
- 字体系列
- 文本表现系列
- list-style
- cursor
可以理解为字体和文本等表现形式可以继承，空间表现和距离等不会继承
为什么行内元素之间没有设置间距，但浏览器表现会有间距
通常我们的代码如下：
<div>
<span>1</span>
<span>1</span>
</div>
两个span之间会有一个空格字符的间距，原因是因为代码中span标签后面其实还存在一个换行符，我们为了代码美观一般都会加一个换行符进去，换行符也会被解析，所以两个span之间会有间距 解决办法是设置父元素：
font-size: 0;然后子元素的字体大小单独设置- 标签之前不换行
精灵图
一般页面上会存在多个图片小图标，多个小图片会请求多次资源，影响页面展示，对服务器也存在压力
精灵图就是将所有的小图标整合到一张大图中去，然后通过设置background-position: 10px 10px;来定位使用图片，但缺点是难以整合图片，每次修改图标或者增加删除图标，都需要维护精灵图
字体图标
将各种图标集成到一个css字体中，通过类名来引入图标，以减少多个图标的请求时间和减少服务器压力，可以方便的控制图标的颜色（相当于把图标变成了一个文字），缺点是需要维护，图标中的色彩复杂时不可用
物理像素、多倍屏
一个像素为1px，一个物理像素宽度375px的手机屏幕可能存在750个像素点，也就是2倍屏，如果我们想要一个撑满的图片，那么需要给750px宽的图片才能保证图片不失贞，需要做高清图片展示时，可以根据不同的像素密度来展示不同的图片
1px问题
在2倍屏上，为了更好的适配css代码，浏览器会把1px渲染成wpx来保证进度，所以在高清屏上看到的1px就会比较粗
我常用的解决方案，设置伪类，宽度为目标元素的200%，然后再缩小0.5，达到模拟边框的效果
尺寸单位：px，em， rem，vw/vh，%
- px，固定的像素
- em，相较于父元素的字体大小，如：父元素设置字体大小16px，子元素设置字体大小2em，即是32px
- rem，相较于根元素的字体大小，如根元素（最外层html标签）设置字体大小16px，里面的子元素设置字体大小2rem，即是32px，可以用来做响应式交互，计算屏幕大小后动态设置根元素的字体大小，然后所有的子元素都使用rem为单位，但缺点是难以精确的还原设计稿，需要计算，开发和维护成本会提高
- vw/xh，相较于屏幕的宽高的单位，100vw===整个屏幕的宽度，也可用作响应式，配合对应的工具来做转换，如:
px2vw可以精确的还原设计稿 - %，相较于父元素的百分比单位，如
width: 50%即是父元素的一半宽
z-index层级问题
一般情况下，z-index较大的会展示在上层，但是定位postion !== static的可以无视z-index处于上层，如果两个元素都设置有postion，那么再比较z-index。
元素在设置z-index的同时还设置了float浮动也会造成z-index失效，可以去掉float使用其他方式布局
BFC问题
bfc可以理解成一个沙箱，与其他的沙箱环境互不影响，沙箱中的元素布局也不受外部影响
BFC特点
-
垂直方向上，自上而下排列，和文档流的排列方式一致。
-
在BFC中上下相邻的两个容器的margin会重叠
-
计算BFC的高度时，需要计算浮动元素的高度
-
BFC区域不会与浮动的容器发生重叠
-
BFC是独立的容器，容器内部元素不会影响外部元素
-
每个元素的左margin值和容器的左border相接触
BFC的作用
- 解决margin重叠的问题，父元素和子元素对同一方向设置margin时，会发生重叠，以值较大的为准，如果需要解决，,父元素变成bfc即可
- 高度塌陷的问题，父元素内多个子元素都设置浮动，使起脱离文档流，那么父元素因为没有内容撑开高度会变成0，讲父元素变成bfc即可
创建BFC
-
根元素：body；
-
元素设置浮动：float 除 none 以外的值；
-
元素设置绝对定位：position (absolute、fixed)；
-
display 值为：inline-block、table-cell、table-caption、flex等；
-
overflow 值为：hidden、auto、scroll；
工程化中的css
预处理类的css
less，sass等预处理语言有更加优雅的写法，通过编译手段生成浏览器可识别的css代码
- 父子级关系嵌套更加明显
- 可以编写可复用的css变量来统一全局，需要更换布局和色彩时更加的灵活，好维护
- 具有类似继承的语法，可以复用css的代码片段
构建原理
ex：使用了less
- 在webpack中通常使用less-loader：转换less=>css
- 通过css-loader把css代码集成到对应的页面
这些loader是webpack的一些插件，我们可以根据webpack的规则去自定义自己想要处理的样式，例如把：
dispaly: block;批量给处理成display: inline;，这些都是可以通过工程的配置来批量处理的
css样式之间的沙箱环境
在项目中我们可能会有很多相同的类名，例如多个组件都有一个.btn，但其表现需要做到隔离，不能因为类名而出现样式冲突
- react中有css modules的解决方案
- vue模板提供了
scoped的属性做控制
主题配置以及灵活的修改主题
- less、sass等可以自定义变量，全局使用这些变量即可
- tailwindcss提供自定义主题的功能
- vue3可以使用js变量来写css
css做优化
- css中选择器是从右往左依次做递归查找，
body div会找出所有的div，然后再从中找到属于body下的。开发中尽量直接使用类名来做选择器，减少递归次数 - css的的书写风格会影响代码的可阅读性，使用style-lint来做团队规范
- 样式规范需要定义，不能各个页面都写同样的代码，不然修改规范会很麻烦
- css代码大多数情况下需要做沙箱隔离，以免冲突
- 压缩代码
- 使用link标签加载css
- 尽可能减少页面的重排，重绘
- 抽离公用的css样式
个人使用tailwindcss可以解决以上大部分问题
