CSS页面布局技巧

常见的几种定位方式

css的元素物理结构

All HTML elements can be considered as boxes.

Box Model

Explanation of the different parts:

Margin - 边框透明没有背景色。
Border - A border that goes around the padding and content. The border is affected by the background color of the box
Padding - The padding is affected by the background color of the box
Content - The content of the box, where text and images appear

Width and Height of an Element

注意: 高宽只是对 content area有效. 如下：

width:250px;

padding:10px;

border:5px solid gray;

margin:10px;

Let's do the math:

250px (width)

+ 20px (left and right padding)

+ 10px (left and right border)

+ 20px (left and right margin)

= 300px

下面就css一些布局常用的属性，还有一些相关的，涉及到的逐个讲解。

1.Positioning 定位

Static Positioning

HTML elements 的缺省值.通过 the normal flow of the page定位.
不受 top, bottom, left, and right properties影响.

Fixed Positioning

1.fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位,即使拖动滚动条，他的位置也是不会改变的。

Relative Positioning

注意：
移动后可能和其他元素重合, 但是元素本身的位置被保留in the normal flow.

根据top，right，bottom，left偏移。移动后可能与其他元素重合。

Absolute Positioning

1.当position属性设为absolute不是按照浏览器窗口来进行定位的。实际上，这是fixed属性的特点

2.绝对定位相对它的第一个有定位的父类元素（除了static）. 如果没发现, 以body为定位对象，即按浏览器的窗口进行定位，

3.当position设置为absolute后，元素溢出正常的文档流，就像它不属于 parent一样，它漂浮了起来，它原来位置肯可能其他元素占有。

2.Display

display:none

h1.hidden {display:none;}

visibility:hidden

h1.hidden {visibility:hidden;}

注意：

visibility:hidden hides an element, but it will still take up the same
space as before. The element will be hidden, but still affect the layout.

display:Inline

li {display:inline;}

display:block

span {display:block;}

3. bottom，top，right，left Property

Definition and Usage

1.For absolutely positioned elements, the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its containing element.
2.For relatively positioned elements, the bottom property sets the bottom edge of an element to a unit above/below its normal position.
注意: If "position:static", the bottom property has no effect.

参考文档：

1.http://www.w3schools.com/css/css_positioning.asp