html+css+div.docx
《html+css+div.docx》由会员分享，可在线阅读，更多相关《html+css+div.docx（8页珍藏版）》请在冰豆网上搜索。
html+css+div
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:
5pxauto;width:
500px;height:
80px;background:
#9F9;}
#main{margin:
5pxauto;width:
500px;height:
400px;background:
#9FF;}
#footer{margin:
5pxauto;width:
500px;height:
80px;background:
#9f9;}
5.
为什么两个相邻的容器中间的间距不是10px，而是5px呢？
按照我们正常的理解，认为应该是两个值相加，其实这里是两个合并后取最大值。
用css手册中的话说：
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。
行内元素的的左右外边距不会合并。
同样地，浮动元素的外边距也不会合并。
允许指定负的外边距值，不过使用时要小心（有关块级元素和行内元素的概念在下一节讲到）。
6.
何为块级元素，何为行级元素呢？
这里还有内联元素。
（又叫做内嵌元素、行内元素、直进式元素）
（inlineelement）内联元素一般都是基于语义级（semantic）的基本元素。
内联元素只能容纳文本或者其他内联元素。
（blockelement）块级元素和inlineelement都是赫塔缪勒规范中的概念。
Blockelement会顺序以每次另起一行的方式一直往下排。
也就是说blockelement是换行的，但是当inlineelement有了这样的属性：
display：
block；那么就会和blockelement没有什么区别了（inlineelement也是必须换行了。
）
Display：
inline；这个属性能够修复著名的IE双倍浮动边界问题。
Blockelement
1ddress-地址
2 *blockquote-块引用
3 *center-举中对齐块
4 *dir-目录列表
5 *div-常用块级容易，也是csslayout的主要标签
6 *dl-定义列表
7 *fieldset-form控制组
8 *form-交互表单
9 *h1-大标题
10 *h2-副标题
11 *h3-3级标题
12 *h4-4级标题
13 *h5-5级标题
14 *h6-6级标题
15 *hr-水平分隔线
16 *isindex-inputprompt
17 *menu-菜单列表
18 *noframes-frames可选内容，（对于不支持frame的浏览器显示此区块内容
19 *noscript-可选脚本内容（对于不支持script的浏览器显示此内容）
20 *ol-排序表单
21 *p-段落
22 *pre-格式化文本
23 *table-表格
24 *ul-非排序列表
Inlineelement
1 *a-锚点
2 *abbr-缩写
3 *acronym-首字
4 *b-粗体（不推荐）
5 *bdo-bidioverride
6 *big-大字体
7 *br-换行
8 *cite-引用
9 *code-计算机代码（在引用源码的时候需要）
10 *dfn-定义字段
11 *em-强调
12 *font-字体设定（不推荐）
13 *i-斜体
14 *img-图片
15 *input-输入框
16 *kbd-定义键盘文本
17 *label-表格标签
18 *q-短引用
19 *s-中划线（不推荐）
20 *samp-定义范例计算机代码
21 *select-项目选择
22 *small-小字体文本
23 *span-常用内联容器，定义文本内区块
24 *strike-中划线
25 *strong-粗体强调
26 *sub-下标
27 *sup-上标
28 *textarea-多行文本输入框
29 *tt-电传文本
30 *u-下划线
31 *var-定义变量
可变元素
1 *applet-javaapplet
2 *button-按钮
3 *del-删除文本
4 *iframe-inlineframe
5 *ins-插入的文本
6 *map-图片区块（map）
7 *object-object对象
8 *script-客户端脚本
7.
Css语法及格式
#layout{
color:
#fff;
border:
1px;
solid:
#ccc;
}
红色代表CSS选择器，蓝色代表属性，绿色代表值；
如图所示，CSS语法由如下三部分构成，选择器：
可以是ID、CLASS或标签；属性和值是用来定义这个物件的某一个特性。
如一张桌子的长120cm，宽60cm，套用css的格式为，桌子{长:
120cm;宽:
60cm;}，这样是不是容易理解。
8.
Div是‘#’,class是‘.’；
Div的优先级高于class；比如说今天三班的学生上体育课，小明留下来打扫卫生。
那么三班的学生上体育课这是一个类，而小明打扫卫生这是个id，虽然小明也是三班的学生，但id高于class，所以小明执行打扫卫生的任务。
9.
两列自适应宽度布局：
有一列要自己浮动，另一列的margin要和浮动的宽度相同。
如：
#side{background:
#99FF99;height:
300px;width:
120px;float:
left;}
#main{background:
#99FFFF;height:
300px;width:
300px;margin-left:
120px;}
给他们添加父级div
#content{width:
470px;margin:
0auto;}（居中）
Contentwidth=side.width+main.width;
10.
Float浮动；
CSS中，任何元素都可以浮动，浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明宽度，否则它会尽可能的窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。
（所谓尽可能的窄是紧紧的内贴）
11.
三列自适应宽度：
一般常用结构式左列和右列固定，中间列根据浏览器自适应。
而在写入div标签的时候要注意顺序：
先写左列float-left，且固定宽度，在写右列float-right，要固定宽度;最后再写中间列。
三列固定宽度：
在自适应宽度的基础上增加父级div，必须固定宽度。
12.
list-style-type;（针对列表之类的list嘛）
默认是实心圆：
disc；
常用的是list-style-type:
none;不使用项目符号；
13.
text-decoration;（检索或设置对象中文本的装饰）
：
：
：
none:
默认值。
无装饰
blink:
闪烁
underline:
下划线
line-through:
贯穿线
overline:
上划线
检索或设置对象中的文本的装饰。
有href特性的a，以及u，ins对象默认值为underline。
对象strike，s，del，默认值是line-through。
∙假如none值在属性声明的最后，所有的先前的其他取值都会被清除。
例如，声明text-decoration:
underlineoverlineblinknone等于声明text-decoration:
none。
∙假如对象没有文本（如img元素）或者是空元素（如：
），此属性不会发生作用。
∙假如你设置body对象的此属性值为none，a对象将依然保持其原有的下划线样式。
除非你针对a对象声明此属性值。
指定块对象的此属性将影响其所有内联子对象。
而此影响一旦发生，块对象容器最终会受到影响。
在IE4+中可用的值为overline和blink。
虽然blink值被提供，但它不会被作用。
此属性对于currentStyle对象而言是只读的。
对于其他对象而言是可读写的。
对应的脚本特性为textDecoration；
14.
标签的默认样式：
大多数标签都有自己的默认样式，比如第二天课程中遇到的body默认外边距，另外本例中ul前的圆点及左侧的内边距，另h1-h6字体大小各不相同，em默认为斜体，strong表示粗体。
正因为有这些默认样式，一个设计合理的页面，即使没有加载样式，也能让用户很容易阅读。
但此时这些默认样式对我们没用，所以需要清除掉，为了方便，建议用标签重定义方式，这样可以很简单地把全局的样式给统一起来。
另外页面中的图片添加链接后会默认添加个边框，ul默认情况下会在列表前添加圆点，这些都是需要去掉的。
body,ul,li,h1,h2,h3,h4,h5,h6,p,form,dl,dt,dd{margin:
0px;padding:
0px;font-size:
12px;font-weight:
normal;}
ul{list-style:
none;}
img{border-style:
none;}
15.
css派生选择器
派生选择器可以帮助你节约大量的class定义。
#menuul{list-style:
none;margin:
0px;padding:
0px;}
#menuulli{background:
#eee;padding:
0px8px;height:
26px;line-height:
26px;border-bottom:
1pxsolid#CCC;}
#menuul和#menuulli即为派生选择器，如果我们把前边的#menu去掉，那么将是对ul标签重定义，重定义的属性将应用到全局，而前边加上#menu后，将是定义ID为menu元素内ul的样式，设置它的样式只对#menu下的ul生效，不对它之后的ul生效，这个有点像编程中的局部变量，而直接定义ul则相当于全局变量。
#menuulli是定义ID为menu元素内ul下的li，派生选择器可以使我们不用再给每个li定义一个样式名来定义样式，只需使用派生选择器，从它的父元素处选择即可，这样能大大提高效率。
16.
css选择器的分组
被分组的选择器就可以分享相同的声明。
用逗号将需要分组的选择器分开。
17.讲解块级元素和内联元素时提到display，今天用到了display:
block;和display:
none;值为none时表示将这个元素隐藏，为block时表示将它的隐藏状态改为显示状态详细介绍请参考css手册。
18.
Position，
相对定位（relative）和绝对定位（absolute）；
1.position:
relative;如果对一个元素进行相对定位，首先它将出现在它所在的位置上。
然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。
（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。
因此，移动元素会导致它覆盖其他框）
2.position:
absolute;表示绝对定位，位置将依据浏览器左上角开始计算。
绝对定位使元素脱离文档流，因此不占据空间。
普通文档流中元素的布局就像绝对定位的元素不存在时一样。
（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。
z-index的值越高，它显示的越在上层。
）
3.父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角。
4.相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。
另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右。
升级会员 