一、display属性
display属性的作用是规定元素以什么方式渲染。常用的值如下:
none:不被渲染
block:以块级元素渲染
inline:以内联元素渲染
inline-block:以行内块渲染
inherit:继承父级容器的渲染方式
1.元素渲染类型
浏览器对每个html元素有默认的渲染类型,默认为块级元素的主要有:div、form、h1-h6、hr、noframes、noscript、ol、p、pre、table、ul;默认为内联元素的主要有:b、i、u、br、input、select、label、span、em、strong、sub、sup、textarea。块和内联的主要区别,可以简单理解为渲染块的时候先换行,渲染完毕也换行;渲染内联元素不换行。下面例子说明了块级元素div和内联元素span的显示区别:
<style>
*{margin:5px;padding:5px;}
#box1{border:1px solid #036;}
#box2{border:1px solid #036; }
#box3{border:1px solid #036;}
#span1{border:1px solid #903;}
</style>
<div id="box1">box1box1box1box1</div>
<div id="box2">box2box2box2box2</div>
<div id="box3">box3box3box3box3</div>
inner1inner1inner1inner1inner1<span id="span1">span1span1span1span1</span>inner2inner2inner2inner2inner2
2.display:none与visibility:hidden;
从字面上看,display:none的意思是将渲染风格设置为无,visibility:hidden的意思是将可见性设为隐藏。似乎都是让一个元素不可见,区别却不能忽视。下图是将在box2中添加display:none的效果:
可以看出,box2已经被移除了文档流,浏览器渲染到box2的时候直接将其忽略,就好像它根本没有在页面中出现一样。再看visibility:hidden;的效果:
浏览器visibility:hidden;时,其实也渲染了这个元素,并且计算出它占用的问题,box2在文档流中是存在的,只不过浏览器为它留了白,相当于把不透明度设置为0。这两种隐藏元素的方式区别很明显了。而且对于内联元素,这种区别是一样的。如下图:
3.display:block与display:inline
显然如果设置的display类型与浏览器默认的一致,就没有什么必要了。比如在div的样式中添加display:block,这样完全没有必要。那么block元素和inline元素,除了换行不换行之外,还有什么区别呢?
答案是元素尺寸的计算。inline元素,根据其内容的尺寸计算宽度高度,只保证能容下内容,对inline元素设置width、height是无效的;block元素,尺寸依照width、height设定;如果没有认为设置尺寸,width上填充满父级元素,height上只保证能容下内容。换句话说,一个元素如果出现滚动条,那它便然是block的,而且它设置了height属性;否则它的高度是自适应的,永远不会在它内部出现滚动条。下面是这段说明的示例:
<style>
*{margin:5px;padding:5px;}
#box1{
border:1pxsolid #036;
display:inline;
width:500px;
height:300px;
}
#box2{
border:1pxsolid #036;
width:500px;
height:300px;
}
#box3{border:1pxsolid #036;}
#span1{border:1pxsolid #903;}
</style>
<div id="box1">box1box1box1box1</div>
<div id="box2">box2box2box2box2</div>
<div id="box3">box3box3box3box3</div>
4.display:inline-block
这种设置综合了inline和block的特点,既属于内联、又能设置width和height。值得一提的是,很多人说<img>是内联元素,其实是错误的,<img>是inline-block元素,而且img与其他元素的base-line是不同的,这里不再细展开。使用inline-block能做出很多东西,比如把li改成导航条:
<style>
.menu{
margin:0px;
padding:0px;
}
.menuli{
display:inline-block;
width:100px;
height:30px;
line-height:30px;
text-align:center;
border-top:1pxsolid #09C;
border-bottom:1pxsolid #09C;
border-left:1pxsolid #09C;
font-weight:bold;
font-family:Verdana,Geneva, sans-serif;
}
.menuli:last-child{
border-right:1pxsolid #09C;
}
.menuli:hover{
background-color:#099;
color:#FFF;
}
</style>
<ul class="menu"><li>menu1</li><li>menu2</li><li>menu3</li><li>menu4</li><li>menu5</li></ul>
二、float属性
1.关于浮动
浮动在css中比较奇葩,它的出现是为了把某些内联元素飘出来,然后让其他内联元素围在漂浮元素的周围,就类似于office中的图片环绕。浮动只能设置成left或right,而且浮动一般都是对可以设置尺寸的元素操作,比如<img>、block、inline-block。为了方便演示,我们把display中的例子略加修改,让div中的内容多一些,并对调box2和box3的顺序:
<style>
*{margin:0px;padding:0px;}
div{word-break:break-all;border:1px solid #036;}
#box1{
background-color:#0CF;
}
#box2{
background-color:#F90;
}
#box3{
background-color:#09F;
}
</style>
2.浮动的围绕
先看一个元素浮动后会出现什么效果,在box1中添加float:left。
、
可以看出,box1浮动后,脱离了文档流,box3取代了它的位置,图上的效果,看上去很像box1漂浮在box3上面,但其实不是,我们再把box1的width和height分别设置成200px和100px:
这回比较明显了,box1自己躺在左边,box3和box2围绕着它渲染;还嫌不明显?我们再把box3设置成float:left;width:200px;height:100px;,然后看下面效果:
浮动出来的元素,从左上角开始横向排列,排不下就换行。这些元素不在文档流中,他们后面的非浮动元素计算位置时,是接在他们前面非浮动元素后面的。
3.浮动高级应用
(1)两栏布局,要求左侧(右侧)固定宽度为200,另一侧随窗口变动。为了显示浮动的特性,我们做右侧固定、左侧自适应的例子。文档结构如下:
<div id="rightSide"></div>
<div id="mainContent"></div>
添加CSS如下:
<style>
*{margin:0px;}
#rightSide{
float:right;
width:200px;
height:30px;
background-color:#09F;
}
#mainContent{
margin-right:200px;
height:30px;
background-color:#CC6;
}
</style>
效果图如下:
(2)三栏布局,要求左右两栏各200宽,中间栏自适应,文档结构如下:
<div id="leftSide"></div>
<div id="rightSide"></div>
<div id="mainContent"></div>
添加CSS如下:
<style>
*{margin:0px;}
#leftSide{
float:left;
width:200px;
height:30px;
background-color:#09F;
}
#rightSide{
float:right;
width:200px;
height:30px;
background-color:#09F;
}
#mainContent{
margin-left:200px;
margin-right:200px;
height:30px;
background-color:#CC6;
}
</style>
效果如下:
(3)导航布局,利用CSS将li做成横向导航(这里不使用display:inline-block的方法),文档结构如下:
<ul class="menu">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
添加CSS如下:
<style>
.menu{
margin:0px;
padding:0px;
}
.menuli{
float:left;
width:120px;
height:30px;
line-height:30px;
list-style-type:none;
text-align:center;
border-top:1pxsolid #09C;
border-bottom:1pxsolid #09C;
border-left:1pxsolid #09C;
font-weight:bold;
font-family:Verdana,Geneva, sans-serif;
}
.menuli:last-child{
border-right:1pxsolid #09C;
}
.menuli:hover{
background-color:#099;
color:#FFF;
}
</style>
显示效果如下:
4.浮动的争议
对浮动的应用,开发者中保持着两个流派:一方喜欢用浮动处理布局;一方反对用浮动处理布局。
我个人倾向于后者。毕竟浮动从诞生起,就是为环绕设计的,也只有环绕这个技能,通过其他方式不能实现。至于上面的两栏、三栏之类,都可以用其他方式实现。使用浮动处理布局,容易给人无解,尤其是其他开发人员。
国外很有名的互联网公司,比如twitter、facebook,布局也还在用table,这不是落后,而是让开发人员通过html结构,就能在脑海里反映出页面的轮廓,提高维护效率。而且,CSS主要还是做外观样式,布局方便的东西,交给html做更好一些,毕竟CSS有多页面通用这么一说。一个前端开发人员,如果想对页面进行重构,操作html总比操作html+css效率高。而且即便CSS出现问题没下载到浏览器,仅靠html信息布局,页面也不至于太乱,只是不太美观而已。
当然,使用float等特殊css属性布局也有html布局比不了的好处,比如上面的三栏布局,如果想交换左右两栏位置,只要在css中改变他们的float方向即可,十分方便。
总之,到底是html偏布局、CSS偏外观;还是html什么都不管,CSS既负责布局又负责外观,目前没有权威说法。两种方式也各有利弊,针对于具体项目而定。如果项目页面不多,完全可以把外观集成到CSS中,并通过不同CSS做出几套布局方案,给用户一种新鲜感;如果页面很多,用html布局更好一些,CSS只负责外观,各页面通用一个CSS文件,节省服务器开销。