• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > css的border和clear属性使用方法和示例

css的border和clear属性使用方法和示例

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含css,border,clear属性等相关知识,佚名 希望在学习及工作中可以帮助到您

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

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

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

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

而之后添加的overflow:hidden则可以使内容太长(例如图片)的部份自动被隐藏。通常我们会看到一些网页在载入时,由于图片太大,导致布局被撑开,直到页面下载完成才恢复正常,通过添加overflow:hidden就可以解决这个问题。
CSS中每一个属性运用得当,就可以解决许多问题,或许它们与你在布局的页并没有太大的关系,但是你必须知道这些属性的作用,在遇到难题的时候,可以尝试使用这些属性去解决问题。

您可能想查找下面的文章:

  • css小技巧
  • 各大网站CSS初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-06CSS3实现多背景展示效果通过CSS3定位多张背景
  • 2017-08-06框架边框与页面内容的垂直边距marginheight
  • 2017-08-06css3弹性盒模型实例介绍
  • 2017-08-06CSS 制作网页导航条(下)
  • 2017-08-06使用CSS禁止textarea调整大小功能的方法
  • 2017-08-06input 按钮背景在IE6 IE7中不显示的解决方法
  • 2017-08-06css空白边叠加的几种情况介绍
  • 2017-08-06inline-block空隙之css letter-spacing与字体大小/字体关系数据表
  • 2017-08-06css网页布局中文字排版的属性和用法
  • 2017-08-06css3设置box-pack和box-align让div里面的元素垂直居中

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS expression 隔行换色效果
    • css margin属性深入解析
    • CSS实现的一闪而过的图片闪光效果
    • css浮动中避免包含元素高度为0的4种解决方法
    • CSS绝对定位元素left设为50%实现水平居中
    • ASP.NET性能优化之负载均衡的方法
    • 前端必须要掌握的几个CSS3的属性详解
    • CSS 表单元素不继承body的字体属性
    • 使用CSS3来实现滚动视差效果的教程
    • CSS实现标题文字过长部分显示省略号的方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有