html css 显示数值_【CSS纯技术】20.03.05-CSS渲染的原理
今天学的东西信息量都很大,导致我总是要反复观看。
因为自己还没理解透,所以这一篇也不再追求大家能够看懂,只是用于帮助自己梳理头绪。
一、CSS如何计算数值?
在写CSS的过程中,我们会用px、em、rem、vh、vw、%等各种单位指定长宽。
其中,px是绝对数值,而其他大多是相对数值。
但是,在网页实际渲染的时候,这些相对数值会通过一系列步骤,转换成绝对的px值,这样才能在网页中渲染出来。
我们来一一拆解这6个步骤,以某一个元素为例:
1、Declared value:收集所有的值(最终这些值要进行决斗,只能剩下一个);
2、Cascaded value:决斗之后,最后剩下的值;
3、Specified value:如果前2步没有指定某个值,并且也没有inherit,那么就在这一步指定系统默认分配的值;
4、Computed value:如果是相对的单位(比如em、rem),那么就需要转换为绝对的px值;
5、Used value:如果有对parent元素、视窗等的引用(比如%、vh、vw),那么在这里转换为绝对的px值;
6、Actual value:如果px值有小数点,那么四舍五入。
以上就是在数字方面,CSS渲染的全过程。
二、相对单位的参考系是什么?
既然是相对,那么肯定有一个东西用于参考。
所以,在这一篇里面,主要讲了各单位是以什么为参考的:
*注:以下的参考都是Computed value,就是已经全部转化为px值了。
1、%(针对字体,比如font-size等):以parent元素的font-size为参考;
2、%(针对长度,比如padding等):以parent元素的width为参考(非常重要!只以宽度为参考,很特殊,如果自己摸索的话,怕是要吃不少亏);
3、em(针对字体):以parent元素的font-size为参考,这个和%一样;
4、em(针对长度):以current element(目前元素)为参考!
5、rem(root em):以root元素的font-size为参考;
6、vh、vw:以浏览器视窗大小为参考,100vh能填满整个窗口。
三、现代CSS中,rem的用法
这里有一个很巧妙的用法:
html
先把整个html元素都定义为10px。
因为10px是死的,万一有人修改了浏览器的默认字体大小,网站字体就不会随着浏览器的设置而变,所以我们可以改成这样:
html
因为一般默认的font-size都是16px,那么16*62.5%=10px,效果是一样的,但它有个额外的好处,就是会随着浏览器的设置而变化,如果浏览器默认字体是20px,那它也会相应变大,很智能。
为什么要设置这个呢?
这是为了把CSS中所有的绝对值改为相对值,也就是把px改为rem。
这样一来,万一我们要修改网页的尺寸,只需要修改html中的font-size,整个网站的字号都会一起变,而不用一个个修改。
万一我们的CSS代码有上百行,一个个改是很累的,所以这个技巧能提升幸福感。
四、还没有完全理解的部分
只要学过CSS的,基本都会被float、position等复杂的原理弄晕过。
但是实际上,只要掌握了他们渲染的原理,也就不会那么神秘了。
但是毕竟定位是CSS种很重要的事情,所以肯定会比较复杂,今天我学完了这一课,但是一时半会儿没有弄得太清楚。
好好睡一觉,明天再重新学一遍,应该就能掌握得更深了。
五、为什么要学枯燥的原理
这要关系到我学CSS的动机,因为不像Javascript,CSS的很多语句是「不可预期」的,所以CSS的难,是和Javascript不一样的难,难在复杂,而不是逻辑。
既然如此,那我就有必要搞清楚复杂背后的原理。
现在啃几块硬骨头下来,以后是一定会对自己有好处的。
html css 显示数值_【CSS纯技术】20.03.05-CSS渲染的原理相关推荐
- css超过两行显示为..._使用这些不太常用的CSS属性,布局效率上又提高了一个层次...
有很多CSS属性,有些人不了解,或者他们了解它们,但是忘记在需要时使用它们.其实,有时候我们用 JavaScript 来实某些交互,CSS 一个属性就能搞定了,这可以大大节约我们编码的时间. 作为前端 ...
- css表格布局_布局秘密武器#1:CSS表格属性
css表格布局 Right now, Flexbox is arguably THE hot new thing for layout building. Flexbox's almost mirac ...
- css flexbox模型_如何将Flexbox后备添加到CSS网格
css flexbox模型 I shared how to build a calendar with CSS Grid in the previous article. Today, I want ...
- css金币动画_用纯CSS3制作的金币(铜币 | 钱币)
CSS 语言: CSSSCSS 确定 body { margin: 0; background: #262626; } span { font-family: "Montserrat&quo ...
- css显示组织架构图,纯CSS实现组织架构图
先上张图 Css 代码如下: div#contain { width:1000em; background:#fff; font-family:verdan; } ul#xflow { float: ...
- css 图片换行_前端学习口诀VI:html+css口诀结尾篇,值得收藏!
学习是一个永恒的话题,也是每个人一生都应该践行的主题,它没有时间.年龄的限制,只要你想开始,那随时都是最好的时机. 时至今日,前端的html.css口诀到今天已经到了尾声,不知道这几周的陪伴,给同学们 ...
- fpga驱动oled iic显示代码_【接口时序】6、IIC总线的原理与Verilog实现
欢迎FPGA工程师加入官方微信技术群 点击蓝字关注我们FPGA之家-中国最好最大的FPGA纯工程师社群 一. 软件平台与硬件平台 软件平台: 1.操作系统:Windows-8.1 2.开发套件:ISE ...
- css显示内容越来越模糊_纯干货,前端学者的福音!如何使用css滤镜改变图片颜色...
说到对图片进行处理,我们经常会想到PS,美图秀秀这类的图像处理工具.作为前端,全栈开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图片显示不同的颜色.或者是hover的时候,对图片的对比度, ...
- xml不显示css样式_如何使用CSS显示XML?
xml不显示css样式 Introduction: 介绍: You must be aware of the term XML and must have dealt with these vario ...
最新文章
- plot画图等高线contour 与 contourf 及API
- Linux 编程经典书籍推荐
- linux获取最高权限并取消_通过安卓渗透WIN7获取系统最高权限
- python定义一个类和子类_Python面向对象class类属性及子类用法分析
- 选对论文,效率提升50% | 本周值得读
- C# 特性(Attribute)入门教程
- 如何将软件限制策略发挥大作用
- 336计算机考研怎么做到啊,【图片】2020考研,老学长教你如何规划!【计算机考研吧】_百度贴吧...
- Idea利用maven打包spring boot项目
- IDEA——修改idea64.exe.vmoptions文件解决coding卡顿问题
- flutter PageView上下滑动切换视图
- 继裁员千人后 蔚来打算卖掉电动方程式车队
- C++ 函数重载的实现原理
- oracle Client 11g静默安装
- com.alibaba.fastjson.JSONException: can‘t create non-static inner class inst
- ASP.NET 自定义DataTable数据
- 服务器内网怎么更新微软补丁,架WSUS服务器 内网自动打补丁
- Houdini输出ABC到UE4识别材质
- android 打印机 kernel,adb如何打印kernel输出log
- tensorflow笔记之二十八——带掩码的损失函数