余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

为什么CSS这么难学?(html和css难吗)

xiyangw 2022-11-25 11:30 75 浏览 0 评论

css核心知识点攻坚指南!

一、什么是CSS?

层叠样式表(英文全称:Cascading Style Sheets)是一门专门用来描述 html/xml 等文件样式的一门语言。

简而言之,我们可以通过编写css来描述当前文档的样式规则,让页面的展示得以符合我们的预期。

css难学吗?其实掌握了它的工作原理和核心特征,css就不再变得难学。

二、CSS如何工作?

如果你已经学习了客户端 JavaScript (原生js+DOM+BOM),你可能对"dom(文档对象模型,用来描述整个文档也就是web结构)" 这个概念有一定了解,包括它相关的一些API。

而在web中除了dom对象之外,还有一个css对象模型——即CSSOM,我们将其用来描述当前文档的css规则树。

实际上,在浏览器中,我们所写的页面的最终渲染形态——也就是展示在用户面前的视图,就受到了文档(DOM结构)和CSSOM两者的控制,流程大体如下:

  1. 浏览器引擎会自上到下去解读html,通过html的元信息(META标签的内容)来决定读取html的规则(注: 浏览器引擎一般由html解释器、cssom解释器、js引擎等多个部件组成,其中,html解释器用来解析html文档);
  2. 当引擎读取到dom标签时,会去构建形成视图的dom-tree(你可以发现,我们所写的html文档本身就是一种树结构语法规则),dom树自带默认的样式规则。
  3. 当引擎读取到style标签或者通过link加载css样式时,会通过cssom解释器来解析我们所写的css,将其合并近默认的css规则树中;
  4. 在上述过程中,视图 = dom-tree + cssom-tree。就是说dom树和css规则树会合并成我们的视图渲染的依据。
  5. 把4拆开来详细点讲,也就是说如何合并?首先,引擎基于已确定的css规则,会给我们html中的dom分配好即将在屏幕中展示的大小(空间,受width,height等属性影响)和位置(坐标,受margin等属性影响),截止到这一步,html和css中控制大小和位置的规则会结合生成一个称之为layout-tree的树形结构,这个结构用来描述我们的dom最终渲染的位置。 (注意,我们所说的回流,其实就是重复构建layout-tree的过程!)
  6. 接下来,根据cssom中的元素颜色、背景等规则(受color、background等属性影响),在layout树的基础上,生成render-tree,也就是我们所说的渲染树,用来描述我们最终的整个视图最终的表现。引擎会根据render-tree来调用电脑的操作系统所提供的api,将其绘制在屏幕上。(这个构建render-tree的过程就是我们所说的"绘制",重复这个过程,也就是我们所说的重绘)。
  7. 扩展补充: 屏幕是硬件,我们的操作系统可以通过指令来控制硬件工作。操作系统对上层开放了接口,我们的软件比如浏览器就可以通过调用这些接口来驱使硬件工作。

Q: 那么问题来了——你知道为什么我们一般把css规则写在html文档中的上面吗?

如果你读懂了上述的流程,那么其实很简单就思考出了答案:

A:

css如果写在dom的下面,那么一开始引擎读取dom标签的时候,会按照dom的默认规则来生成布局树(layout-tree)和渲染树(render-tree)。接着引擎继续工作去解析写在下面的css,从而更新css规则树,然后再次构建了新的laytou树(回流)和渲染树(重绘)。

如果视图非常庞大,我们可能会肉眼发现一开始渲染出的视图看起来是那种没有样式(只有默认样式)的视图,接着过了一丢丢时间,页面好像重新渲染了一下,变得有样式了。

而我们把css写在dom的上面,那么浏览器就会先构建cssom-tree,然后再读取dom构建dom-tree,两者集合形成布局树和渲染树,那么就会一次渲染成功,避免了回流带来的糟糕体验,有效提升渲染性能。

三、什么是CSS核心特征?

css核心特征就是我们必须要掌握的css的核心构成知识,掌握了这些核心点,就形成了我们的css知识体系。

在这里,我们列举出以下css必备的知识,并期望你在当下或者说未来,能够掌握它们,得以成为一个强大的前端开发工程师。

  • 选择器及其权重
  • css提供了各种目标选择器,来告诉浏览器规则是为哪些dom所设置。这是我们必须掌握的最基本的css知识
  • 选择器有对应的权重级别,并且可以通过层级组合方式进行权重的累加。当我们对一个dom描述了多个同样属性的规则时,权重值就是对应规则的优先级。
  • 布局规则属性(layout相关的属性,行与块,盒模型等)、文档层级、适配
  • 其实我们打开一个页面,视图无非是各种dom构成。如果我们从宏观的角度一层一层进行拆解,无非是大盒子里通过某种布局规则嵌套了多个小盒子,而小盒子里又通过某种布局规则来嵌套了多个小小盒子……如何设置布局规则,掌握布局规则相关的属性(比如弹性盒,栅格等),是学习css的第一要素。
  • 页面中,每个文档层级之间互不影响(比如定位引发的脱离文档流)。了解文档层级的概念,可以更有效的去构建视图样式。
  • 适配作为一个布局相关的重要点,比如同样宽不同高的手机,如何展示同一个页面?适配相关的属性也是重中之重。
  • 表现属性(绘制属性)
  • 对于表现属性,比如color,background,可以多做认知。通过大量的页面样式编写来逐个熟悉它们。
  • 观望css新特性
  • css属性是很难掌握全的,因为css的标准也不断再提出新的属性。
  • 多了解css版本变化带来的一些比较重要的新特性(比如css3的css变量等),是我们css技能不断得以提升的有效方法。

