会员专栏

聊聊CSS中的层叠相关概念

最近在纠结程序语言和设计语言中的一些概念,整到层叠上下文和图层相关的事情,然后发现自己对于CSS中的层叠相关的知识并没有自己想象中那样理解的透彻。因此花了一段时间重新梳理了一下相关的知识。如果想要理解清楚CSS中的层叠相关的知识点,我们就很有必要先了解一些重要的概念:文档流(Normal Flow)格式化上下文(Formatting Context)层叠上下文(Stacking Context)层叠水平(Stacking Level)层叠顺序(Stacking Order)

Icon和文本对齐方式的探索

在Web中很多场景中都会使用到Icon,那么就会面临Icon和文本对齐的处理。而这个对齐效果的处理又不是一件轻易的事情,特别是面又众多不同移动终端的情形之下。那么今天这篇文章就来和大家一起探讨一下这方面的话题。

五个最新的CSS特性以及如何使用它们

虽然CSS简单,但CSS是一门非常有意思的语言,CSS每年都有变化,而且都有不同的博主都在不同的时间段总结一些CSS的新特性。虽然这些新特性无法立刻得到众多浏览器的支持,但总是随着时间的发展,这些特性都会得到浏览器的支持。哪怕未得到支持,也有一些方法让浏览器支持,比如最为出外的cssnext,就可以让很多未来的CSS特性就立马使用,并且不用花太多时间来考虑浏览器的兼容性。今天这篇文章,@Daniel Crisp就当下的CSS的新特性做了一个简单的总结 —— 五个最新的CSS特性(事实上这些特性,对我而言并不是新特性),并且用示例告诉大家怎么使用这些特性。那么接下来,咱们看看这五个新特性是什么?以及怎么使用。如果您感兴趣,欢迎继续往下阅读。

DOM系列:DOM事件模型

通过上一节的学习,对DOM事件有了一个简单的了解。但这只是学习DOM事件相关知识的起步点。在JavaScript中常见的事件模型有:DOM基本事件模型DOM Level 2事件模型IE事件模型DOM Level 3事件模型自定义事件模型。每种事件模型都有其自己独具的特性。只有了解了DOM事件模型之后,才可以为后续的DOM事件打下一个基础。今天来了解一下DOM事件的模型。

使用CSS Grid的九大误区

如果你和我一样一直在关注CSS Grid布局的话,你应该知道@Rachel Andrew和@Jen Simmons都是CSS Grid 布局的布道师。两位女士一直都在推进Grid的特性和完善相关的特性。这几天看到@Jen Simmons录了一个视频,聊了一下CSS Grid布局相关的误区。

图解CSS Flexbox布局

@js_tut的新书《CSS Visual Dictionary》里面的插画非常有意思。他在Medium上把盒模型FlexboxGrid三个部分放了一些出来。我觉得他提供的插画非常形象的阐述了这几个部分的知识点。今天把 Flexbox部分的插图直接拿来使用了,通过这些插图再次向大家阐述CSS Flexbox相关的知识。

DOM系列:DOM事件简介

如果你浏览过早期的Web网站,或许你已经发现了这些Web站点除了能提供查阅信息之外,无其他作用可言。这样的Web站点其实是非常无聊的。那是因为Web站点没有提供人与机器的互动行为。激不起用户的兴趣。造成这种现象的原因很简单。Web应用程序或者Web站点存应该是为了响应用户对它们所做的事情。好比,我们每天一大早起床时就想好了一天要做些什么,这样每天都有动力,也变得充实。那么在Web应用或Web网站上其实也是类似的,Web网站之后做的事情很大程度上取决于你告诉他们做什么。这样一来,Web网站会变得有趣的多。

DOM系列:DOM操作小结

DOM是JavaScript的基础之一,自己学习DOM的操作也有一段时间了,到今天为止DOM系列的教程刚好有十篇了,这部分都主要是围绕DOM操作的笔记。主要围绕DOM元素的增、删、改、查,DOM节点的操作以及元素尺寸、位置获取和设置等知识。今天这篇文章主要是小结一下。希望对一些像我这样的初学者有所帮助。

DOM系列:视窗、设备、滚动条和文档尺寸

在上一节中,学习了JavaScript如何获取和设置元素位置和尺寸相关的方法,另外在JavaScript的学习笔记当中也学习了视窗宽度、位置与滚动高度相关的JavaScript方法与属性。今天继续来学习DOM中相关的知识,这篇文章将学习视窗、设备、滚动条和文档等相关的尺寸。其实在前两篇文章中都有涉及这些知识,为了让DOM系列相关的知识更完善,所以再花点时间整理一些这方面的技术点,加强印象。

DOM系列:获取元素位置和尺寸

对于每一位Web开发的同学而言,在CSS的世界当中,每一个元素都是一个盒子,都有描述盒子大小和位置的相关属性。比如CSS的盒模型相关的属性和position相关属性。不过今天我们学习和聊的不是CSS的世界,而是来学习和聊JavaScript中怎么获取元素尺寸和位置。

页面

返回顶部