文章关键字 ‘布局’

小tips: 纯CSS显示JS/HTML等源代码行数

2018年02月1日,星期四

如图,纯CSS显示JS/HTML等源代码行数,希望实现的方法可以给大家带来更多的思路和灵感。

阅读全文…

基于CSS3 column多栏布局实现水平滑页翻页交互

2017年02月15日,星期三

column多栏布局和flex弹性布局基本上是同一时间段出现的,从兼容性来讲,column多栏布局一直以来更稳定更兼容,而flex弹性布局前前后后历经多个版本,直至现在有些移动设备支持依然不好,但是两者的命运却截然相反,column多栏布局鲜有人问津,而flex弹性布局则风生水起。面试的时候,就算面试者并未在实际项目中使用过flex弹性布局,也会时不时扯到这东西上来,好像不提flex布局就跟时代脱节一样,其实完全没有必要,每个CSS属性都有它的潜力和价值所在,挖掘其内在价值而不是单纯的被外在的那层表现困于庐山才是真正想要看到的。

而本文就是通过挖掘column多栏布局潜力实现了看上去很棘手的交互效果,这里特异分享给大家,希望能够对大家的学习有所帮助~

阅读全文…

CSS深入理解流体特性和BFC特性下多栏自适应布局

2015年02月12日,星期四


好久没写纯粹CSS相关知识的文章了,所谓新颖的CSS3技术之流占据了现在半壁江山。本文内容还是比较传统,立足基础,深入理解。希望可以帮助相关从业者有所成长。如题,本文着重分析流体特性下的自适应布局和BFC特性下的自适应布局,demo、截图以及源代码一个都不少,耐心看完,相信会有一番收获的。

阅读全文…

准确理解CSS clear:left/right的含义及实际用途

2014年06月9日,星期一

我们平时一般都使用clear:both清除浮动,貌似就干这一件事件。用得很开心,但似乎理解上懵懵懂懂,我其实也是,早年的时候,测试过CSS clear:left/right,虽知其作用(80%确定而已),但不知其机理。

有必要再次整理下,温故知新。可能很多同行都没有注意left/right值,或者可能理解上含糊,或者不知道其实际意义在何处。So, follow me…

阅读全文…

CSS3 Media Queries的些野史外传

2011年08月23日,星期二

本文是去年这个时候流产的草稿又起死回生的一篇文章。当初本来想详细讲述Media Queries的前前后后,祖宗八代,后发现被人捷足先得,不得已,流产了。今天在1周年之际,重拾此文,讲下CSS3 Media Queries的些野史外传。有demo,有源代码展示,总之,希望本文的起死回生之作能够对您的学习有所帮助。

阅读全文…

display:inline-block/text-align:justify下列表的两端对齐布局

2011年03月13日,星期日


本文可以说是本月的重磅文章之一,讲的是如何利用text-align:justify在display:inline-block列表布局基础上实现列表元素的两端对齐布局,分门别类,由浅入深,逐层深入,并有一些总结性的注意事项。一如既往,本文不仅提供丰富的截图示意,提供必要的源代码展示,及时雨般的demo页面,更上一层楼,还提供总结性的表格数据。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

CSS 相对|绝对(relative/absolute)定位系列(一)

2010年12月9日,星期四

本文是CSS 相对/绝对(relative/absolute)定位长篇系列的第一篇,大部分的内容被理论观点和题外话给占据了。本文主要内容就是分析了absolute与浮动之间的关系,一些典型的特性。还阐述了自己尽量不要使用absolute属性做普通DOM布局的观点。相对于本篇的文字量,图片啊代码啊以及demo相对少了写,但是,应该不会影响您的阅读与理解的。本文书写还是花了好些功夫的,力求准确表述自己观点的同时语言通俗生动。总之,希望本文能对您的学习有所帮助。

阅读全文…

拜拜了,浮动布局-基于display:inline-block的列表布局

2010年11月3日,星期三


对于浮动局部的局限性,想必同行们都知道,就是每个列表元素的高度必须要一致,否则就会像是俄罗斯方块一样,“锯齿相错”,例如一个左浮动列表布局,如果第一行有个列表高度高于其他列表,那就在第二行,第一个元素会沿着最高元素的右侧对齐。
浮动本身就是个魔鬼,所以,使用浮动布局还需要修复其带来的副作用——高度塌陷的问题,也就是常提到的“清除浮动”了。
另外,IE6下,重复的列表元素会出现莫名的bug,例如出现不知哪来的文字。
而基于display:inline-block的列表布局可以避免这些问题,本文就将一步一步地展示基于display:inline-block的列表布局的可用性以及价值所在。本文内容较多,讲解详细,配以丰富飞截图,必要的demo页面。还是视频展示,希望能对您的学习有所帮助。

阅读全文…

我所知道的几种display:table-cell的应用

2010年10月28日,星期四

display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的,但是IE6/7只能对你说sorry了,这一事实也是大大制约了display:table-cell属性在实际项目中的应用。

我们都知道,单元格有一些比较特别的属性,例如元素的垂直居中对齐,关联伸缩等,所以display:table-cell还是有不少潜在的使用价值的,虽说IE6/7不支持此属性,但是幸运的是,IE6/7一些乱糟糟的属性与渲染,我们可以其他方法实现同样或是类似的效果。

本文就将介绍使用display:table-cell属性让大小不固定元素垂直对齐,两栏自适应布局,多栏等高布局,以及不太擅长的列表布局等。提供必要的截图以及demo实例页面展示,和一些简单的源代码展示。时间仓促,文字可能略显粗糙,总之,希望能对您的学习有所帮助。

阅读全文…

CSS样式分离之再分离

2010年07月8日,星期四

CSS样式合并于分离之分离 张鑫旭-鑫空间-鑫生活
我从以前讲布局思想,讲无CSS rest,到现在的CSS样式分离之再分离,以及后面的CSS架构,都是一个体系里面的。我清楚的指导,这些东西,其实很多优秀的前端人员也是知道一二,或是比我理解更深刻的。但是,对于大多数同行而言,可能认为我“又在挑刺”,其实不然。

我把我自己的理解讲出来,是希望让您知道,现在绝大多数的CSS写法,架构都是有很多不足的,缺少创新。我就这么跟您说吧,您所做的任何项目,其实根本只要一个CSS文件就足够,您要是真的通透了CSS的“分离”、“架构”,即使这个网站项目有100个页面(风格统一),您也可以只使用一个CSS页面,并且可以控制CSS文件(未压缩)在40K以下。

我是自信可以这么实现的。我最近做的项目50多个页面,未压缩(含大量注释,竖排)的CSS文件,就30K左右,服务器端压缩后仅11K左右,同时网站整站自适应,从内容到各个按钮,导航,全部宽度自适应,兼容性良好….

阅读全文…