CSS

Web布局:display属性

经过CSS盒模型视觉格式化模型两个章节中的学习,我们有了一个清晰的概念。即在CSS中插何一个元素都是一个盒子,甚至是文本节点也是一个盒子(匿名盒子);都有自己的视觉格式化(不同的盒子)。而其中CSS的display属性又可以显式的修改每个盒子的视觉格式化模型,比如说从行内级盒子变成块级盒子。那在这一章节中,我们就来一起探讨CSS的display属性,该属性也是学习CSS不可或缺的属性之一。

Web布局:Web布局发展历程

Web自1989到今年刚好走过30年历程。30年来Web也发生了翻天覆地的变化,从事Web开发工作也衍生出多种工作岗位,而我们做为Web前端开发者的其中一员,更应该感谢Web给我们带来的机遇和未来。自从今天开始,我们来一起探讨Web开发中其中一小部分相关的技能(或者说知识),即Web布局。希望接下来的这个专栏对大家在今后的工作和学习上都会有所帮助。

Web布局: CSS 盒模型

在学习Web布局之前有一个非常重要的概念需要理解,这个概念就是盒模型。CSS盒模型是多个不同的CSS规则集合,定义了如何渲染Web页面。这一系列的不同的属性决定了HTML元素在页面上的位置。到目前为止,所有Web页面都只是一个接一个渲染的元素。可以说盒模型是我们定制默认布局方案的工具包。作为Web开发人员,大部分工作是将应用CSS盒模型中的规则将设计模型转换为Web页面(简单点说,就是UI还原)。接下来要介绍的CSS盒模型又被视为UI还原的重中之重,因为它定义了盒子的单独行为。特别是在以后的章节中,我们学习的各种布局都将会围绕着HTML的结构和CSS的盒模型一起来展开。

Web布局:视觉格式化模型

CSS视觉格式化模型(英文称之Visual Formatting Model),是CSS 2.2规范中的第九部分。该模型主要是用来处理和在视觉媒体上显示文档时使用的计算规则。仅从这一句来来描述,估计很多同学都会感到困惑,视觉格式化模型到底是什么鬼?大家先不用急着知道视觉格式化模型是什么,只需要知道它是CSS中很重要的一部分,如果理解了该部分所涉及到的知识点,将有助于你更好的理解和学习CSS,特别是布局。

如何使用CSS混合模式和SVG来动态更改产品图片的颜色

前两天在Codepen看到了@Kyle Wetton写的一个示例,使用CSS混合模式和SVG来改变沙发的颜色。非常有意思的一案例。这让我想起了在实际的一些业务场景中的运用,比如说一些美妆的应用中,就有类似的场景。不知道大家是否想深入的了解如何实现这样的效果?如果是,那么请继续往下阅读。

Web布局:CSS定位和层叠控制

在这一章节中我和大家将一起来探讨CSS中的另一个知识重点,即CSS的定位(position)和层叠控制(z-index。这两个属性都隶属于CSS Positioned Layout Module Level 3模块。当人们在接触布局的时候都比较倾向于使用定位的方式。因为定位的概念看起来易于掌握。使用定位来布局,表面上你确切的指定了一个元素所处的位置,它坐落在那里。可事实上,定位要比你看到要稍微复杂一点。对于很多CSS的新手,CSS定位和层叠控制还是有些东西会被绊倒,所以在它们成为你惯用技巧前你需要先掌握它们。

CSS Houdini:深入理解CSS自定义属性

这几天一直在折腾CSS自定义属性,在《图解CSS:CSS自定义属性》和《CSS 自定义属性在Web组件中的应用》都在聊CSS自定义属性。但这个CSS自定义属性和今天要聊和CSS的自定义属性还是有所不同的。他们隶属于两个不同的规范,前者是CSS Custom Properties for Cascading Variables Module Level 1,后者是CSS Properties and Values API Level 1。虽然都是W3C规范中的内容,但还是有较大差异的。而今天要和大家聊的是后者,即CSS Houdini中的CSS自定义属性。

图解CSS:CSS自定义属性

众所周之,CSS的维护一直是件不易的事情,特别是在构建大型Web站点或Web应用程序时,如果是多人协作的话难度更大。另外,由于CSS语言是一种声明式语言,而且不像其他语言有变量、条件和逻辑等特性,一直生存在程序语言鄙视链的最底层。也因为这个原因,社区中有了各种CSS处理器语言,比如Sass、LESS和Stylus等。这些处理器语言引入了一些类似其他程序语言的特性,比如变量、运算符和逻辑运算等。虽然CSS处理器给编写和维护CSS带来了一些便利,但还是需要额外的编译。不过处理器中的变量着实为我们带来很大的优势,也正因为如此,社区开始将CSS处理器中的变量引入到原生CSS中,经过多年的推进和演变才有了今天的CSS自定义属性。

CSS 自定义属性在Web组件中的应用

今天我们不聊什么是CSS自定义属性,而把重点放在CSS自定义属性在组件中怎么使用,她又会给我们设计组件带来什么样的变化和相应的优势。在这篇文章中,我们主要会探讨CSS自定义属性为Web组件服务,以及怎么利用CSS自定义属性来维护组件。

React中编写CSS的姿势

在任何环境之下其实没有最佳,最有最适合,那么在React中编写CSS也是类似的。在React中有很多编写CSS的方式,在社区中讨论最多的应该是CSS In JS 和 CSS Modules。前段时间在《React中CSS Modules的使用》一文中探讨了在React中怎么使用CSS Modules来管理组件和项目的CSS。事实上,使用CSS Modules还是存有一定的缺陷。这篇文章将会和大家一起聊聊React中编写CSS的姿势,然后再会花一些篇幅来讨论CSS Modules编写CSS的最佳姿势。

页面

返回顶部