四、如何衡量CSS学的如何?

如果说给定一个页面,当我们一眼扫过页面的时候,发现整个页面的渲染实现似乎没有什么难点,我们能够宏观的将其进行一层层的布局拆解,并能对应提出一种或者多种具体的解决方案(比如利用弹性盒、栅格等具体的一些属性),那么css的修行算是达成了基本目标(两周学习时间算是比较冗余)。

如果给出一个具体的UI稿(稿中给定一些数据,比如盒子的长宽值等),我们能够通过html+css做到99%以上的还原度,那么css的修行算是达成了大成阶段(三、四周学习时间算是比较冗余),基本能够解决现实工作中的绝大多数场景。

五、总结

只要掌握了css的工作原理,遵循css核心特征分门别类地去学习它,会发现css的学习之路,将不再那么难。

相关推荐

数控系统常见术语详解,机加工人士必备资料
数控系统常见术语详解,机加工人士必备资料

增量编码器(Incrementpulsecoder)回转式位置测量元件,装于电动机轴或滚珠丝杠上,回转时发出等间隔脉冲表示位移量。由于没有记忆元件,故不能准...

2023-09-24 17:42 xiyangw

功、功率、扭矩的关系

功=功率×时间work=power×timeW=P×T功=力×距离work=force×lengthW=F×LP×T=F×LP=F×L/T=F×V(velocity)具体到电机输出轴上,圆...

Wi-Fi协议(802.11 )常见专业术语汇总
Wi-Fi协议(802.11 )常见专业术语汇总

Wi-Fi协议(802.11)常见专业术语汇总AP(Accesspoint的简称,即访问点,接入点):是一个无线网络中的特殊节点,通过这个节点,无线网络中的...

2023-09-24 17:41 xiyangw

不需要策略模式也能避免满屏if/else
不需要策略模式也能避免满屏if/else

满屏if/elsejava复制代码publicstaticvoidmain(String[]args){inta=1;if...

2023-09-24 17:41 xiyangw

喜极而泣,我终于干掉了该死的 if-else
喜极而泣,我终于干掉了该死的 if-else

推荐阅读:面试淘宝被Tomcat面到“自闭”,学习这份文档之后“吊打”面试官刷完spring+redis+负载均衡+netty+kafka面试题,再去面试BAT...

2023-09-24 17:40 xiyangw

Python中使用三元运算符简化if-else语句
Python中使用三元运算符简化if-else语句

Python是一种极简主义的编程语言,相比其他编程语言,在多个地方简化了代码的写法,可以让我们用更少的时间更简洁地完成工作。以赋值运算符为例:a=a+b简化...

2023-09-24 17:40 xiyangw

雅思课堂 | 雅思口语写作句型第二讲
雅思课堂 | 雅思口语写作句型第二讲

纯干货,无废话用最少的时间学最制胜的内容!泡图书馆泡不过学霸?碎片时间也能弯道超车!向着雅思8分行动起来吧!雅思口语写作句型1.Ipreferseeing...

2023-09-24 17:39 xiyangw

设计模式(三)——简单的状态模式代替if-else
设计模式(三)——简单的状态模式代替if-else

博主将会针对Java面试题写一组文章,包括J2ee,SQL,主流Web框架,中间件等面试过程中面试官经常问的问题,欢迎大家关注。一起学习,一起成长。前言大多数开...

2023-09-24 17:38 xiyangw

如何优化代码中大量的if/else,switch/case?

前言随着项目的迭代,代码中存在的分支判断可能会越来越多,当里面涉及到的逻辑比较复杂或者分支数量实在是多的难以维护的时候,我们就要考虑下,有办法能让这些代码变得更优雅吗?正文使用枚举这里我们简单的定义一...

优秀程序员早就学会用“状态模式”代替if-else了
优秀程序员早就学会用“状态模式”代替if-else了

2020年已经进入倒计时了,大家立好的flag完成了吗?2020实“鼠”不易,希望2021可以“牛”转乾坤。简介状态模式是行为型设计模式的一种。其设计理念是当对...

2023-09-24 17:37 xiyangw

用Select Case语句对执行多条件进行控制
用Select Case语句对执行多条件进行控制

今日的内容是"VBA之EXCEL应用"的第六章"条件判断语句(If...Then...Else)在VBA中的利用"。这讲是第三节...

2023-09-24 17:37 xiyangw

c#入门教程(四)条件判断if else

条件判断,是编程里常用的判断语句,比如某个代码如果满足条件就执行a代码块否则就执行b代码块。案例1:inti=2*5;if(a>0){执行a代码块}elseif(a<0){执行b代码块...

每日学编程之JAVA(十一)—条件语句(if……else)

一个if语句包含一个布尔表达式和一条或多条语句。如果布尔表达式的值为true,则执行if语句中的代码块,否则执行if语句块后面的代码。if语句后面可以跟else语句,当if语句...

不需要策略模式也能避免满屏if/else

除了使用策略模式以外,还可以使用其他设计模式来避免满屏if/else的问题。以下是一些可能的解决方案:工厂模式:将if/else语句移到工厂类中,由工厂类负责创建对象。这样可以将if/else语句从客...

围绕ifelse与业务逻辑的那些梗
围绕ifelse与业务逻辑的那些梗

ifelse很重要,几乎是程序员编程核心,业务逻辑与规则也通过ifelse体现出来,语句简单但是背后文章很大,先看几则幽默图:1.也许默认使用returnf...

2023-09-24 17:36 xiyangw

取消回复欢迎 发表评论: