css中的滚动条以及清浮动

发布时间:2017-2-27 21:39:50 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"css中的滚动条以及清浮动",主要涉及到css中的滚动条以及清浮动方面的内容,对于css中的滚动条以及清浮动感兴趣的同学可以参考一下。

  关于css的清浮动问题,很多时候当我们用了float:left或者right以后下个节点总是会出现在错误的位置。这时候我们要做的就是给前面运用float的父节点来清浮动。  当然清浮动有很多种方法,我这里所讲的是其中的.f-cb:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".";} .f-cb{zoom:1;}。。。。f-cb是父节点的class命名,display:block讲节点显示为块状元素,最主要的就是clear:both了。接下去的height,overflow,content都是用来将这个节点给隐藏掉。。    下文有用到overflow:scroll,他的作用是给超出节点高度宽度的内容添加滚动条,从而使页面不至于乱糟糟,当然同样的还有overflow:auto和overflow:hidden。前者的作用和scroll一样只是他只有一个滚动条,scroll则是有两个。而hidden的作用却是将超出节点的部分隐藏掉,虽然看不到,但是其还是真实存在的。 下面是随文的练习代码,看客莫笑<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>NEC:更好的CSS方案</title> <meta name="keywords" content=""/> <meta name="description" content=""/> <meta name="viewport" content="width=device-width"/> <link rel="stylesheet" href="css/style.css"/> <link rel="shortcut icon" href="img/favicon.ico"/> <link rel="apple-touch-icon" href="img/touchicon.png"/> <style type="text/css"> .g-hd,.g-mn,.g-ft{background-color: red} .g-hd{position:relative;float: left;margin-right: -200px;width: 200px} .g-ft{float: right;margin-left: -200px;width: 200px} .g-bd{margin: 0 210px 0 210px } .g-mn{float: left;width: 100%} .overflow{width:100px;height: 100px;overflow: scroll;float:left;margin-top: 20px} .f-cb:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".";} .f-cb{zoom:1;} </style> </head> <body> <div class="g-doc f-cb"> <div class="g-hd"> 左侧定宽200px </div> <div class="g-bd"> <div class="g-mn"> 中间自适应 </div> </div> <div class="g-ft"> 右边定宽200px </div> </div> <div class="overflow"> 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 </div> </body> </html>

上一篇:谁将拥有移动互联网的下一个机会?…
下一篇:HDOJ 4183 - Pahom on Water 拆点最大流

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。