猫沙盆

CSS核心：再说框模型（Box Model）

李烨 — Fri, 16 Jul 2010 19:35:00 +0800

框模型（Box model，也译作“盒模型”）是CSS非常重要的概念，也是比较抽象的概念。文档树中的元素都产生矩形的框（Box），这些框影响了元素内容之间的距离、元素内容的位置、背景图片的位置等等。而浏览器根据视觉格式化模型（Visual formatting model）来将这些框布局成访问者看到的样子。

CSS核心：框模型与视觉格式化模型[总览]

李烨 — Fri, 16 Jul 2010 19:33:00 +0800

视觉类型的媒体根据CSS的视觉格式化模型（Visual formatting model）的规则来处理文档树中的元素，从而将(X)HTML转化成制作者设计的样子。我曾在《别具光芒：CSS属性、浏览器兼容与网页布局》一书中，讲解过这些概念，但是很多读者反映内容比较晦涩难懂，所以，我再次重新尝试，把这部分内容重新来编排一下，看看是否能把这些重要的内容讲得更易懂一些。

media属性和媒体类型

李烨 — Fri, 11 Jun 2010 13:17:00 +0800

一、media属性
当设定样式的时候，可以指定此样式应用于何种媒体，例如：

media属性为可选属性，用于指定应用此样式表的介质或媒体。允许的值有：screen (缺省值)，用于文档在屏幕媒体的呈现，如电脑显示器，所有 web 浏览器都运行于这样的系统屏幕媒体用户代理；print，应用于不透明的页面材料，以及文档在打印预览的状态。；projection，应用于投影演示，例如投影仪或打印到透明胶片；speech，应用于屏幕阅读器等发声设备；braille，应用于盲文触摸式反馈设备；embossed，用于打印的盲人印刷设备；handheld，用于手持设备，如个人数码助理或可上网的手机；tty，应用于使用固定字符宽栅格的媒介，如电传，终端，或显示能力有限的手提设备；tv，应用于电视类型的设备（低分辨率，彩色，屏幕滚动能力有限，有声音）；all，所有输出设备。

注意：媒体类型

浮动元素的两端对齐

李烨 — Tue, 16 Mar 2010 23:16:00 +0800

当我们使用float来使元素并排显示的时候，可以使用margin来控制元素之间的距离，而在很多版式里（例如产品图片的列表），需要浮动的元素达到两端对齐的效果，通过overflow属性来实现。

设计4大基本原则

李烨 — Tue, 29 Dec 2009 12:50:00 +0800

《写给大家看的设计书》是一本普及性的设计入门书籍，它非常适合非设计专业的人员来阅读，书中没有晦涩难懂的术语，读起来很舒畅，所举的例子也很简单明了，能够非常贴切地说明了问题。以下是对基本设计原则的概述，每一个优秀的设计中都应用了这些设计原则，它们是互相关联的，只应用某一个原则的情况很少。