会员专栏

Web布局:浮动

把浮动放到今天来聊,可能很多小伙伴会觉得没有任何意义。会说“CSS都发展到这种程度了,Web的布局还会有谁用浮动呢”?那么真的是如此吗?浮动真的要退出CSS的舞台成为历史吗?我的答案是不可能的。不管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,特别是布局。

React中的事件

在大多的Web页面或Web应用程序中,构建UI仅仅是其中小小的一部分,其中有些UI是纯静态的,但有些UI是会随着用户的操作带来相应变化的。比如,用户通过鼠标点击,键盘按下,视窗大小调整或一系列其他的手势和交互来触发。而这些我们往往称之为事件。在Web中处理事件都是交给JavaScript来完成,同样的,在React中也有相应的事件。在这一节开始,我们就来学习React中的事件。你可能在DOM的世界中对事件的使用有一定的了解。如果没有,也不用担心,我们在开启探讨React的事件之前会对JavaScript中的事件做一个初步的了解。

初探React中函数组件和类组件的差异

自从React Hooks的出来,社区讨论Hooks的越来越多。这并不是说React Hooks就优于类组件,但是使用Hooks来构建组件时有一个巨大的可用性提升,特别是因为这些函数组件可以通过React Hooks中的钩子函数来访问状态和生命周期。今天我们就来一起聊聊如何将React的类组件转换为函数组件,用React Hooks中的钩子函数替换类组件中的setState和生命周期方法,比如componentWillMountcomponentWillReceiveProps等。因此,让我们首先使用状态和生命周期方法构建一个基于类的React组件。也是大家最为熟悉的ToDoList组件。

React中创建组件的方式

学习React也有一段时间了,虽然天天都在围绕着组件打转转,但在React中怎么构建组件呢并没有去深入的了解。事实上呢?在React中的组件还是有些复杂的,从概念上来说就不简单。比如说,类组件函数组件无状态组件高阶组件等。另外创建组件的方式也有所不同,比如最早使用React.createClass来创建组件,有了ES6之后使用extends React.Component(借助ES6的class特性)创建组件,而今天又流行使用函数(Hooks)方式来创建组件。那么他们之间如何创建组件,又有何区别呢?在这篇文章中我们就先来学习和探讨在React中如何创建组件。

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

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

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

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

页面

返回顶部