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等属性在正常文档流中偏移位置
它来实现一行两列的例子
#wrap{position:
relative;/*相对定位*/width:
770px;}
#column1{position:
absolute;top:
0;left:
0;width:
300px;}
#column2{position:
0;right:
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:
center;}
#content-top{margin-left:
auto;width:
#content-end{margin-left:
auto;margin-right:
400px; }
三行一列
0px;padding:
#content-top{ margin-left:
#content-mid{margin-left:
两列
单行两列
#bodycenter{width:
700px;margin-right:
auto;margin-left:
auto;overflow:
auto; }
#bodycenter#dv1{float:
280px;}
#bodycenter#dv2{float:
410px;}
两行两列
#header{ width:
三行两列
#bodycenter#dv1{ float:
right; width:
#footer{ width:
700px; margin-right:
auto; overflow:
三列
单行三列
绝对定位
#left{position:
0px; left:
0px;width:
120px; }
#middle{margin:
20px190px20px190px;}
#right{position:
0px;right:
0px; width:
120px;}
float定位
这里是第三列
#column{float:
30%;}
#column3{float:
float定位二
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:
两行三列
这里是顶行
#header{width:
三行三列
这里是底部一行
#footer{width:
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忽略了"\"}\""后的内容
inherit;
300px;//包括IE6/win在内的部分浏览器读到这句,新的数值(300px)覆盖掉了旧的
}
html>body.content{//html>body是CSS2的写法
300px;//支持CSS2该写法的浏览器(非IE5)有幸读到了这一句
300px!
important;//这个是正确的width,大部分支持!
important标记的浏览器使用这里的数值
width(空格)/**/:
400px;//IE6/win不解析这句,所以IE6/win仍然认为width的值是300px;而IE5.X/win读到这句,新的数值(400px)覆盖掉了旧的,因为!
important标记对他们不起作用
300px;//支持CSS2该写法的浏览器有幸读到了这一句
使用CSS层叠样式表设置行间距
教程»css»文本属性»使用CSS层叠样式表设置行间距
主题
在html中使用css层叠样式表如何设置行间距?
我想让行之间有较大的间距,如何实现?
解释
属性:
线高度
用法:
line-height:
1cm;
40px;
40pt;
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;}
RosyBrown;line-height:
1cm;">
测试线高度-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;}
80px;">测试线高度
测试线高度
示例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;}
20pt;">测试线高度
示例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;}
200%;">测试线高度
如何设置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:
//www.w3.org/1999/xhtml">
200px;height:
200px;border:
1pxsolidgreen;overflow:
hidden;}.left{width:
100px;height:
50px;border:
1pxsolidblue;float:
left}.right{width:
80px;height:
1pxsolidred;float:
right;}