摘要：
如果在一行中即有小图片，又有文字，这时候图片和文字的对齐一般就需要仔细设置。其中用到的最重要的 CSS 属性是 vertical-align。假设我们的 HTML 代码如下：<div id="test">Hello <img src="http://static.cnblogs.com/favicon.ico" width="16" height="16" class="favimage"> Image!</div>vertical-align 的取值主要有 阅读全文
摘要：
在介绍 CSS 的 line-height 属性之前，我们先来看看 height 属性。height 属性适用于大部分元素，除了行内非替换元素（replaced inline element）。所谓的替换元素，就是指 ，，，，，， 等默认就有一定大小的元素。因此，行内非替换元素，比如 ，， 等，将无法设置 height 属性，它们的高度由字体大小决定。元素的 height 属性的取值可以是长度值或者比例值。如果是比例值，则根据它所在的包含块（containing block）的高度来计算。height 属性的默认值为 auto，此时将根据它的子元素的大小来确定。元素的行高（line-heigh 阅读全文
摘要：
网格化布局（Grid Layout）是一种页面设计方式，它将整个页面分成同等大小的若干小格，然后让各部分内容分别占用若干个小格。这样设计出来的页面，整齐有序，容易阅读。实际上，网格化布局早就在其它地方使用，最典型的例子是报纸的页面设计。虽然一张报纸的内容很多，但是拿起来看却不觉得乱，就要归功于这种布局方式。在网格化布局中，最常见的是 960px 宽度的布局，这是因为对于现在的大部分电脑，屏幕分辨率宽度已经至少有 1024 了；而且 960 是一个有很多因子的自然数。选定了宽度后，我们可以将这个宽度分为若干列，常见的分法是分为 12 栏，这同样是因为 12 是有多个因子的数，所以容易安排内容。现 阅读全文
摘要：
自适应网页设计（Responsive Web Design）是一种网页设计方式，主要目标在于使得网页在不同分辨率的多种设备都能都良好呈现。自适应网页设计的关键在于使用 media query，针对不同宽度的屏幕使用不同的样式。例如，一般我们的网页有顶栏，侧栏，内容栏，和底栏。我们可以设定对于屏幕宽度大于等于 768 的设备，正常显示。对于屏幕宽度小于 768 的设备，将侧栏放在内容栏下面。如果屏幕宽度还小于 480，我们可以将顶栏的横向列表折叠成下拉菜单。IE6 - IE8 不支持 media query，它们将忽略 html 文件中包含 media query的 <link> 标 阅读全文
摘要：
在之前的屏幕大小与视区大小 这篇文章中，已经介绍了移动设备的 viewport meta tag。这里介绍与它相关的 media type 和 media query 概念。CSS2 中可以通过 media type 对不同的浏览情形定义不同的样式。例如：@media screen { body { font-size: 16px }}@media print { body { font-size: 12pt }}@media screen, print { body { line-height: 1.5 }}上面 CSS 代码将对在正常浏览时设置字体大小为 16pt，而打印时设置字体大... 阅读全文