最后
编程基础的初级开发者,计算机科学专业的学生,以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念,以优化代码,提高编程技能。这份笔记都是可以作为参考的。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
抽象 如果你对混合类和变量有了进一步的认识,你会发现他们可以任意组合。我可以定义一个混合类,然后在另一个混合类里面引用它。我也可以用他们组合出第三种样式,红色边框,黄色字体,绿色背景。这类的组合表明我们可以对css做进一步的抽象。 这在单纯的HTML+CSS里面是不可能办到的。 |
好吧,虽然我说了不可能办到,但是也不是没有办法,只是有点2x罢了。诺,你可以复制粘贴嘛,这TM虽然根本不是个解决方案,但是也能得到你想要的样式。或者你可以像网格框架(blech!)一样重复使用没有语义的类名。最后,你可以做个“倒置样式”(inverted-style):把所有样式的优先级看做最高,其他的选择器都是从属。这个需要解释下。
|
层叠 对于层叠问题LESS和SASS提出了一种很好的解决方案,但是有一定的局限性。层叠是复杂性中最基本的一个问题。对于一个特定元素的特定的属性,有很多地方的值是需要设定的。然而确定这些所有地方的优先权的规则是很复杂的。 |
一个元素的最终CSS属性值是由以下因素决定的:
|
内容和样式的分离听起来像圣杯一样响亮! 通过使用嵌套的LESS规则和子选择器,我们能够避免大多数的层叠带来的痛。联合其他的一些技巧,我们能够将我们的样式混合到一块(或者是混合中嵌套混合),并将这些样式和通过模仿html结构的嵌套规则绑定到一块。 这是完美的,最终的解决方案吗?不一定! |
将来 也有其他一些尝试解决层叠问题的方法,LESS和Sass被用来作为css的父集,这就意味着你可用的css文件就自动的成为LESS文件,同时也意味着你一开始就得用LESS编译器。 在这种情况下,LESS将会同事拥有所有css没有解决的问题,我建议在下一步可以尝试采用css子集并加以实践,同时,也非常希望听到大家的意见! |
是的,嵌套规则确实可以处理层叠问题,但是也有其他关于层叠的问题。样式的混合不能真的帮你解决盒模型,再多的变量和算法也不能让两个DIV的宽度相同。 接下来,我将一个一个的解决这些问题。 |
有的时候,你可能会想用层叠,例如,你想要设置整个文档的字体,所以, 你设置 body{ font-family:'Comic Sans';},0K,间接的利用font-famiy属性的继承性便将整个文档的字体搞定了。事实上,如果你想每个标签都有同样的属性,可以这样写:* {font-family:'Comic Sans';},其实这和css reset 有异曲同工之妙,都是为样式设置默认样式 。
|
常见错误 我把他们叫做常见错误是因为找不到更好的词来表达了,但实在是他们存在于CSS中。 盒子模式 盒子模式的引入可以使我们避免犯一些简单错误。 其中一个错误是发生在你定义左间距而不是右间距的时候。在这种情况下,右间距该怎么定义呢?级联。 |
结论CSS从未完全实现样式与内容的分离。LESS(和Sass)终于能使这种分离实现。而且,使用LESS,我们可以开始磨圆CSS中尖锐的边角部份。但是,我们应该去寻找CSS的一个子集并用mixins替换有问题的CSS属性,而不是将LESS做为CSS的超集使用。该子集可以用一个linter工具强制执行。 这些建议是一个很好的开始,但仍有很长的路要走。 |
后记最后我想提一个关于CSS层叠的反思,但在上文中没有找到一个合适的地方,主要因为它不是一个问题而只是个不便。我经常疑惑为什么在CSS中,元素样式(定义在HTML标签的样式属性中)的优先级高于所有其他样式。同样,为什么在HTML(style标签)中定义的样式优先于那些通过连接引入的外部样式?我认为应该是完全相反的才更有意义。 HTML页面可以为其元素定义默认样式,这应该是在页面中指定并用外部样式表进行覆盖。
|
学习笔记
主要内容包括html,css,html5,css3,JavaScript,正则表达式,函数,BOM,DOM,jQuery,AJAX,vue等等
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
HTML/CSS
**HTML:**HTML基本结构,标签属性,事件属性,文本标签,多媒体标签,列表 / 表格 / 表单标签,其他语义化标签,网页结构,模块划分
**CSS:**CSS代码语法,CSS 放置位置,CSS的继承,选择器的种类/优先级,背景样式,字体样式,文本属性,基本样式,样式重置,盒模型样式,浮动float,定位position,浏览器默认样式
HTML5 /CSS3
**HTML5:**HTML5 的优势,HTML5 废弃元素,HTML5 新增元素,HTML5 表单相关元素和属性
**CSS3:**CSS3 新增选择器,CSS3 新增属性,新增变形动画属性,3D变形属性,CSS3 的过渡属性,CSS3 的动画属性,CSS3 新增多列属性,CSS3新增单位,弹性盒模型
JavaScript
**JavaScript:**JavaScript基础,JavaScript数据类型,算术运算,强制转换,赋值运算,关系运算,逻辑运算,三元运算,分支循环,switch,while,do-while,for,break,continue,数组,数组方法,二维数组,字符串
,分支循环,switch,while,do-while,for,break,continue,数组,数组方法,二维数组,字符串
[外链图片转存中…(img-3rr65Fys-1715419385244)]