CSS：布局的三个关键属性：float、position、display

　　最近在出差，就我一个在这里。客户要做几个页面，涉及到了页面的布局问题，没办法自己得做了。然后就遇到了一些问题。页面不论怎么都不能按照设想的布局。

以前也没有做过网页布局方面的工作。上网上找类似的例子，看的是一头雾水。最终决定自学CSS。

　　在网上下载了一本电子书《CSS权威指南》第三版。用了3个钟头看完了这本书。看的时候专拣不知道的看。譬如CSS选择器（这些了，以前就知道，并且使用jQuery就是用的CSS的选择器）、盒子模型了等，所以这些就不看的。另外在学习时，根据CSS参考手册（下载网址：http://css.doyoe.com/）编写样式，再使用360浏览器（或者firebug）进行调试，很快就能明白其中奥妙。

　　这3个钟头中，对CSS有了大致的了解，也明白了CSS布局是怎么回事了。下面我将影响CSS布局的3个重要的属性说说：

　　（1）display 。在学习这个属性前，要明白CSS把元素主要分为两大类：块元素、行内元素。

　　　　常用的块元素主要有:<div>、<p>、<ul>、<li>、<h1..7>等。换行显示。

　　　　常用的行内元素有：<span>、<a>等。在同一行显示。

　　　　块级元素和行内元素是可以相互转换的，就是通过display属性完成的。

　　　　display可取的值有：

　　　　但最重要的就是前三个。

　　　　　　· none 表示不显示。

　　　　　　· inline 表示作为行内元素显示。譬如<div>是个块元素，使用了这个属性值，就将和<span>一样了。

　　　　　　· block 表示作为块元素显示。譬如<span>是行内元素，使用这个属性值，就和<p>一样了。

　（2）float 浮动

　　　　在学习float前，得先明白什么是文档流。浏览器在解析html文档内容（这里不说css和javascript、是说单纯的html文档）时，是一流的方式解析的，反映到浏览器上，就是按照从左到右、从上到下的方式显示的。

　　　　使用float属性后，元素会脱离文档流，按照指定的方式进行浮动。

　　　　脱离文档流后，该元素后面的元素就会前移。占有该元素的位置，如果该与元素前的元素也浮动了，就会继续前移。

　　　　float有left和right两种浮动方式。

　　　（3）position 定位

　　　　使用position属性后，元素也会脱离文档流，按照指定的方式进行定位。

　　　　position：static | relative | absolute | fixed 默认是static。

　　　　relative是相对于祖先元素中，最近的是用position定位的元素，然后依据相对位置进行定位。

　　　　absolute是相对于祖先元素中，最近的是用position定位的元素,然后依据相对位置进行定位。

　　　　fixed是相对于<body>，我们看到的悬浮，就是使用这个值做出的效果。

理解了这3个属性后，我就写出来了一个5级的菜单，按照我希望的方式显示。然后顺利的完成了客户的几个页面。

CSS：布局的三个关键属性：float、position、display相关推荐

CSS布局的三个关键属性：float、position、display
最近在出差,就我一个在这里.客户要做几个页面,涉及到了页面的布局问题,没办法自己得做了.然后就遇到了一些问题.页面不论怎么都不能按照设想的布局. 以前也没有做过网页布局方面的工作.上网上找类似的例子, ...
【HTML＋CSS网页设计与布局从入门到精通】第14章-float/position/display属性
目录 float属性 float:left float:left-例2 float:left-例3 float:right; 对比father p{clear:right;} 例1 例2 .fathe ...
css学习记录三：文本属性
css学习记录三:CSS文本属性一.文本属性的作用二.文本颜色三.文本对齐四.装饰文本五.文本缩进六.行间距一.文本属性的作用 CSSS Text(文本)属性可定义文本的外观,比如文本的 ...
CSS布局的三种方式
绝对定位绝对定位: 属性:position 值:absolute <style> p.abs{position: absolute;left: 150px;top: 50px; }& ...
css 布局两行, 三行等高
关键在于添加 overflow: hidden; padding-bottom:9999px; margin-bottom:-9999px; 两行: <!DOCTYPE html PUBLIC ...
【转贴】没有div没有float没有clear没有hack的超强CSS布局
[转贴]没有div没有float没有clear没有hack的超强CSS布局原贴地址:http://parandroid.com/no-float-css-layout/ CSS + XHTML 有多 ...
CSS 布局:40个教程、技巧、例子和最佳实践
前言: 布局是WEB开发一个重要的课题,进入XHTML/CSS后,使用TABLE布局的方式逐渐淡出,CSS布局以众多优点成为主流,本文将介绍40个基于CSS的web布局的资源和教程.文章的出处在htt ...
html让页面两边都留点空位,标记语言——CSS布局_HTML/Xhtml_网页制作
Chapter 12 CSS布局本书到此为止,讨论的主要是页面内部元素,也就是内容,但是大结构怎么办?长久以来,设计者都依赖表格进行分栏布局,常常在表格之内嵌套其点击这里返回脚本之家 HTML教程 ...
前端笔记（6）css布局机制，浮动，清除浮动，图片格式，ps切片工具及插件
css样式表/层叠样式表(4) css布局的三种机制浮动浮动(float)的扩展清除浮动额外标签法(隔墙法) 父级添加overflow属性方法使用after伪元素清除浮动使用双伪元素清除浮 ...

CSS：布局的三个关键属性：float、position、display

CSS：布局的三个关键属性：float、position、display相关推荐

最新文章

热门文章