無為

XHTML中元素间的CSS属性继承：继承指的是每个元素可以有多个样式设计，在通常情况下，它遵循的是最外层的样式设计原则，如果遇到对其自身的样式设计，它将在继承最外层样式设计的基础之上，优先考虑自身的样式设计。用CSS设计横向标签式导航#nav{height:26px;border-bottom:2px solid #2788da;}#na

说明：有些单用户博客系统就是采用“二列右列宽度自适应布局”，也就是固定左栏，右栏根据浏览器窗口大小自适应。方法：左栏设置固定width值，右栏不浮动也不设置宽度值即可。二列右列宽度自适应布局#left{background-color:#cccccc;border:2px solid #333333;width:110px;height:30

从“一列宽度自适应布局”我们可以知道，设定自适应主要是通过宽度的百分比值来实现，因此在“二列宽度自适应布局”中，同样是采用百分比来指派。二列宽度自适应布局#left{background-color:#cccccc;border:2px solid #333333;width:20%;height:300px;float:left;}#r

目标：让两个DIV在水平行中并排显示，从而形成二列式布局。说明：float属性用于控制对象的浮动布局，有三个值：none,left,right。使用none表示对象不浮动，使用left，表示对象将向左浮动，使用right，表示对象向右浮动。注意：在CSS中，包括div在内的任何元素都可以浮动的方式进行显示，浮动可以改变页面中对象的前后流动方式。有利于排版页面。

说明一：页面居中是常用的网页设计表现形式之一，传统的表格式布局中，用align="center"属性来实现表格居中显示。但是div本身也支持align="center"属性，同样可以实现居中，但是WEB标准化时代，这个不是我们想要的结果。因为不能实现表现与内容的分离。align对齐属性是一种样式代码，书写在div属性中，有违于分离原则。说明二：margin属性用于控制对象的上、右、下、左四个方

说明一：自适应布局的最大好就是能够浏览器的大小，自动改变其高度或宽度值。因此都不同分辨率的显示器来说，使用自适应大小能够提供比较好的显示效果。说明二：默认状态下div将占据整行空间，即宽度为100%的自适应大小，一列自适应布局需要改变这个值。其方法是：将width的固定像素值改成百分比即可完成。1列宽度自适应#layout{backgroun

一列固定宽度#layout{background-color:#cccccc;border:2px solid #333333;width:300px;height:300px;}/*width:300px;将当前宽度界定在300px以内，这样就形成了一个固定宽度的布局。如果设置为width:auto;将占据整行空间。*/

绝对定位：position:absolute;主要是通过设置对象的top,right,bottom,left四个方向的边距值来实现。一旦对象采用了绝对定位，它就完全摆脱了文档流与浮动模型，独立存在。绝对定位#a,#b,#c,#d{background-color:#eee;border:2px solid #aaa;width:100px;hei

要求：3列布局，左栏要求固定宽度并且居左显示；右栏要求固定宽度并居右显示；而中间栏要求根据左右栏间距自适应居中显示。说明：浮动定位：主要由浏览器根据对象的内容自动进行浮动方向的调整。当这种方式不能满足定位需求时，就需要用到绝对定位position属性来实现。有三个值position:static：默认属性值；position:absolute，对象将根据整个页面的位置进行重新定位，当使用次属性

CSS网页布局有两种方式：一种是浮动式布局；另外一种是定位布局。这两种方式的核心都脱离于文档流的控制。前提：文档流(Document Flow)，对于一个xhtml网页，body元素下的任意元素，根据其前后顺序，组成了一个个上下关系，简单说这就是文档流。浏览器根据这些元素的顺序去显示它们在网页中的位置。文档流是浏览器的默认显示规则。浮动定位（float）浮动定位的目的就是打破默认的按照

上面一篇文章提到“上下margin叠加问题”在IE6.0中，当处于上下关系的两个对象同时具备margin属性的时候，并且用了float属性使之消除边距叠加问题，但是引发了一个新的问题====>“左右margin加倍问题”。问题阐述：当盒子模型对象处于浮动状态的时候，在IE6.0中，盒对象的左右margin会加倍。这是IE6.0的CSS解析问题。解决“左右margin加倍问题”之诀窍：设置对象的

从盒子模型我们可以得知：对象之间的间距是由两个对象的盒子模型的最终计算值得出来的。但有一种特殊情况＝＝＝＝>上下对象的间距问题。当两个对象呈现出上下关系时而且都具备margin属性的时候，此时由margin所造成的外边距将会出现叠加的现象。还是下面例子吧.Margin叠加问题#a{width:100px;height:100px;backgrou

FF跟IE浏览器的盒子模型解释完全符合W3C标准的设计目标，而IE6/7却有不同的表现。IE6/IE7/FF的最终宽度：左外边距＋左边框宽＋左内边距＋宽度＋右内边距＋右边框宽＋右外边距代码如下： 浅谈FF和IE对盒子模型的理解程度#a{width:300px;height:300px;background-color:#EEEEEE;bo

注意：一个对象的高度是否可以使用百分比来显示，取决于对象的父级对象。这是由浏览器解析规则引发的高度自适应问题。代码中定义了html,body{margin:0px;height:100%;}，是为了IE跟Firefox都能够实现高度自适应。在IE中。html对象默认为100%的高度，body却不是。而在Firefox中,html标签就不是100%高度。因此设置两个标签以保住在IE和FF下达到兼容性

二列固定宽度居中布局#layout{margin:0px auto;width:408px;}/*layout居中了，里面容器的也就居中显示。*/#left{background-color:#cccccc;border:2px solid #333333;width:200px;height:300px;float:left;}#r