CSS简要发展历史
基础知识
解决规则冲突的一个规则
-
样式表来源
-
选择器优先级
-
源码位置
- import 顺序
- 后覆盖前
由层叠概念引申出的 css 代码 good practice
选择器尽量少用 id
尽量不要用 important
自己的样式加载在引用库样式的后面
继承
大部分具有继承特性的属性跟文本相关:
color、 font、 font-family、 font-size、 font-weight、 font-variant、 fontstyle、 line-height、 letter-spacing、 text-align、 text-indent、 texttransform、 white-space以及word-spacing
还有少部分列表、表格的属性
可以使用 inherit关键字显式指定一个属性值从其父元素继承
盒模型
三角形实现：border-bottom
固定比例矩形：padding、 radio
水平居中：margin auto 剩余空间均分 auto
实现渐变框：background-clip origin
负 margin--margin负值最终减少的是外界可感知的宽高
padding、 border、 margin中，只有margin可以设置负值
设置左边或顶部的负外边距，元素就会相应地向左或向上移动， 导致元素与它前面的元素重叠：
如果设置右边或者底部的负外边距，并不会移动元素， 而是将它后面的元素拉过来；
布局
任意盒子的display
外部显示类型(display-outside)：规定了该盒子如何与同一格式上下文中的其他元素一起显示。
内部显示类型(display-inside)：规定了该盒子内部的布局方式。比如display：flex；其外部显示是block，参与 BFC； display： inline-flex，则外部显示是inline，参与BFC。他们内部的盒子都参与弹性盒子布局。
BFC
IFC
用例：
- 单行文字垂直居中
- 文字 icon 对齐
Flex
Grid
1。 大面积或整体布局推荐使用Grid布局
2。 小面积或组件中，或Grid Item中可以使用Flex做灵活布局
定位
层叠上下文
层叠上下文是对HTML元素的三维构想，将元素沿着垂直屏幕的虚构的Z轴排开
层叠顺序不仅指不同的层叠上下文的顺序，同一个层叠上下文内，元素间也有顺序
编写z-index的建议：1.使用css 变量 或者 预处理语言的变量，管理z-index的值2.将预设间隔设置 10 或 100，方便后续的插入
变形、过渡、动画
transform、transition、animation — 性能相关
如何写动画性能更好？
1。 尽量不用触发reflow的属性
2。 在遇到性能问题时可以触发硬件加速，比如设置will-change属性、设置transform3d等
3。 尽量使用transform 和 opacity 去写动画
响应式设计
响应式设计是一种网页设计方法，旨在使网站能够在不同大小的设备上进行浏览，并以最佳方式呈现内容。这包括使用不同的布局、字体大小和图像大小来适应不同的屏幕尺寸，如手机、平板电脑和桌面电脑等。
响应式设计的主要目标是确保网站的用户体验不会因为设备类型或大小而受到影响。这可以通过使用流式网格、可伸缩的图像和字体大小以及媒体查询等技术来实现。媒体查询是一种CSS技术，可以根据设备的尺寸和其他属性来应用不同的样式。
响应式设计的优点包括：提高用户体验，增加网站流量和转化率，降低开发和维护成本，减少内容冗余和增加网站的可访问性等。随着移动设备的普及和多样化，响应式设计已成为现代网站设计的标准。
优先选用流式布局，如百分比、flex、grid等
使用响应式图片，匹配尺寸，节省带宽
使用媒体查询为不同的设备类型做适配
给移动端设备设置简单、统一的视口
使用相对长度，em、rem、 w 做为长度度量
-
媒体查询
使用媒体查询的一些Tips
1。媒体查询同样遵循cascading层叠覆盖原则，min- 和max-选择一个
2。由于设备的多样化逐渐不可枚举，断点的选择尽量根据内容选择
3。由于断点的增加会增加样式处理的复杂度，所以尽量减少断点
-
设备像素、参考像素和移动设备视口
但是真正使用的CSS像素并不是用0.0213度去精确计算的，因为css像素存在的目的是为了保证阅读体验一致，所以对不同的物理设备，CSS使得浏览器中 1css像素的大小在不同物理设备上看上去大小总是差不多 。真正实现时，为了方便基本都是根据设备像素换算的。浏览器根据硬件设备能够直接获取css像素
