关于CSS 浮动及清除:网页设计员必备的两个工具

来源:互联网 责任编辑:栏目编辑 发表时间:2013-07-02 05:41 点击:

在本文中你将开始了解浮动与清除——现代网页设计员必备的两个工具。它们的用途很多,你可以利用它们来使文本环绕在图像周围,或者甚至用来创建多列布局。

本文结构如下:

    1. 浮动与清除为何而生?
    2. 一些乏味的理论
    3. 浮动是如何工作的?
    4. 细节点
    5. 多个浮动元素
    6. 浮动元素的边距
    7. 清除
    8. 浮动元素的包含
    9. 收缩包围
    10. 浮动元素的居中
    11. 漏洞!
    12. 总结

如果往一本标准的杂志里面看去,你会看到文字环绕在文章插图周围。CSS中的float属性就是为了在网页上实现这种布局样式而发明的。浮动一张图片——或者浮动任何其它页面元素——就是将其推到一侧,使文本显示在另一侧。清除某个浮动元素就是在必要时将其下压,以防止它紧挨着浮动元素显示。

尽管任何页面元素都可设置为浮动,涉及人员普遍都是用它来达到多列布局的效果,以免滥用表格标记。

一些乏味的理论

为了说明浮动是如何起作用的,你需要仔细研究并观察web浏览器是如何渲染HTML/CSS文件的。别担心,我会尽量简短一些。

每个可见的HTML元素都会生成一个用于渲染的盒模型。当你在电脑屏幕或移动电话上浏览该文件的时候,这些盒模型就会在屏幕上渲染出来。当你打印该文件的时候,这些盒模型就会在纸上渲染出来。当你使用屏幕阅读器的时候,这些盒模型的内容就会以听觉的方式渲染出来,就像语音一样。

就像HTML中有块级和内联元素一样,CSS中也有块级和内联盒模型。从定义上讲,块级元素生成块状盒模型,而内联元素生成内联盒模型。除了由页面 元素生成的盒模型之外,还有其它一些生成的盒模型,例如,为文件的文本内容而生成的盒模型。块状盒模型通常是按照元素在标记中的出现顺序从上到下排列的。 如果不采用CSS的话,区块元素是不能并排显示的。内联盒模型是水平排列的。direction属性决定了它们是从左到右还是从右到左排列(如果不特别指定的话,默认是从左到右排列)。

发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码:点击我更换图片
最新评论 更多>>

推荐热点

  • WordPress添加百度喜欢按钮小技巧
  • Wordpress 博客如何实现自定义Gravatar头像
  • 网站设计分析:建立良好的视觉层级
  • 创建不平衡的平衡:在网页设计中使用不对称设计
  • 7大主流B2C首页导航栏设计对比分析
  • Wordpress页面模板制作方法及使用
  • 网站设计与开发:11个在新终端上的网页设计趋势
  • css控制文字前的小图标
  • 网站改版案例分析:迅雷大全改版小结
网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
Copyright © 2008-2015 计算机技术学习交流网. 版权所有

豫ICP备11007008号-1