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

以前也没有做过网页布局方面的工作。上网上找类似的例子，看的是一头雾水。最终决定自学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可取的值有：

　　　　display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group 等等。

　　　　但最重要的就是前三个。

　　　　　　· 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的更多相关文章

  1. CSS布局的三种机制

    浮动元素之间没有缝隙,这和行内块还是不一样的,有点区别的! 2) 浮动元素与兄弟盒子之间的关系 注意:解决浮动的四种办法,后三种都是针对浮动元素的父元素的.

  2. CSS传统布局之display属性+float属性+position属性

    这三个属性是传统网页布局中经常用到的属性. 读这篇文章之前,希望你对css布局模型已经有了一定的了解.因为本文的三个属性是和css三个布局模型紧密联系在一起的.因此,如若你并不了解,我推荐你先看一下c ...

  3. CSS 布局:40个教程、技巧、例子和最佳实践

    前言: 布局是WEB开发一个重要的课题,进入XHTML/CSS后,使用TABLE布局的方式逐渐淡出,CSS布局以众多优点成为主流,本文将介绍40个基于CSS的web布局的资源和教程.文章的出处在htt ...

  4. css 布局方式

    布局方式 1 布局:设置元素在网页中的排列方式及显示效果 2 分类: 1 标准流布局(文档流,普通流,静态流) 是默认的布局方式 特点:将元素按照书写顺序及元素类型,从上至下,从左至右排列 2 浮动布 ...

  5. CSS布局（下）

    1.CSS布局之浮动 1.1.float之图文混排 float的意思就是元素漂浮在上层. 可以直接通过设置float属性实现图文混排,代码如下: <div style="width:2 ...

  6. CSS布局：Float布局过程与老生常谈的三栏布局

    原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...

  7. 转：CSS布局：Float布局过程与老生常谈的三栏布局

    使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...

  8. CSS布局 ——从display，position， float属性谈起(转)

    CSS布局 ——从display,position, float属性谈起   页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了 ...

  9. DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度

    一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...

随机推荐

  1. ASP.NET MVC 网站开发总结（一）

    历经一个多月的努力,工作室的门户网站(http://www.wingstudio.org)终于结束了内部公测. 仔细算一下,大概把网站开发出1.0版本大概用了一个月的时间(主要是利用课余时间),其后大 ...

  2. jquery基本选择器(.class选择器)

    //通过class属性值匹配元素<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  3. 使用MySQL Workbench导出MySQL数据库关系图

    1. 点击MySQL Workbench中间Data Modeling下的Create EER Model From Existing Database: 2. 在Stored Connection中 ...

  4. GJM ：用JIRA管理你的项目（二）JIRA语言包支持及插件支持　［转载］

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

  5. winform 固定splitContainer某一部分大小

    处于布局省事考虑,通常会用splitcontainer进行总体的布局,例如: 默认情况下,splitcontainer在运行时会根据上下文自动调整每个panel的大小,但大部分情况下,其实我们希望左边 ...

  6. 【我的产品观】开发wangEditor一年总结

    1. 引言 标题说是一周年,其实是不是正好是一周年,我也忘记了,光从github的提交记录看也不准确.印象中觉得,如果要论想法,到现在一年多了,如果要论实际写代码,可能差不多正好一年. 从8月底在济南 ...

  7. 20款时尚的 WordPress 简洁主题【免费下载】

    在这篇文章中,我们收集了20款时尚的 WordPress 简洁模板.WordPress 是最流行的博客系统,插件众多,易于扩充功能.安装和使用都非常方便,而且有许多第三方开发的免费模板,安装方式简单易 ...

  8. jQuery原型属性constructor,selector,length,jquery和原型方法size,get,toArray源码分析

    首先看一下在jQuery1.7.1中定义的原型属性和方法有哪些? init方法作为实际的构造函数已经详细分析过了,需要了解可以参考http://www.cnblogs.com/yy-hh/p/4492 ...

  9. 捕获当前事件作用的对象event.target和event.srcElement

    语法: //返回事件的目标节点(触发该事件的节点). event.target //FF,Chrome event.srcElement //IE 栗子: var oDiv=document.getE ...

  10. AE常见接口之间的关系（较笼统）+arcgis常见概念

    常见的接口有如下关系 IworkspaceFactory-------------->IworkSpace------------------>IfeatureWorkSpace ---- ...