DIV+css布局入门.docx
- 文档编号：1655930
- 上传时间：2023-05-01
- 格式：DOCX
- 页数：10
- 大小：17.92KB
DIV+css布局入门.docx
《DIV+css布局入门.docx》由会员分享，可在线阅读，更多相关《DIV+css布局入门.docx（10页珍藏版）》请在冰点文库上搜索。
DIV+css布局入门
DIV+CSS布局常用的行列布局规则
1.CSS布局常用的方法：
float:
none|left|right
取值：
none:
默认值。
对象不飘浮
left:
文本流向对象的右边
right:
文本流向对象的左边
它是怎样工作的，看个一行两列的例子
xhtml:
这里是第一列
这里是第二列
CSS:
#wrap{width:
100%;height:
auto;}
#column1{float:
left;width:
40%;}
#column2{float:
right;width:
60%;}
.clear{clear:
both;}
position:
static|absolute|fixed|relative
取值：
static:
默认值。
无特殊定位，对象遵循HTML定位规则
absolute:
将对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。
如果不存在这样的父对象，则依据body对象。
而其层叠通过z-index属性定义
fixed:
未支持。
对象定位遵从绝对（absolute）方式。
但是要遵守一些规范
relative:
对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
它来实现一行两列的例子
xhtml:
这里是第一列
这里是第二列
CSS:
#wrap{position:
relative;/*相对定位*/width:
770px;}
#column1{position:
absolute;top:
0;left:
0;width:
300px;}
#column2{position:
absolute;top:
0;right:
0;width:
470px;}
他们的区别在哪?
显然，float是相对定位的，会随着浏览器的大小和分辨率的变化而改变，而position就不行了，所以一般情况下还是float布局！
2.CSS常用布局实例
一列
单行一列
body{margin:
0px; padding:
0px; text-align:
center; }
#content{ margin-left:
auto; margin-right:
auto; width:
400px;}
两行一列
body{ margin:
0px; padding:
0px; text-align:
center;}
#content-top{margin-left:
auto; margin-right:
auto;width:
400px;}
#content-end{margin-left:
auto;margin-right:
auto; width:
400px; }
三行一列
body{ margin:
0px;padding:
0px; text-align:
center; }
#content-top{ margin-left:
auto; margin-right:
auto; width:
400px;}
#content-mid{margin-left:
auto;margin-right:
auto; width:
400px;}
#content-end{margin-left:
auto;margin-right:
auto;width:
400px; }
两列
单行两列
#bodycenter{width:
700px;margin-right:
auto;margin-left:
auto;overflow:
auto; }
#bodycenter#dv1{float:
left;width:
280px;}
#bodycenter#dv2{float:
right;width:
410px;}
两行两列
#header{ width:
700px;margin-right:
auto;margin-left:
auto;overflow:
auto;}
#bodycenter{width:
700px;margin-right:
auto;margin-left:
auto;overflow:
auto;}
#bodycenter#dv1{float:
left;width:
280px;}
#bodycenter#dv2{float:
right;width:
410px;}
三行两列
#header{ width:
700px;margin-right:
auto;margin-left:
auto; }
#bodycenter{width:
700px;margin-right:
auto;margin-left:
auto; }
#bodycenter#dv1{ float:
left;width:
280px;}
#bodycenter#dv2{float:
right; width:
410px;}
#footer{ width:
700px; margin-right:
auto;margin-left:
auto; overflow:
auto; }
三列
单行三列
绝对定位
#left{position:
absolute;top:
0px; left:
0px;width:
120px; }
#middle{margin:
20px190px20px190px;}
#right{position:
absolute;top:
0px;right:
0px; width:
120px;}
float定位
xhtml:
这里是第一列
这里是第二列
这里是第三列
CSS:
#wrap{width:
100%;height:
auto;}
#column{float:
left;width:
60%;}
#column1{float:
left;width:
30%;}
#column2{float:
right;width:
30%;}
#column3{float:
right;width:
40%;}
.clear{clear:
both;}
float定位二
xhtml:
Thisisthemaincontent.
Thisistheleftsidebar.
Thisistherightsidebar.
CSS:
body{margin:
0;padding-left:
200px;padding-right:
190px;min-width:
240px;}
.column{position:
relative;float:
left;}
#center{width:
100%;}
#left{width:
180px;right:
240px;margin-left:
-100%;}
#right{width:
130px;margin-right:
-100%;}
两行三列
xhtml:
这里是顶行
这里是第一列
这里是第二列
这里是第三列
CSS:
#header{width:
100%;height:
auto;}
#wrap{width:
100%;height:
auto;}
#column{float:
left;width:
60%;}
#column1{float:
left;width:
30%;}
#column2{float:
right;width:
30%;}
#column3{float:
right;width:
40%;}
.clear{clear:
both;}
三行三列
xhtml:
这里是顶行
这里是第一列
这里是第二列
这里是第三列
这里是底部一行
CSS:
#header{width:
100%;height:
auto;}
#wrap{width:
100%;height:
auto;}
#column{float:
left;width:
60%;}
#column1{float:
left;width:
30%;}
#column2{float:
right;width:
30%;}
#column3{float:
right;width:
40%;}
.clear{clear:
both;}
#footer{width:
100%;height:
auto;}
PS:
这里列出的是常用的例子，而非研究之用，对一每个盒子，我都没有设置margin,padding,boeder等属性，是因为我个人觉得，含有宽度定位的时候，最好不好用到他们，除非必不得已，因为如果不是这样的话，解决浏览器兼容问题，会让你头疼，而且产生一系列CSS代码，我觉得这样的效率和效果都不好！
3.CSS布局高级技巧
margin和padding总是有可能要用到，而产生的问题如何解决呢？
由于浏览器解释容器宽度的方法不同：
IE6.0FirefoxOpera等是
真实宽度=width+padding+border+margin
IE5.X
真实宽度=width-padding-border-margin
很明显，第一种下很完美的布局在第二种情况下后果是很凄惨的！
解决的方法是hack
div.content{
width:
400px;//这个是错误的width，所有浏览器都读到了
voice-family:
"\"}\"";//IE5.X/win忽略了"\"}\""后的内容
voice-family:
inherit;
width:
300px;//包括IE6/win在内的部分浏览器读到这句，新的数值（300px）覆盖掉了旧的
}
html>body.content{//html>body是CSS2的写法
width:
300px;//支持CSS2该写法的浏览器（非IE5）有幸读到了这一句
}
div.content{
width:
300px!
important;//这个是正确的width，大部分支持!
important标记的浏览器使用这里的数值
width（空格）/**/:
400px;//IE6/win不解析这句，所以IE6/win仍然认为width的值是300px；而IE5.X/win读到这句，新的数值（400px）覆盖掉了旧的，因为!
important标记对他们不起作用
}
html>body.content{//html>body是CSS2的写法
width:
300px;//支持CSS2该写法的浏览器有幸读到了这一句
}
使用CSS层叠样式表设置行间距
教程»css»文本属性»使用CSS层叠样式表设置行间距
主题
在html中使用css层叠样式表如何设置行间距?
我想让行之间有较大的间距，如何实现？
解释
属性:
线高度
用法:
line-height:
1cm;
line-height:
40px;
line-height:
40pt;
line-height:
200%;
定义:
这是用来设置行间距。
属性可以取以下的值。
a）cm:
行间距以厘米为单位来设置，例如：
1cm或者2cm等...
b）px:
行间距以像素为单位来设置，例如：
1px或者10px等...
c）pt:
行间距以点为单位来设置，例如：
1pt或者10pt等...
d）%:
行间距以百分数为单位来设置，例如：
200%或者500%等....如果是100%意思就是原来的行间距。
示例1:
RosyBrown;line-height:
1cm;">
测试线高度-1号线
测试线高度-2号线
结果:
测试线高度-1号线
测试线高度-2号线
示例2:
RosyBrown;line-height:
80px;">测试线高度
测试线高度-2号线
结果:
测试线高度
测试线高度-2号线
示例3:
RosyBrown;line-height:
20pt;">测试线高度
测试线高度-2号线
结果:
测试线高度
测试线高度-2号线
示例4:
RosyBrown;line-height:
200%;">测试线高度
测试线高度-2号线
结果:
测试线高度
测试线高度-2号线
如何设置div之间的水平间距:
建议:
尽可能的手写代码，可以有效的提高学习效率和深度。
设定两个div的水平间距可能是最基本的操作了，但是对于初学div+css布局者来说也并不是那么容易，下面就简单介绍一下。
先看一个代码实例:
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">//www.w3.org/1999/xhtml">
蚂蚁部落.parent{width:
200px;height:
200px;border:
1pxsolidgreen;overflow:
hidden;}.left{width:
100px;height:
50px;border:
1pxsolidblue;float:
left}.right{width:
80px;height:
50px;border:
1pxsolidred;float:
right;}