CSS+DIV布局应用（2015年06月10日）

Div+css布局应用

一、html元素分类

2.1、顶级元素（Top-level element）

定义

组成html页面最顶级标签

特点

1、 不可设置宽高；

2、 必须在文档流中处于最高级位置；

3、 包含所有块级元素及内联元素，不可被包含；

常见元素

html

body

frameset

2.2、块级元素（Block-level element）

定义

以块显示的元素，常用于排版，默认情况下每一个块级元素会换行显示。

特点

1、每一个块级元素总是在新行上开始；

2、高度，行高以及外边距和内边距都可控制；

3、宽度缺省是它的容器的100%，除非设定一个宽度；

4、它可以容纳内联元素和其他块元素；

常见元素

address - 地址

blockquote - 块引用

center - 举中对齐块 （html5取消了该标签）

div - 常用块级容易，也是css layout的主要标签

dl - 定义列表

fieldset - form控制组

form - 交互表单

h1 - 大标题

h2 - 副标题

h3 - 3级标题

h4 - 4级标题

h5 - 5级标题

h6 - 6级标题

hr - 水平分隔线

isindex - input PRompt

menu - 菜单列表

noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容）

noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）

ol - 排序表单

p - 段落

pre - 格式化文本

table - 表格

ul - 非排序列表（无序列表）

address - 地址

2.3、内联元素（Inline element ）

定义

内嵌元素、行内元素，默认情况下一个或者多个内联元素会一行显示。

特点

1、内联元素之间会在同一行显示；

2、设置宽度width 无效，宽度取决于元素中文字或图片的宽度；

3、设置高度height无效，高度只能通过line-height设置；

4、设置外边距margin 只有左右margin有效，上下无效；

5、设置外边距padding只有左右padding有效，上下无效；

6、只能容纳文本或者其他内联元素；

常见元素

a - 锚点

abbr - 缩写

acronym - 首字

b - 粗体(不推荐)

bdo - bidi override

big - 大字体

br - 换行

cite - 引用

code - 计算机代码(在引用源码的时候需要)

dfn - 定义字段

em - 强调

font - 字体设定(不推荐) （html5取消了该标签）

i - 斜体

img - 图片

input - 输入框

kbd - 定义键盘文本

label - 表格标签

q - 短引用

s - 中划线(不推荐)

samp - 定义范例计算机代码

select - 项目选择

small - 小字体文本

span - 常用内联容器，定义文本内区块

strike - 中划线

strong - 粗体强调

sub - 下标

sup - 上标

textarea - 多行文本输入框

tt - 电传文本

u - 下划线

var - 定义变量

二、重点布局css属性介绍

2.1、定位（position）

2.1.1、默认值-static

默认值，没有定位，即正常位置，元素出现在正常的HTML流中。当一个div为无定位状态时， top, bottom, left, right 或者 z-index 声明失效。(相对定位demo1)

2.1.2、相对定位-relative

定义

生成相对定位的元素，相对于其正常位置、结合TRBL属性（TOP、RIGHT、BOTTOM、LEFT）进行定位。

特点

1、relative保持对象所在文档流中的位置，也就是说它具有和static相同的呈现方式，它同样占有在文档流中的固定位置，后面的对象不会侵占或覆盖；

2、定位参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位；

2.1.3、绝对定位-absolute

定义

绝对定位，使元素脱离文档流位置，结合TRBL属性（TOP、RIGHT、BOTTOM、LEFT）进行定位。

特点

1、absolute不保持对象所在文档流中的位置，它不占有在文档流中的固定位置，后面的对象会侵占或覆盖；

2、如果父级（无限）没有设定position属性，那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位。如果父级（无限）设定position属性，那么当前的absolute则结合TRBL属性以父级（最近）的左上角为原始点进行定位；

2.1.4、固定定位-fixed

定义

固定定位，使元素脱离文档流位置，结合TRBL属性（TOP、RIGHT、BOTTOM、LEFT）根据浏览器位置进行定位。

特点

当一个层定义了fixed之后，则这个层总是根据浏览器的窗口结合TRBL属性来进行元素的定位，相对于浏览器来自动调整该层的位置。

2.1.5、div层-z-index

定义

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

特点

1、z-index只能在position属性值为relative或absolute或fixed的元素上有效；

2、同级且position属性值均为relative的元素无法比较z-index；

3、z-index值只决定同一父元素中的同级子元素的堆叠顺序，父元素的z-index值（如果有）为子元素定义了堆叠顺序（css版堆叠“拼爹”）；

4、向上追溯找不到含有z-index值的父元素的情况下，则可以视为自由的z-index元素，它可以与父元素的同级兄弟定位元素或其他自由的定位元素来比较z-index的值，决定其堆叠顺序；

5、同级元素的z-index值如果相同，则堆叠顺序由元素在文档中的先后位置决定，后出现的会在上面；

2.2、浮动（float）

2.2.1、定义

float 属性定义元素在哪个方向浮动。在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

2.2.2、特点

请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘。

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。

2.2.3、浮动清除-clear

定义

clear 属性规定元素的哪一侧不允许其他浮动元素。

属性值

特点

假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码：

.news {

background-color: gray;

border: solid 1px black;

}

.news img {

float: left;

}

.news p {

float: right;

}

<div class="news">

<img src="news-pic.jpg" />

<p>some text</p>

</div>

这种情况下，出现了一个问题。因为浮动元素脱离了文档流，所以包围图片和文本的 div 不占据空间。

如何让包围元素在视觉上包围浮动元素呢？需要在这个元素中的某个地方应用 clear。

这种实现方式，由于没有现有的元素可以应用清理，所以只能添加一个空元素并且清理它。代码如下

.news {

 background-color: gray;

 border: solid 1px black;

 }

.news img {

 float: left;

 }

.news p {

 float: right;

 }

.clear {

 clear: both;

 }

<div class="news">

<img src="news-pic.jpg" />

<p>some text</p>

<div class="clear"></div>

</div>

这样可以实现我们希望的效果，但是需要添加多余的代码。常常有元素可以应用 clear，但是有时候不得不为了进行布局而添加无意义的标记。

因此，针对这一问题，推荐使用以下解决方案，那就是对容器 div 进行浮动。

.news {

 background-color: gray;

 border: solid 1px black;

 float: left;

 }

.news img {

 float: left;

 }

.news p {

 float: right;

 }

<div class="news">

<img src="news-pic.jpg" />

<p>some text</p>

</div>