W3CPlus

Latest articles

CSS如何实现交叉布局

随着Web技术不断的革新,以往很多依赖于图片展示的布局能较轻易地通过代码来实现,而且现在的布局也不仅仅局限于平面的布局。实际上也有一些伪3D,甚至是3D的布局效果。前两天看到@Preethi分享的一个效果就是我们平时难于用代码实现的一个效果。就这样的效果放到今天来说,我们通过CSS可以实现,而且这样的一个效果是一个典型的效果,所以今天和大家一起来探讨这样的一个布局效果。刚才提到借助于Web的一些特性,我们可以实现伪3D的效果(看上去像上一个3D的布局)。这样的布局主要目的是为了增强一个立体的空间感。比如我们常见的层叠的效果,飘带等效果,如下图所示:还有一些效果类似于@Preethi提到的效果:这样的交叉效果就是我们今天要深入聊的一个效果。也就是说,我们今天的目标是要和大家一起实现@Preethi在《Weaving...

聊聊CSS中的圆

熟悉CSS的同学都知道,使用CSS可以绘制一些图形,在业内有很多这方面的案例,比如使用CSS绘制不同的纹理、CSS绘制Icons、使用一个div绘制不同的图形等等。而在Web的实际开发中也经常会碰到一些图形的运用,比如我们今天要聊的圆(比如圆形容器,圆形缩略图,圆形按钮)。使用CSS绘制圆还是会碰到一些棘手的问题。如果你对这方面感兴趣的话,那么接着阅读下面的内容,你一定会有所收获。CSS绘制圆的技术方案在Web中,我们可以使用CSS和SVG等技术手段来绘制圆,大家常见的技术方案主要有:CSS的border-radiusCSS的radial-gradientCSS的clip-path的circle()CSS的shape-outside的circle()SVG的<circle>上面这些技术方案都可以绘制出圆形,每种技术都有其优缺点。接下来我们来看看这些技术是如何绘制出圆,能运用于什么样的场景等。CSS的border-radius在CSS中绘制圆最常见的技术方案应该是border-radius。不过使用border-radius绘制圆有一个前提条件,那就是容器的width和height必须相等,而且半径的值是其width(或he...

React中列表渲染

在上一节中,我们学习了如何在React中实现条件渲染。今天我们一起来学习如何在React中实现列表渲染(在Vue中我们可以使用v-for指令)。因为在实际开发中我们时常要处理一些列表的渲染,比如在《列表渲染和Vue的v-for指令》一文中示例:上图中我们有多个列表的渲染,比如Tweets列表,关注用户列表等。在React中,处理列表渲染和处理条件渲染类似,需要借助JavaScript的一些原生能力来辅助我们实现列表渲染。如果你对这方面知识感兴趣的话,欢迎继续往下阅读。回顾JavaScript中的循环在开始学习React列表渲染之前,我们很有必要先简单的回顾JavaScript中有关于循环相关的知识。原因很简单: React中的列表渲染用的就是JavaScript原生的循环知识。简单地说,循环就是重复做一件事件。在MDN中有一张图形象的阐述了这个概念:上图是位农夫为他的家庭准备一周的食物计划。为了完成这个计划,他或许需要执行一个循环。一个循环通常会需要一些特定的条件:一个开始条件:这是循环的起点(比如上图中的“没有食材了”)。用到代码中,它被初始化为一个特定的值(常称初始条件)一个结束条件:这是循环的结束点(比如上图中的“有足够的食材...

React中的条件渲染

在Web中时常需要根据不同的状态来渲染对应状态下的部分内容。在React中也同样有这样的运用场景,只不过在React中可以创建不同的组件来封装各种所需要的行为,然后根据不同状态来渲染对应的内容。如果你熟悉Vue的话,知道他有一个v-if指令可以轻易帮助你根据不同的状态(条件)来渲染所需的组件(或UI),但在React没有这样的指令。虽然在React中没有v-if这样的指令,但它可以使用你熟悉的JavaScript条件语句(比如if...else或switch)。接下来,我们就一起来看看如何在React中实现条件渲染。JavaScript中的条件语句在React中我们一般使用JSX来构建我们所需要的组件模板。通过《深入了解JSX》和《如何编写出优雅的JSX》的学习我们知道JSX简单地说是HTML和JavaScript的结合物,以及我们如何构建出更好的JSX模板。在JSX中我们可以像使用JavaScript的if、switch或条件运算符一样。也就是说,React中的条件渲染和JavaScript中的一样,使用JavaScript运算符if、switch或条件运算符去创建元素来表现当前的状态,然后根据不同的状态来更新UI。在学习React...

这些用于布局的新属性能用吗?

这个话题是@Rachel Andrew于2019年9月在英国爱丁堡举办的Finch front的一场演讲,其原标题是Does it work? Using the new CSS Layout,我在这里将其译为这些用于布局的新属性能用吗?。这个话题中的内容非常的有意思,其中有些内容在小站上也有过相应的介绍。今天看了该PPT,觉得有些内容还是非常的有意思,值得和大家分享。分享的主题该主题的PPT比较长,总共有111页面,涉及到有关于布局多个新的知识点,如果你不想花时间阅读后面的内容,可以点击下图直接阅读PPT:在过去,我们所接触到的Web布局都是一些最基本的布局,时至今日,Web布局系统变得更为复杂,但了变得更为灵活,而且这些汇总到一起可以称得上是一套布局的系统,该系统变得复杂而又灵活。简单地说,她将以Grid和Flexbox系统为主线,并由一系列CSS的概念和避属性来进行扩展,让Web布局更为灵活和强大。而这些概念也有利于我们更好的理解Web上怎么来更好的实现所需要的布局。@Rachel...

Web布局:浮动

把浮动放到今天来聊,可能很多小伙伴会觉得没有任何意义。会说“CSS都发展到这种程度了,Web的布局还会有谁用浮动呢”?那么真的是如此吗?浮动真的要退出CSS的舞台成为历史吗?我的答案是不可能的。不管CSS怎么发展,浮动都还有其存在的意义和作用,而且在一些场景中是离开不浮动的,最起码近几年之内是不可能的。至于为什么,请继续往下阅读。浮动的介绍不知道大家是否和我有同样的一个感觉,每当拿起一篇杂志文章,总能发现左边或右边有图片,文字流畅地围着图片,这就是打印世界中看到的浮动:在Web的世界中,CSS的float设计初衷也是用来处理文本围绕图片排版的,就像在杂志布局中一样。碍于当时Web布局可用方案的局限性,聪明的CSSer才把float用于Web的布局当中,这一用就用了很多年,直到Flexbox的成熟才慢慢的看不到float用于Web布局的影子。但这并不能表明,浮动就将退出历史的舞台。因为在Web中处理文本围绕图片的排版始终是离不开浮动的。当然,如果你愿意的话,在什么时候你都还可以使用浮动来完成Web的布局,只不过在某些场景中使用浮动布局会有一定的缺陷性。什么是浮动既然是要聊浮动,那么我们从她的定义开如聊起吧。W3C是这样对浮动定义的:...

Web布局:display属性

经过CSS盒模型和视觉格式化模型两个章节中的学习,我们有了一个清晰的概念。即在CSS中插何一个元素都是一个盒子,甚至是文本节点也是一个盒子(匿名盒子);都有自己的视觉格式化(不同的盒子)。而其中CSS的display属性又可以显式的修改每个盒子的视觉格式化模型,比如说从行内级盒子变成块级盒子。那在这一章节中,我们就来一起探讨CSS的display属性,该属性也是学习CSS不可或缺的属性之一。display的基本介绍CSS的display属性在W3C规范中是一个独立的模块,即CSS Display Module Level 3。该模块描述如何从文档树(DOM树)生成CSS树(CSSOM树),并定义了如何使用display属性来控制CSSOM。比如我们一个类似下面这样的一个HTML文档:<!DOCTYPE...

Web布局:Web布局发展历程

Web自1989到今年刚好走过30年历程。30年来Web也发生了翻天覆地的变化,从事Web开发工作也衍生出多种工作岗位,而我们做为Web前端开发者的其中一员,更应该感谢Web给我们带来的机遇和未来。自从今天开始,我们来一起探讨Web开发中其中一小部分相关的技能(或者说知识),即Web布局。希望接下来的这个专栏对大家在今后的工作和学习上都会有所帮助。Web演化历程在互联网的演化过程中,Web网站(网页制作)是Web 1.0时代的产物,那时候的网站主要是用来承载内容信息,主要以静态内容为主。整个网站下来只有文字和图片等,用户使用网站的行为也主要是以浏览查看内容为主。随着网页从学术机构走向公众社会,网页承载的功能便超出了学术范围而变得愈加丰富,因此,早期的网页的局限性也逐渐显露出来。2005年以后,互联网进入了Web...

Web布局: CSS 盒模型

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

Web布局:视觉格式化模型

CSS视觉格式化模型(英文称之Visual Formatting Model),是CSS 2.2规范中的第九部分。该模型主要是用来处理和在视觉媒体上显示文档时使用的计算规则。仅从这一句来来描述,估计很多同学都会感到困惑,视觉格式化模型到底是什么鬼?大家先不用急着知道视觉格式化模型是什么,只需要知道它是CSS中很重要的一部分,如果理解了该部分所涉及到的知识点,将有助于你更好的理解和学习CSS,特别是布局。什么是视觉格式化模型在盒模型的一章中我们了解到,在CSS的世界中,任何一个元素都是一个盒子,它具有一个专业术语,即盒模型。而视觉格式化模型会根据CSS盒模型将文档中的元素转换为一个个盒子。看到这里,很多同学可能更会感到困惑,“任何元素都是一个盒子,视觉格式化模型将元素转换为盒子,那这盒子是不是都是一样的盒子呢”?...

Discover, share and read the best on the web

Subscribe to RSS Feeds, Blogs, Podcasts, Twitter searches, Facebook pages, even Email Newsletters! Get unfiltered news feeds or filter them to your liking.

Get Inoreader
Inoreader - Subscribe to RSS Feeds, Blogs, Podcasts, Twitter searches, Facebook pages, even Email Newsletters!