发表于： 2018-06-05 23:55:14
2 639
今天完成的事情
- # 完善任务13,如首页侧边栏,进一步还原设计图;
- # 学习使用了css3新属性:函数calc() 和2D转换
明天计划的事情
- # 领取任务14
遇到的问题
- #1 如何用css制作页面一侧边栏:
- 之前任务有做过下拉菜单,所以在实现原理上是一样的,关键点有两点,分别是:input复选框配合label标签/checked选择器/,原理是一样,但实际的场景有很大的区别,之前任务的菜单是下拉式的,这次任务的菜单是侧滑式的;侧滑式相对要复杂一些,难点在于侧拉栏滑出时,原页面整体需要往右滑动,相当于改变了原页面的所有样式.
- 此时问题聚焦于input框怎样才能使用checked选择器控制所有页面?如下图css样式中那样,原页面header/nav/main三个部分都会发生改变
- 乍一看方法很简单对不对,之前也成功地使用过,不过今天又踩坑了.之前任务关注的焦点一直是css样式文件,很少有关注到HTML文档,input能通过checked选择器有效控制整个页面的元素有个前提,那就是整个页面元素为input元素的子元素或后代相邻元素,由于input标签并不是一个容器,无法承载整体页面的元素,故只能将input元素放置到所有元素前面;文档结构如下:
- 这和之前学过的:hover选择器是一样的,同样有这个限制,当时只是知道有这个规则,那么按照规则来就好了,不知道其中的原理,这次遇到checked选择器无疑暴露了这个知识盲点;
- 现在问题可以引申为:为何CSS相邻兄弟选择器只支持后面的元素，而不支持前面的兄弟元素?;
- 同样的,为何CSS只能通过父元素控制子元素,而子元素无法控制父元素?
- 这其中和CSS,HTML本身的渲染机制有关
- ##浏览器的渲染流程如下:
- 1/构建DOM树(DOM tree)：从上到下解析HTML文档生成DOM节点树（DOM tree），也叫内容树（content tree）;
- 2/构建CSSOM(CSS Object Model)树：加载解析样式生成CSSOM树；
- 3/执行JavaScript：加载并执行JavaScript代码（包括内联代码或外联JavaScript文件）；
- 4/构建渲染树(render tree)：根据DOM树和CSSOM树,生成渲染树(render tree)；
- 5/布局（layout）：根据渲染树将节点树的每一个节点布局在屏幕上的正确位置；
- 6/绘制（painting）：遍历渲染树绘制所有节点，为每一个节点适用对应的样式，这一过程是通过UI后端模块完成；
- 注:不同于网络部分的多进程渲染引擎是单线程工作的，意味着渲染流程是一步一步渐进完成的。
- 为了更友好的用户体验，浏览器会尽可能快的展现内容，而不会等到文档所有内容到达才开始解析和构建/布局渲染树，而是每次处理一部分，并展现在屏幕上，这也是为什么我们经常可以看到页面加载的时候内容是从上到下一点一点展现的.浏览器的渲染机制讲究先来后到,论资排辈,不然乱了套,就会发生阻塞,影响性能,这从根本上决定了选择器无法选择父元素和相同层级前面的元素;
- #2/css3函数:calc(四则运算)的使用方法与场景:
- 定义:用于动态计算长度值。
- 用法:任何长度值都可以使用calc()函数进行计算；
- calc()函数支持 "+", "-", "*", "/" 运算；
- calc()函数使用标准的数学运算优先级规则;
- 注:运算符前后都需要保留一个空格;
- 为什么好端端的前后要保留一个空格呢,这一点我刚开始很不理解,导致经常犯错,这肯定是有原因的,网上资料显示:空格在
calc()的加减操作中有着非常重要的作用，这跟普通的编程语言中的用法有所区别，我想，这可能是因为在CSS中，你可以用“aaa-bbb”这样中间有减号的类名，而在多数的编程语言中，这样的变量名是不允许的。所以在使用" + "," - "运算时,前后必须要保留空格;" * "," / "运算没有强制要求,但为了风格统一,建议也要保留前后的空格; - ##使用场景:在不同长度单位之间进行计算,特别是涉及到相对长度单位.我想既然calc叫做函数,那么意味着会有一个类似变量的值,虽然css中没有变量的概念,但是相对长度单位是变化的.
- 案例:在本任务页面二中,会有一个模块,border采用的是绝对长度为3px;内容及边距采取的相对长度单位:vw;在之前做这个任务的时候,这个模块的总宽度为:
- width+2margin+2border=33vw+6px;在页面宽度减少到一定程度,即页面宽度小于600px时(1vw<6px),页面局部就会发生错乱,一行就只能放置2个box,所以在这种情况下有必要消除这6px所带来的不便,代码如下:
收获
# 学习了浏览器渲染原理与流程;
# 了解了css3新属性:函数/动画/2d转换
# 样式分离与组件合并,乍一看以为两者是对立的,实则是既对立又统一,样式分离的对象是那些关乎全局的,离散的单个元素,组件合并的对象是指那些模块化的的元素.这其中的很多手法需要有一些工程经验,目前也只能大概明白概念;
总结
- task13:
- 成果链接: http://www.yanzehao.top/task13/
- 官方脑图:
- 任务脑图 :
- 任务耗时:3day;
- 刚开始对样式分离有了概念之后,不知道具体怎么分?我要分的对象是什么?该要分几个?这样分的理由是什么?
- 其实这就是css架构的问题,和建筑师十分类似,每个人对架构的理解都存在一定的差异性,这要视具体工程而定.
返回列表
评论