![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
我的CSS世界
闲人王昱珩
不忘初心,就不错了
展开
-
关于左右布局,一边高度不定,另一边和不定高度等高的CSS布局
百度上大部分都说设置负padding和负margin值来解决这个问题,事实上这个方法书上就能查到,而且是比较简单的方法,我这里提供另外一种百度不到的方法以及一种更简易的方法,第一种方法利用absolute的垂直文档流自适应属性。想了解absolute的水平垂直文档流自适应的可以参考我CSS的文章,大概是讲absolute那几篇。下面来看解题思路,看下图:图中的左边是一张图,右边是一段固定的文字,为什么固定的文字不定高呐?因为手机屏幕分辨率的问题,固定的文字也可能不定高。现在我们要让左边的图片高度等于原创 2020-06-02 10:47:25 · 3687 阅读 · 1 评论 -
CSS进阶(13)—— position:absolute如此高深,我当真不懂(中)
在上文中,我们探讨了绝对定位的包含块以及“无依赖绝对定位”的特性,本章我们来聊聊absolute的流体特性以及那些和absolute关系甚好的CSS属性。1.absolute的流体特性 在前面一文中,我们测试了很多“无依赖绝对定位”的特殊表现,事实上在平时开发的时候我们使用absolute都用的都是他的“绝对定位”特性,这也是absolute被设计出来的本职工作。为了做好自己的本职工...原创 2018-12-10 13:52:20 · 27011 阅读 · 4 评论 -
CSS进阶(14)—— position:absolute如此高深,我当真不懂(下)
上章我们聊了和absolute的流体特性以及和absolute搭配使用的CSS属性,本章我们就来聊一聊position家族的另外两大成员——relative和fixed。 1.relative的定位(不推荐使用) 理论上relative/absolute/fixed都能对absolute的"包裹性"以及"定位"产生限制,但只有relative能使得元素保持在正常的文档流中,因此我...原创 2018-12-17 18:12:17 · 2252 阅读 · 0 评论 -
CSS进阶(17)—— CSS中的文本处理(上)
CSS能够在众多的布局标准中脱颖而出的制胜手段就是其强大的文本处理能力,比如最"简单"的盒子边缘文字即将超出就自动换行的能力在CSS流的概念里几乎是天生的,并逐渐成为了行业内的“常规认知”,然而同时代的SVG标准要想让文字换行,还需要你手动处理一下,对于计算机来说,没有什么是与生俱来的,CSS在图文布局方面所定制的许多标准在现在看来其实是非常“人性化”的,本章我们就来深入探索一下CSS的文本处...原创 2019-01-04 15:21:59 · 851 阅读 · 0 评论 -
CSS进阶(19)—— 详解display:none和visibility: hidden的区别
本章的主要内容是利用CSS控制元素的“显隐”,说道显隐,之前其实已经提供了一些非常规的CSS方法,如clip,z-index,opacity等,本章我们来深入探究一下display:none和visibility: hidden折两个属性。1.display与元素的显隐 对于一个display计算值是none的元素而言,该元素及其后代元素全部都被隐藏(请记住这个概念,等下对比下vis...原创 2019-01-10 14:02:46 · 2978 阅读 · 2 评论 -
CSS进阶(20)—— CSS中的装饰属性和用户体验属性
本章主要来聊聊CSS中一些杂七杂八的属性,个人会将里面的坑提取出来测试一遍加深下印象,比较符合常规的属性这里就不赘述了。1.与众不同的background-position属性 background-position属性支持数值,百分比,关键字。当然你也可以混用关键字和数值,如 background-position:right 40px bottom 20px; 表示...原创 2019-01-10 16:26:07 · 446 阅读 · 0 评论 -
CSS进阶(终章)—— CSS世界流向的掌控者direction和writing-mode
人往高处走,水往低处流,CSS世界亦是如此吗?至今为止,我们讨论的CSS似乎一直遵循不知从什么时候就印在脑子里的“从左往右,从上往下”原则。这可能和我们日常的读写顺序相关,我们看文章的时候习惯从左往右,从上往下进行阅读。然而CSS世界的流向并不是固定的,只需要几条声明,就可以改变CSS世界的水平垂直流向。1.改变水平流向的direction direction属性的兼容性非常好却鲜有...原创 2019-01-11 10:05:36 · 701 阅读 · 0 评论 -
CSS进阶(15)—— CSS世界的层叠规则(上)
说到CSS世界的层叠规则,很多人会想到z-index,翻译成中文,叫做"z轴的顺序"。事实上,抛开z-index只有在部分元素中(如定位元素)生效的条件,任何“元素”都无需借助z-index的支持会有自己的层叠规则,这个层叠顺序是基于z轴的。这里我们需要了解一个概念,尽管我们平时看到的电脑屏幕是“二维”的平面,但事实上CSS世界的概念是“三维”的,他和我们人所在的世界一样,经过任意一点可以有三...原创 2019-01-02 14:17:27 · 1192 阅读 · 0 评论 -
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 · 516 阅读 · 0 评论 -
CSS进阶(18)—— CSS中的文本处理(下)
CSS有很多属性专门用来对文本进行控制,由于这些属性的作用机制往往是基于内联盒模型的,因此对于内联块状元素也是有效果的,如我们最常用的text-align:center可以让内联元素水平居中。本章我们就来深入探索一下CSS中的文本控制属性。1.text-indent负值的妙用 text-indent指对文本首行的缩进控制,设计初衷就是为了实现段落文本的首行缩进2em的效果。但是这种缩...原创 2019-01-09 18:15:35 · 783 阅读 · 0 评论 -
CSS进阶(12)—— position:absolute如此高深,我当真不懂(上)
之前在探讨float属性的时候就已经提到了position:absolute的概念,绝对定位和浮动在很多方面都具有相似性,包括“块状化”,“包裹性”,“破坏性”等等,在理论层面上两者是一对兄弟关系。然而在实际场景中,由于绝对定位的“破坏性”通常比float的要强,因此会有人觉得绝对定位的元素似乎跟普通的流体元素完全玩不到一块去,事实上,除了众所周知的需要依托最近的定位祖先节点进行定位,绝对定位...原创 2018-12-03 19:30:34 · 5001 阅读 · 1 评论 -
CSS进阶(11)—— overflow属性详解,利用CSS实现锚点定位
本章延续上一章BFC的内容深入探索BFC的最佳结界——overflow在其本职工作上的表现。 1.overflow的裁剪界线——border-box overflow属性用于指定块容器元素的内容溢出时的表现方式——滚动,裁剪,自适应。“BFC的最佳结界”只是其衍生出来的特性,“裁剪”才是其本职工作。在使用overflow做裁剪工作的时候需要注意裁剪的边界时border box的内...原创 2018-12-01 15:40:51 · 5948 阅读 · 0 评论 -
CSS进阶(2)—— width,height如此高深,难道你真懂得
本节内容主要针对《CSS world》第三章——流、元素与基本尺寸的内容进行了一些提取与概括。 不能否认的是《CSS world》是一本非常好的书,但就看完这一章的感受而言,ZXX还不足以被称之为一个非常好的作者(纯属个人观点)。作者想通过不断地抛出问题,以及给出相应解决方案的方式,引导式的带领读者进入CSS的世界。然而CSS世界每个“个体”之间的关联性过于强烈的特性导致很难单独的去讲某...原创 2018-10-25 15:25:49 · 4280 阅读 · 2 评论 -
CSS进阶(5)—— 深入理解margin
盒尺寸中padding负责内边距,一般情况下(抛开上一章的诡异现象)不会给使用者带来太多的麻烦,因此作者称之为温和的padding,而margin则有些激进,虽说负责外边距,但有时候还能做一些"内边距"的事情(负边距),还自带了些特殊属性(如叠压),本文会通过实例深入探究margin负边距的使用以及叠压问题的产生和计算方式。依旧先放上内容摘要,请按需观看。1.margin负边距的正确打开方...原创 2018-11-20 17:02:39 · 2273 阅读 · 0 评论 -
CSS进阶(6)—— 浅尝盒模型中最友好的border
盒模型四大家族,content,padding,margin,没一个省心的,终于遇到了最友好的border属性。border的友好从名字就可以看出来,设计者设计此属性的初衷就是给元素弄个"边框"。在空间计算上也没那么多的破事儿,是多少,就是多少。和其他三兄弟不同,border连百分比值计算的事儿都省了,这或许跟边框的粗细与元素大小没有必然联系有关,比如一个长宽200的盒子,和一个长宽400的盒...原创 2018-11-22 09:55:02 · 451 阅读 · 1 评论 -
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 · 1127 阅读 · 0 评论 -
CSS进阶(4)—— 温和padding中的诡异CSS现象
盒模型的四大家族,原以为content部分比较复杂,单独写了一章,但在看padding部分的时候又遇到一个非常诡异的CSS现象,经过不断测试,终于得到一个比较接近于“真相”的解释,在测试这个诡异现象之前,先将padding的一些特性简单介绍一下,最后再来进行这个测试,本章内容如下小标题所示,请按需查看。 1.padding与块元素的尺寸2.padding与内联元素的尺寸3.pa...原创 2018-11-19 19:12:22 · 918 阅读 · 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 · 689 阅读 · 3 评论 -
CSS进阶(8)—— 内联元素的掌管者line-height和vertical-align(下)
上一章主要讲了line-height相关的知识,本章就来聊聊同样无处不在的vertical-align。vertical-align和line-height一样,都会影响元素在与水平流垂直方向上的表现,因此了解这两个属性,对于我们控制图文在垂直方向上的表现有很大的帮助。这里我用了"帮助",而不是必要,有人告诉我这本书不用一个字一个字看,现在看来确实如此,《CSS world》在某种程度上已经完...原创 2018-11-26 14:44:55 · 626 阅读 · 0 评论 -
CSS进阶(9)—— 那些年骗过你的float和“清浮动”
如果你被这个标题骗进来,那恭喜你,你获得了一个重新认识float的机会,这句话不仅是我想对前端程序猿说的,也是我想对自己说的。在使用flex布局之前,float一度是我最最喜欢用的布局方式,在没有接触CSS world之前,我甚至认为float才是最符合"流"特质的属性,我自己将float属性定义成CSS的“果冻属性”,可能是因为float元素会像一颗果冻一样在图文间滑来滑去。事实上,我们都知...原创 2018-11-29 16:36:55 · 824 阅读 · 1 评论 -
CSS进阶(10)—— 深入理解BFC结界
本章继续来探讨CSS世界的流破坏和流保护,延续的是上一章float的内容,在上一章中我们已经知道了clear属性并不是真正的清除浮动,本章将继续深入探索,引入BFC结界的概念。如果对浮动和清浮动属性还不太了解的同学强烈推荐先观看上一章的内容——那些年骗过你的float和“清浮动”。下面正式开始本章的内容。 1.CSS的结界——BFC BFC是block formatting co...原创 2018-11-30 15:36:46 · 694 阅读 · 0 评论 -
CSS进阶(1)—— 重新认识CSS
今天开始,又要开一个系列的坑——《CSS世界》。 原本我想给这个系列命名为CSS世界的,但想到这实在有些“侵权”,或者说,这有意无意的蹭了原著的热度,同时我也不想起一个很有噱头的名字来吸引别人的注意力,如你不知道的CSS之类的,最终我选择一个实在普通不过的——“CSS进阶”来给这个系列命名,告诫自己戒骄戒躁,潜心于技术,而非名利。在写这个系列之前还有一个比较纠结的点在于我究竟是以“原创”...原创 2018-09-29 09:06:46 · 1322 阅读 · 1 评论