CSS(Cascading Style Sheet)对HTML做补充,做效果。现在使用的为最新的CSS3.
层叠(Cascading)
层叠三大规则:(优先级依次递减)
- 样式表来源
- 选择器优先级
- 源码位置
1、样式表来源重要次序排序
- 用户代理样式(浏览器默认样式)
- 用户样式表 很少有
- 作者样式表 developer写的
- 作者样式表中的 !important
- 用户样式表中的 !important
- 用户代理样式表中的 !important
2、选择器优先级
具体优先级:
源码顺序:
The last declaration in document order wins.
- 对于@import的样式,根据@import的顺序
- 对于link和style标签的样式,根据在document中的顺序决定。
- 选择器尽量少用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关键字显式指定一个属性值从其父元素继承
CSS值和单位
- 单位
- 长度
- 绝对长度:px,pt,cm,in...
- 相对长度:em,rem,ex,rex,...vw,vh,vmin,vmax
- 角度 : deg,grad,turn,rad
- 时间 : s,ms
- 分辨率 : dpi,dpcm,dppx
- 长度
- 值
- 文字类:比如像initial这种关键字,颜色、位置等等
- 数值类:比如z-index:1这种数值,或者带有单位的数值、百分比等
- 函数生成:比如calc(),min(),max()等
盒模型
浏览器根据视觉格式化模型(visual formatting model),将所有元素表示为盒子模型,css通过盒模型做layout。
-
控制盒子类型display: block、inline、inline-block、flex、…
-
控制盒子大小&计算方式width,height …box-sizing: content-box、border-box
-
控制盒中内容流overflow: auto、scroll、hidden、…
-
控制定位position: static、relative、absolute、fixed、sticky
-
是否可见visibility: visible、hidden、…
padding、border、margin中,只有margin可以设置负值
常规流布局
任意的盒子display
- 外部显示类型(display-outside):规定了该盒子如何与同一格式上下文中的其他元素一起显示。
- 内部显示类型(display-inside):规定了该盒子内部的布局方式。比如display: flex;其外部显示是block,参与BFC;display: inline-flex,则外部显示是inline,参与IFC。他们内部的盒子都参与弹性盒子布局。
常规流的盒子
- 外部显示为block
- display: block | flex | grid |table | flow-root |…
- 块级格式化上下文(BFC)(block formatting context)
- 内部显示为inline
- display: inline | inline-block |inline-flex | inline-grid |inline-able | …
- 参与内联级格式化上下文(inline formatting context)
弹性盒子布局
Flexible Box Layout是为了提供更加高效灵活的布局方式,在即便是宽高未知的情况下,也能排列和分割一个盒子内部的布局。而且在不同布局方向(横向/纵向)的调整更为灵活。
网格布局
2017年推出的Grid布局可以定义由行和列组成的二维布局,然后将元素放置到网格中。元素可以只占其中一个单元格,也可以占据多行或多列。
Flex 和 Grid
建议:
- 大面积或整体布局推荐使用Grid布局
- 小面积或组件中,或Grid Item中可以使用Flex做灵活布局
定位Position
为了我们可以在文档流的基础上,让元素移动,做出更多灵活的改变。当position属性的取值非static的时候,可以使用top, right, bottom, left对其进行定位。
层叠上下文 (The Stacking Context)
层叠上下文是对HTML元素的三维构想,将元素沿着垂直屏幕的虚构的Z轴排开。
形成新的层叠上下文的条件(任一即可):
-
position: relative或absolute;并且z-index不是auto
-
position: fixed或sticky
-
flex或grid的子元素;并且z-index不是auto
-
opacity的值小于1
-
transform的值不为none
-
will-change的值不为通用值
-
……详见规范
层叠顺序
层叠级:
关于z-index的使用建议:
- 使用css变量或者预处理语言的变量,管理z-index的值
- 将预设间隔设置10或100,方便后续的插入
变形、过度、动画
transform变形
2D相关属性:
- transform: translate(移动)、rotate(旋转)、scale(放缩)、matrix(变形矩阵)等
- transform-origin: right top、center等表示变形时依据的原点
3D相关属性:
-
transform: translate3d、rotate3d、scale3d、matrix3d等
-
transform-origin: right top、50px 30px等表示变形时依据的原点
-
transform-style: flat或preserve-3d看子元素的3d表现perspective:观看点距离z=0这个平面的距离,可以在transform中用
-
perspective()使用作用为当前元素,也可以直接使用,给后代元素一个统一值
-
perspective-origin:观看者的位置,如top、bottom等
-
backface-visibility:元素正面只有朝向观察者的时候可见
Transition 过渡
通过指定某些元素属性从一种起始状态,在一段时间内以某种变化节奏,过渡到终止状态。
Animation 动画
- @keyframes关键帧用来定义动画过程中出现的关键样式
- animation-*相关属性用来为元素添加动画
transform transition animation 性能
如何写动画性能更好?
1.尽量不用触发reflow的属性
2.在遇到性能问题时可以触发硬件加速,比如设置will-change属性、设置transform3d等
3.尽量使用transform和opacity去写动画
响应式设计
媒体查询
媒体查询允许某些样式只在页面满足特定条件时才生效。我们可以将媒体类型(如screen、print)以及媒体特性(如视口宽度、屏幕比例、设备方向:横向或纵向)做为约束条件。
使用媒体查询的一些Tips
1.媒体查询同样遵循cascading层叠覆盖原则,min-和max-选择一个
2.由于设备的多样化逐渐不可枚举,断点的选择尽量根据内容选择
3.由于断点的增加会增加样式处理的复杂度,所以尽量减少断点
设备像素
$$ 假设像素是X*Y \ PPI=X/屏幕宽度(inch)=Y/屏幕宽度(inch)=\sqrt(X^2+Y^2)/屏幕宽度(inch) $$
$$ DPR(设备像素比)=设备像素/CSS像素 $$
viewport
常见的移动端viewport的设置
1.保持scale为1
2.保持scale放缩参数是1/dpr
相对长度的使用
em
- 在非font-size属性中使用是相对于自身的字体大小
- 在font-size上使用是相对于父元素的字体大小(一般不在这个属性上使用,因为font-size的继承特性,多重嵌套后大小会不断放大或缩小,产生混乱)
rem
根元素的字体大小。通过伪类:root或者html选择器选定。由于是根元素的font-size,所以不会像em那样出现多重嵌套问题,减少了复杂性,同时作为一个相对单位,可以进行适配放缩,可以用来做响应式布局.
vw & vh
vw:视窗宽度的1%。vh:视窗高度的1%。同样,vw也可以作为响应式布局的基准单位。由于vw天然是视口宽度的1%,所以不需要js动态配置。应用和rem方案类似.
CSS生态相关
总结
本次课程主要讲解了CSS(Cascading Style Sheet)的相关知识。首先介绍了CSS层叠及规则,其中包括样式表来源、选择器优先级和源码位置等重要规则。接着,讲解了CSS的盒模型、常规流布局、弹性盒子布局和网格布局等相关概念。并深入探讨了CSS的定位属性、层叠上下文和相应的层叠顺序等,以及变形、过渡和动画等特性。最后还详细讲解了响应式设计中的媒体查询、设备像素、viewport、相对长度的使用等相关知识。
总之,CSS作为前端开发中不可或缺的重要组成部分,是实现Web页面美化以及响应式布局的核心技术。同时,也需要注意其层叠、继承等规则,尽量避免影响其性能。
标签:元素,层叠,布局,transform,理解,样式表,inline,CSS From: https://blog.51cto.com/u_16189732/7428407