用margin和overflow属性实现div间距的方法- CSS样式表

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 用margin和overflow属性实现div间距的方法

CSS样式表: CSS教程之css选择器、属性、值; CSS的color颜色使用说明; firefox css自动换行的实现方法; css支持标准的图片垂直居中; css+table 1px边框单元格; css之使table也能overflow:hidden; 几个常用经典的css技巧; css 跨浏览器实现float:center; css浏览器不兼容原因分析及解决办法; iframe transparent透明背景方法; 有衬线字体与无衬线字体比较; div+css在思路和流程上实现结构与表现的分离分析; css教程 css和document; 层盖住下拉列表框问题解决方案; css样式之区分input是按钮还是文本框的方法; CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]; 谈谈网页设计中的字体应用Font Set; XHTML标签的自关闭写法的坏处分析; 顶级经典常用的CSS属性收集整理; 10条影响CSS渲染速度的写法与使用建议

No. « ‹ 48 49 50 51 › »

技术文章搜索

关键字

CSS样式表中的用margin和overflow属性实现div间距的方法

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 441 ::

收藏到网摘: n/a

h1标签的使用技巧非常漂亮的css星级效果总结

通常我们在制作上图的时候，会分别给四个div加上不同的css属性，来实现中间间隔。但我们更希望的是不需要对html标签做标识，直接能通过css实现，今天在论坛上小志提出了一个很不错的解决方案。使用overflow:hidden属性。或许很多人已经是这样用了，我没用过，觉得耳目一新。呵呵。其实道理很简单，我们按照正常的设置li的margin-right、margin-bottom属性，这样的结果自然会比我们期望的要多出来右边和下方的，这个时候我们通过ul的父级来设置width/height属性，然后overflow:hidden把多余的隐藏掉。好方法，呵呵！
解决方法请看图：
overflow实现div间距

点击运行可以看到效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-CN" /> <meta name="robots" content="all" /> <meta name="author" content="" /> <meta name="Copyright" content="CopyRight 2007" /> <meta name="keywords" content="CSS,overflow属性" /> <meta name="description" content="巧用overflow:hidden解决中间间隔问题" /> <title>巧用overflow:hidden解决中间间隔问题</title> <style type="text/css"> *{margin:0;padding:0;} body{text-align:center;background:#CCC;} ul{list-style:none;} .main {background:white;height:800px;width:597px;margin:0 auto;} .box {width:595px;height:205px;margin:20px auto;overflow:hidden;background:white;} .box ul {width:600px;height:210px;} .box li {float:left;margin-right:5px;margin-bottom:5px;} .box div {background:white;background:#f7f7f7;width:293px;height:98px;border:1px solid #CCC} .box h2 {background:#9CC;text-align:left;text-indent:10px;font-size:12px;height:24px;line-height:24px;} </style> </head> <body> <div class="main"> <h1>巧用overflow:hidden解决中间间隔问题</h1> <div class="box"> <ul> <li> <div> <h2>Title</h2> Content </div> </li> <li> <div> <h2>Title</h2> Content </div> </li> <li> <div> <h2>Title</h2> Content </div> </li> <li> <div> <h2>Title</h2> Content </div> </li> </ul> </div> </div>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

h1标签的使用技巧非常漂亮的css星级效果总结

CSS样式表 中的 用margin和overflow属性实现div间距的方法

评论 (0) All

CSS样式表中的用margin和overflow属性实现div间距的方法