文章关键字 ‘流动性布局’

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

2015年02月12日,星期四


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

阅读全文…

页面重构“鑫三无准则” 之“无宽度”准则

2010年10月11日,星期一


为了使CSS布局模块化以及增强可扩展性,我曾自己总结了一套约束自己的CSS准则,我自己称之为“鑫三无准则”,即“无宽度”、“无图片”和“无浮动”,这些都是在页面重构中尽量避免的东西。而本文就是要最其中的“无宽度”准则进行一些探讨。
因为纯粹个人的东西,所以可能没有什么适用性,单也可能会对您的学习有所启发,所以这里还是简单分享了。对于一篇观点论述性的文章,一定要大量的图片、数据域实例支持,另外还有必要的帮助理解的demo页面,本文没有多少复杂的代码,所以源代码展示比较少。总之,希望能对您的学习有所帮助。

阅读全文…

CSS样式分离之再分离

2010年07月8日,星期四

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

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

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

阅读全文…

css margin的相关属性,问题及应用

2009年08月25日,星期二

margin为css中非常常用的一个属性,其所包含的内容也是很多的。本文主要分三部分对margin做一些分析叙述,包括其属性,使用过程中会遇到的问题,以及一些高级应用等。
其中属性将着重分享自己记margin各个参数个数位置含义的方法;
margin常见问题部分将讨论margin双倍边距形成的条件以及推荐的解决方法,讨论margin重叠的问题,简单叙述margin不起作用的一些情况;
margin负值的相关应用将讨论页面背景定位的问题,宽度自适应布局,选项卡中的应用,文字与图片对齐等问题。

阅读全文…