CSS核心:包含块(Containing Block)

提示:本文基于2008年w3c手册,内容与当前可能存在出入,请自行甄别。

包含块(Containing Block)是视觉格式化模型的一个重要概念,它与框模型类似,也可以理解为一个矩形,而这个矩形的作用是为它里面包含的元素提供一个参考,元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。

在阅读本文前,请先理解一下:

…阅读全文…

CSS核心:再说框模型(Box Model)

框模型(Box model,也译作“盒模型”)是CSS非常重要的概念,也是比较抽象的概念。

文档树中的元素都产生矩形的框(Box),这些框影响了元素内容之间的距离、元素内容的位置、背景图片的位置等等。而浏览器根据视觉格式化模型(Visual formatting model)来将这些框布局成访问者看到的样子。

因此,要掌握使用CSS布局的技巧,就需要深入了解框模型和视觉格式化模型的原理。
…阅读全文…

CSS核心:框模型与视觉格式化模型[2010年7月16日更新:包含块]

视觉类型的媒体根据CSS的视觉格式化模型(Visual formatting model)的规则来处理文档树中的元素,从而将(X)HTML转化成制作者设计的样子。

…阅读全文…

media属性和媒体类型

一、media属性

当设定样式的时候,可以指定此样式应用于何种媒体,例如:

<link rel="stylesheet" href="basic.css" type="text/css" media="screen" />

media属性为可选属性,用于指定应用此样式表的介质或媒体。允许的值有:
…阅读全文…

浮动元素的两端对齐

当我们使用float来使元素并排显示的时候,可以使用margin来控制元素之间的距离,而在很多版式里(例如产品图片的列表),需要浮动的元素达到两端对齐的效果,如图1所示。

图1 两端对齐的版式

图1 两端对齐的版式

单纯使用float:left或者float:right,而不添加额外的class区分元素的位置,似乎是无法实现靠左/右的效果。
…阅读全文…

CSS双线边框研究

昨天有人在群里问图1的边框效果是否能实现。

input边框效果图

边框效果图

有人给出答案,需要嵌套一个元素实现。我当时粗粗写了个测试页面,但是时间太晚了,也没有细弄,今天把想法写出来。

CSS的边框border属性经常会用到,但是,其参数值到底有几个?未必大家都知道。

…阅读全文…

4.3伪类与伪元素[1]–4.3.1 伪类

伪类和伪元素是两种有意思的选择器,之所以称“伪”,因为它们实际上并不存在于源文档或者文档树中,但是它们又确实可以显示出效果。

4.3.1 伪类(Pseudo-Classes)

应用最广泛的伪类,就是链接的普通状态、鼠标悬停状态、已点击过的链接以及当前激活的链接,虽然没有在XHTML内对a元素设定class属性,也可以生效。例如:
…阅读全文…