我的CSS世界
CSS如此高深,我当真不懂
闲人王昱珩
不忘初心,就不错了
展开
-
CSS进阶(16)—— CSS世界的层叠规则(下)
上一章我们主要了解了层叠上下文,层叠水平,CSS层叠领域的两大黄金法则等概念,本章我们讲继续深入探索CSS世界的层叠规则。1.深入理解层叠上下文 “层叠上下文”的元素有如下的一些特性:(1)默认层叠水平(z-index:auto)比普通元素要高(2)可以阻断元素的混合模式(CSS3混合模式mix-blend-mode/background-blend-mode简介)(3)...原创 2019-01-03 11:00:05 · 528 阅读 · 0 评论 -
CSS进阶(15)—— CSS世界的层叠规则(上)
说到CSS世界的层叠规则,很多人会想到z-index,翻译成中文,叫做"z轴的顺序"。事实上,抛开z-index只有在部分元素中(如定位元素)生效的条件,任何“元素”都无需借助z-index的支持会有自己的层叠规则,这个层叠顺序是基于z轴的。这里我们需要了解一个概念,尽管我们平时看到的电脑屏幕是“二维”的平面,但事实上CSS世界的概念是“三维”的,他和我们人所在的世界一样,经过任意一点可以有三...原创 2019-01-02 14:17:27 · 1202 阅读 · 0 评论 -
CSS进阶(14)—— position:absolute如此高深,我当真不懂(下)
上章我们聊了和absolute的流体特性以及和absolute搭配使用的CSS属性,本章我们就来聊一聊position家族的另外两大成员——relative和fixed。 1.relative的定位(不推荐使用) 理论上relative/absolute/fixed都能对absolute的"包裹性"以及"定位"产生限制,但只有relative能使得元素保持在正常的文档流中,因此我...原创 2018-12-17 18:12:17 · 2275 阅读 · 0 评论 -
CSS进阶(13)—— position:absolute如此高深,我当真不懂(中)
在上文中,我们探讨了绝对定位的包含块以及“无依赖绝对定位”的特性,本章我们来聊聊absolute的流体特性以及那些和absolute关系甚好的CSS属性。1.absolute的流体特性 在前面一文中,我们测试了很多“无依赖绝对定位”的特殊表现,事实上在平时开发的时候我们使用absolute都用的都是他的“绝对定位”特性,这也是absolute被设计出来的本职工作。为了做好自己的本职工...原创 2018-12-10 13:52:20 · 27082 阅读 · 4 评论 -
CSS进阶(12)—— position:absolute如此高深,我当真不懂(上)
之前在探讨float属性的时候就已经提到了position:absolute的概念,绝对定位和浮动在很多方面都具有相似性,包括“块状化”,“包裹性”,“破坏性”等等,在理论层面上两者是一对兄弟关系。然而在实际场景中,由于绝对定位的“破坏性”通常比float的要强,因此会有人觉得绝对定位的元素似乎跟普通的流体元素完全玩不到一块去,事实上,除了众所周知的需要依托最近的定位祖先节点进行定位,绝对定位...原创 2018-12-03 19:30:34 · 5070 阅读 · 1 评论 -
CSS进阶(11)—— overflow属性详解,利用CSS实现锚点定位
本章延续上一章BFC的内容深入探索BFC的最佳结界——overflow在其本职工作上的表现。 1.overflow的裁剪界线——border-box overflow属性用于指定块容器元素的内容溢出时的表现方式——滚动,裁剪,自适应。“BFC的最佳结界”只是其衍生出来的特性,“裁剪”才是其本职工作。在使用overflow做裁剪工作的时候需要注意裁剪的边界时border box的内...原创 2018-12-01 15:40:51 · 6671 阅读 · 0 评论 -
CSS进阶(10)—— 深入理解BFC结界
本章继续来探讨CSS世界的流破坏和流保护,延续的是上一章float的内容,在上一章中我们已经知道了clear属性并不是真正的清除浮动,本章将继续深入探索,引入BFC结界的概念。如果对浮动和清浮动属性还不太了解的同学强烈推荐先观看上一章的内容——那些年骗过你的float和“清浮动”。下面正式开始本章的内容。 1.CSS的结界——BFC BFC是block formatting co...原创 2018-11-30 15:36:46 · 710 阅读 · 0 评论 -
CSS进阶(9)—— 那些年骗过你的float和“清浮动”
如果你被这个标题骗进来,那恭喜你,你获得了一个重新认识float的机会,这句话不仅是我想对前端程序猿说的,也是我想对自己说的。在使用flex布局之前,float一度是我最最喜欢用的布局方式,在没有接触CSS world之前,我甚至认为float才是最符合"流"特质的属性,我自己将float属性定义成CSS的“果冻属性”,可能是因为float元素会像一颗果冻一样在图文间滑来滑去。事实上,我们都知...原创 2018-11-29 16:36:55 · 835 阅读 · 1 评论 -
CSS进阶(8)—— 内联元素的掌管者line-height和vertical-align(下)
上一章主要讲了line-height相关的知识,本章就来聊聊同样无处不在的vertical-align。vertical-align和line-height一样,都会影响元素在与水平流垂直方向上的表现,因此了解这两个属性,对于我们控制图文在垂直方向上的表现有很大的帮助。这里我用了"帮助",而不是必要,有人告诉我这本书不用一个字一个字看,现在看来确实如此,《CSS world》在某种程度上已经完...原创 2018-11-26 14:44:55 · 645 阅读 · 0 评论 -
CSS进阶(7)—— 内联元素的掌管者line-height和vertical-align(上)
在CSS世界中,块级元素一般负责结构,而内联元素则负责文字内容,而CSS设计的初衷就是面向图文混合排版,因此内联元素在CSS世界中有着非常重要的地位。由于本章内容较多,因此特分为上下两章,依旧可以根据兴趣按小标题获取你所需要的信息。1.字母x与CSS世界的基线2.内联元素中真实存在的“行框盒子”3.内联元素的基石line-height承担的责任4.line-height在块级元...原创 2018-11-23 13:24:35 · 701 阅读 · 3 评论 -
CSS进阶(6)—— 浅尝盒模型中最友好的border
盒模型四大家族,content,padding,margin,没一个省心的,终于遇到了最友好的border属性。border的友好从名字就可以看出来,设计者设计此属性的初衷就是给元素弄个"边框"。在空间计算上也没那么多的破事儿,是多少,就是多少。和其他三兄弟不同,border连百分比值计算的事儿都省了,这或许跟边框的粗细与元素大小没有必然联系有关,比如一个长宽200的盒子,和一个长宽400的盒...原创 2018-11-22 09:55:02 · 466 阅读 · 1 评论 -
CSS进阶(5)—— 深入理解margin
盒尺寸中padding负责内边距,一般情况下(抛开上一章的诡异现象)不会给使用者带来太多的麻烦,因此作者称之为温和的padding,而margin则有些激进,虽说负责外边距,但有时候还能做一些"内边距"的事情(负边距),还自带了些特殊属性(如叠压),本文会通过实例深入探究margin负边距的使用以及叠压问题的产生和计算方式。依旧先放上内容摘要,请按需观看。1.margin负边距的正确打开方...原创 2018-11-20 17:02:39 · 2348 阅读 · 0 评论 -
CSS进阶(4)—— 温和padding中的诡异CSS现象
盒模型的四大家族,原以为content部分比较复杂,单独写了一章,但在看padding部分的时候又遇到一个非常诡异的CSS现象,经过不断测试,终于得到一个比较接近于“真相”的解释,在测试这个诡异现象之前,先将padding的一些特性简单介绍一下,最后再来进行这个测试,本章内容如下小标题所示,请按需查看。 1.padding与块元素的尺寸2.padding与内联元素的尺寸3.pa...原创 2018-11-19 19:12:22 · 948 阅读 · 0 评论 -
CSS进阶(3)——深入理解content
盒尺寸由内到外为:content,padding,border,margin。 本章对CSS world中第四章4.1节的内容做了一些总结和舍弃,从实用的角度深入探讨content属性。依旧是将小标题提前,请按照兴趣阅读1.什么是替换元素2.替换元素的尺寸计算规则3.替换元素和content属性的关系4.利用content生成辅助信息5.content attr属性值...原创 2018-11-19 15:10:06 · 1145 阅读 · 0 评论 -
CSS进阶(2)—— width,height如此高深,难道你真懂得
本节内容主要针对《CSS world》第三章——流、元素与基本尺寸的内容进行了一些提取与概括。 不能否认的是《CSS world》是一本非常好的书,但就看完这一章的感受而言,ZXX还不足以被称之为一个非常好的作者(纯属个人观点)。作者想通过不断地抛出问题,以及给出相应解决方案的方式,引导式的带领读者进入CSS的世界。然而CSS世界每个“个体”之间的关联性过于强烈的特性导致很难单独的去讲某...原创 2018-10-25 15:25:49 · 4300 阅读 · 2 评论 -
CSS进阶(1)—— 重新认识CSS
今天开始,又要开一个系列的坑——《CSS世界》。 原本我想给这个系列命名为CSS世界的,但想到这实在有些“侵权”,或者说,这有意无意的蹭了原著的热度,同时我也不想起一个很有噱头的名字来吸引别人的注意力,如你不知道的CSS之类的,最终我选择一个实在普通不过的——“CSS进阶”来给这个系列命名,告诫自己戒骄戒躁,潜心于技术,而非名利。在写这个系列之前还有一个比较纠结的点在于我究竟是以“原创”...原创 2018-09-29 09:06:46 · 1332 阅读 · 1 评论