CSS中border和clear两大属性用法揭秘

开发 前端
CSS中每一个属性运用得当,就可以解决许多问题,这里向大家描述一下CSS中border和clear这两个属性的用法,通过对比你会发现两者的区别在哪里,相信你对本文介绍一定会感兴趣。

本文向大家描述一下CSS中border和clear属性的使用,通过border很容易就绘制出一条实线,并且减少了图片下载所占用的网络资源,使得页面载入速度变得更快,而对于clear属性,比如clear:both,表示清除左、右所有的浮动,他们呢都有给的特点和用途,请看下文详细介绍。

CSS中border和clear两大属性用法揭秘
 
这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性。

◆首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其实我们还有更简单的办法,只要在<td></td>中加入这么一段就可以了,你可以试试:

  1. <divstyledivstyle="border-bottom:1pxdashed#ccc"></div> 
  2.  

大家可以再次参考手册,然后你就能明白dashed、solid、dotted...等的作用,利用它们你可以制作出许多效果来,实线、虚线、双线、阴影线等等。

  1. <dividdivid="banner"></div> 
  2.  

以上代码便可以实现设计草图中的banner,在css.css中加入以下样式:

  1. #banner{  
  2. background:url(banner.jpg)030pxno-repeat;/*加入背景图片*/  
  3. width:730px;/*设定层的宽度*/  
  4. margin:auto;/*层居中*/  
  5. height:240px;/*设定高度*/  
  6. border-bottom:5pxsolid#EFEFEF;/*画一条浅灰色实线*/  
  7. clear:both/*清除浮动*/  
  8. }  
  9.  

 通过border很容易就绘制出一条实线了,并且减少了图片下载所占用的网络资源,使得页面载入速度变得更快。

◆另一个要说明的就是clear:both,表示清除左、右所有的浮动,在接下来的布局中我们还会用这个属性:clear:left/right。在这里添加clear:both是由于之前的ul、li元素设置了浮动,如果不清除则会影响banner层位置的设定。

  1. <dividdivid="pagebody"><!--页面主体--> 
  2. <dividdivid="sidebar"><!--侧边栏--> 
  3. </div> 
  4. <dividdivid="mainbody"><!--主体内容--> 
  5. </div> 
  6. </div> 
  7.  

以上是页面主体部分,我们在css.css中添加以下样式:

  1. #pagebody{  
  2. width:730px;/*设定宽度*/  
  3. margin:8pxauto;/*居中*/  
  4. }  
  5. #sidebar{  
  6. width:160px;/*设定宽度*/  
  7. text-align:left;/*文字左对齐*/  
  8. float:left;/*浮动居左*/  
  9. clear:left;/*不允许左侧存在浮动*/  
  10. overflow:hidden;/*超出宽度部分隐藏*/  
  11. }  
  12. #mainbody{  
  13. width:570px;  
  14. text-align:left;  
  15. float:right;/*浮动居右*/  
  16. clear:right;/*不允许右侧存在浮动*/  
  17. overflow:hidden  
  18. }  
  19.  

 为了可以查看到效果,建议在#sidebar和#mainbody中加入以下代码,预览完成后可以删除这段代码:

  1. border:1pxsolid#E00;  
  2. height:200px  
  3.  

保存预览效果,可以发现这两个层***的浮动,在达到了我们布局的要求,而两个层的实际宽度应该160+2(border)+570+2=734px,已经超出了父层的宽度,由于clear的原因,这两个层才不会出现错位的情况,这样可以使我们布局的页面不会因为内容太长(例如图片)而导致错位。

而之后添加的overflow:hidden则可以使内容太长(例如图片)的部份自动被隐藏。通常我们会看到一些网页在载入时,由于图片太大,导致布局被撑开,直到页面下载完成才恢复正常,通过添加overflow:hidden就可以解决这个问题。

CSS中每一个属性运用得当,就可以解决许多问题,或许它们与你在布局的页并没有太大的关系,但是你必须知道这些属性的作用,在遇到难题的时候,可以尝试使用这些属性去解决问题。

【编辑推荐】

  1. clear属性在CSS中的妙用
  2. JavaScript动态创建div属性和样式
  3. 14大CSS工具提高网页设计效率
  4. 五大CSS3新技术用法指导
  5. 解读DIV CSS网页布局中CSS无效十个原因

 

责任编辑:佚名 来源: blueidea.com
相关推荐

2010-08-16 10:18:53

DivCSS

2010-08-27 10:04:33

borderclearCSS

2010-08-26 10:33:27

CSSborder

2010-09-09 15:08:40

CSSfloatclear

2010-08-25 08:47:16

CSScellspacingcellpadding

2010-09-16 09:33:33

CSS displayCSS display

2010-08-26 09:58:01

CSS clear

2010-08-25 13:18:53

border-collCSS

2010-08-25 13:54:29

CSStop

2010-09-08 15:16:46

clearCSS

2010-09-09 16:54:05

CSSclear

2010-09-07 14:40:10

title属性Alt属性CSS

2010-08-25 16:03:26

CSSborder

2010-09-01 11:21:18

CSSpositionfloat

2010-10-09 09:26:59

Array数组JS

2010-09-14 17:27:12

DIV CSS定位

2010-09-06 11:11:31

CSS定位

2010-08-30 16:02:06

CSSclear

2010-08-24 15:11:24

PositionCSS

2010-08-25 08:57:33

marginpadding
点赞
收藏

51CTO技术栈公众号