html css div手册,(htmlcssdiv.doc

手册,(htmlcssdiv.doc"/>

html css div手册,(htmlcssdiv.doc

(htmlcssdiv

1.

那为什么还有那么宽的白边呢？这个是由body默认的外边距造成的。当我们不用任何样式表进行定义时，body，h1－h6，ul等元素默认有外边距或其它样式的。这里我们在css样式中增加一项：body {margin:0;}，就可以把body默认的外边距去掉，这时再预览一下，白边就没了。

body { margin: 0px; }

2.

这里的选择器类型是新手朋友最容易迷糊的地方，类：是指定义一个class，可以多个对象引用；标签：指对默认的html标签进行重新定义，如可以定义body{margin:0}，意思是 将body的外边距设置为0，h2{color:#f00}是将所有h2标签的文字颜色设置为红色；高级它把ID和伪类放到一块了，是一个设置不合理的地方，在cs4版本中已经分开了。ID是以#开始，id只能作用于一个对象，不能作用于多个对象，优先级高于class，这是id和class的区别。

3.

同样和固定宽度居中一样，我们只需要设置div的外边距为auto即可实现居中了。

#layout { margin:auto; height: 300px; background: #99FFcc; width: 80%; }

4.

一列二至多块布局

一般的网站整体可以分为上中下结构，即：头部、中间主体、底部。那么我们可以用三个div块来划分，分别给它们起名为：头部(header)、主体(maincontent)、询问(footer)。

采用固定宽度居中的方式，代码如下：

body { margin:0; padding:0;}

#header { margin:5px auto; width:500px; height:80px; background:#9F9;}

#main { margin:5px auto; width:500px; height:400px; background:#9FF;}

#footer { margin:5px auto; width:500px; height:80px; background:#9f9;}

5.

为什么两个相邻的容器中间的间距不是10px，而是5px呢？按照我们正常的理解，认为应该是两个值相加，其实这里是两个合并后取最大值。用css手册中的话说：块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心(有关块级元素和行内元素的概念在下一节讲到)。

6.

何为块级元素，何为行级元素呢？

这里还有内联元素。(又叫做内嵌元素、行内元素、直进式元素)

(inline element)内联元素 一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素。

(block element)块级元素和 inline element都是赫塔缪勒规范中的概念。Block element 会顺序以每次另起一行的方式一直往下排。也就是说block element 是换行的，但是当inline element有了这样的属性：display ： block ； 那么 就会和block element 没有什么区别了(inline element 也是必须换行了。)

Display： inline ；这个属性能够修复著名的IE双倍浮动边界 问题。

Block element

ddress - 地址

* blockquote - 块引用

* center - 举中对齐块

* dir - 目录列表

* 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 - 非排序列表

* a - 锚点