流动网页设计有很多好处,但也只有在正确使用的时候。合适的技巧会使页面在大屏幕、小屏幕抑、PDA小屏幕上都能得到良好的呈现。但是,糟糕的代码结构,对于流动布局来说将是灾难性的。因此,我们需要针对大多数流动设计的缺点寻求可行的解决方案。 [ 查阅全文 ]
非常日常熟悉且惯用的布局实践中,有没有探究过为什么如果布局?各个浏览器在解析效果时也是不尽相同,在提供标准设计的理念中,浏览器究竟以什么样的原理为标准解析?对网页布局模型的原理知识将构成设计人员知识体系完整性。根据平时的实践重新进行调整,本文是“网页布局模型”专题培训内容的学习大纲。 [ 查阅全文 ]
CSS 包含块是标准布局中的一个重要概念,它是绝对定位的基础。请注意包含块与父元素、包含框或包含元素等概念存在本质的区别。那么什么是包含块呢?包含块就是为绝对定位元素提供坐标偏移和显示范围的参照物,即确定绝对定位的偏移起点和百分比长度的参考。在默认状态下,body 元素就是一个大的包含块。 [ 查阅全文 ]
网页布局中经常需要定义元素的高度和宽度,但很多时候我们希望元素的大小能够根据窗口或父元素自动调整,这就是我们常挂在嘴边的元素自适应。元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适应在不同设备、不同窗口和不同分辨率下显示。 [ 查阅全文 ]
XHTML 中大部分的元素(特别是块状元素)都可以看做一个盒子。网上流传着另一张由 w3c 提供的 cssbox 3D 图片示意其层次、关系。事实上,这张 3D 示意图中的示意中将 margin 位于最后、border 位于最前的立体关系是有误导的,本文对 CSS 2.0 盒模型原理进行深入探究。 [ 查阅全文 ]
本章中将演示浮动模型与流动模型混合布局的6种基本布局方式,从中我们可以总结出浮动模型与流动模型进行混合布局的一些规律和特点。虽然实际网页布局中的应用是千变万化的,但是从这些总结的规律中我们可以举一反三地进行实践和应用。 [ 查阅全文 ]
在这一章中,我们重点来探讨一下将浮动模型与流动模型进行混合布局,以探究在混合布局中这二个模型之间的关系,应用前面所讲的浮动模型与流动模型的原理来分析出现的相关问题及处理方法。在理解了浮动模型与流动模型的布局原理后,在结合实际问题来进行分析和解决,相信在思路与认识上都会有个质的飞跃。 [ 查阅全文 ]
层模型(Layer Model)是在网页布局中引入图像软件中层的概念,以用于精确定位网页中的元素。这种网页布局模式的初衷是摆脱 HTML 默认的流动模型所带来的弊端,以层的方式对网页元素进行精确定位与层叠,从而增强网页表现的丰富性。层模型可以精确定位网页中元素的相对位置和实现元素之间的层叠显示效果。 [ 查阅全文 ]
浮动本身起源于实现图文环绕混排的目的。任何元素在默认状态下是不浮动的,但都可以通过 CSS 定义为浮动于左右的属性(float: left; 或 float: right;)时定义为浮动。浮动的概念本身并不复杂,但是因为浏览器在开发时对 Float 的理论解读不同,造成了实际中的许多问题,尤其是 IE6 及以前的版本。 [ 查阅全文 ]
流动模型(Flow Model)是 HTML 中默认的网页布局模式,在一般状态下,网页中元素的布局都是以流动模型为默认的显示方式。在了解流动模型的特征前,我们先了解下文档流的概念。在 CSS 的布局理论中,理解了文档流对理解布局原理都会变得易于理解。 [ 查阅全文 ]