奇妙的CSS之布局与定位

关于布局与定位是Web前端开发里非常基础而又重要的部分。介绍相关知识的文章,很容易就可以找到。虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有时候很令人苦恼。下面根据我的学习和编程经验来谈一下这方面的要点。

要想完美的实现自己的布局,那首先一定要把盒模型搞清楚。盒模型由内容区、内边距(padding)、边框(border)和外边距(margin)构成。这些属性值都是可选的,相互之间没有依赖关系,但在具体的布局时会需要设置某些属性。我们平时设置的宽度和高度其实都是内容区的大小,而不是整个元素的大小。详细情况如下:

那么既然了解了盒模型,我们怎么让元素按照我们的意愿布局呢?接下来就来探讨一下这个问题。

其实浏览器在页面上摆放HTML元素时,它是采用文档流(flow)来实现的。就像瀑布一样从最上面的元素开始,自上而下进行元素显示,遇到块元素自动换行,默认每个块元素会占浏览器窗口的整个宽度。而内联元素会在水平方向上自左向右显示,总体上从左上方流向右下方,在垂直方向上扩展外围元素。

关于流和盒模型我们还需要了解,浏览器在并排显示两个内联元素时,这两个原时间的外边距是不会重合的,二者边框之间的距离是两者外边距之和;当两个块元素上下放置时,它们挨着的外边距会折叠起来,显示出来的外边距就是二者外边距里的最大值。当元素嵌套时,也会发生外边距折叠问题,其只会合并上边距和下边距,左右外边距并不合并。需要注意的是,如果外面的元素有一个边框,那么这两个元素的外边距就不会碰到一起,也就不可能发生折叠。我们只需要记住:只要两个垂直边距碰到一起,它们就会折叠,即使是嵌套起来的也不例外。浮动元素由于已经不在文档流之中,它们的外边距是不会折叠的。

关于浮动我们需要了解,浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。要想使元素浮动,必须为元素设置一个宽度(width)。虽然浮动元素不是文档流之中,但是它浮动后所处的位置依然是在浮动之前的水平方向上。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样,下面的元素填补原来的位置。有些元素会在浮动元素的下方,但是这些元素的内容并不一定会被浮动的元素所遮盖,对内联元素进行定位时,这些元素会考虑浮动元素的边界,会围绕着浮动元素放置。也可以把浮动元素想象成是被块元素忽略的元素,而内联元素会关注浮动元素的。

CSS 有三种基本的定位机制:普通流、浮动和绝对定位。除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。 position 属性:

static:元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。如果不为元素指定定位方式,会采用默认的静态定位方式。如果是静态定位,那么元素就放在正常的文档流中,由浏览器完全决定元素的摆放。虽然你可以用float来浮动元素,但最终还是由浏览器决定元素的最终放置。

relative:元素框偏移某个距离。相对定位的元素会正常的流入页面,不过在页面上要进行偏移。

absolute:元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

绝对定位(absolute),虽然也是从文档流中删除,但它与浮动是不同的,它不会再和原来位置保持水平,而是由top,right,bottom,left等属性值确定,这些值都是相对于其父元素的。而且流中的元素无论是块元素还是内联元素都不再关注绝对定位的元素,它们完全不知道页面上有绝对定位元素的存在。所以在布局时为了不被绝对定位元素遮盖文档流中的元素,最好给下面的元素设置恰当的外边距(margin)。绝对定位元素还有一个很意思的特性,那就是可以分层放置,可以用z-index属性来分层放置元素,这会指定它在一个虚拟z轴(垂直于页面)上的位置,而且越靠近你的元素z-index值越大。当然z-index属性并不是绝对定位所专属的,相对定位和固定定位的元素也有这个属性。绝对定位时并不需要对元素设置宽度(width),如果不指定宽度,则块元素会默认的占浏览器的整个宽度(包含margin-left和margin-right,并不仅仅是内容宽度width)。

      fixed:元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。也就是说,固定定位会把元素放在相对于浏览器窗口的一个位置上(不是相对于页面,html),固定定位的元素是不会随页面滚动而移动的。
      
      上面已经介绍了布局定位需要用到的知识,那么我们就可以按照自己的需要实现布局啦!使用HTML和CSS建立布局有很多种可以使用的方法,比如浮动布局、凝胶布局、绝对布局和表格显示布局等。要想掌握布局与定位还需要自己多多实践,只有在编程中才能获得提高。先写这么多吧,以后有时间的话再把实例补充进来……
时间: 2024-10-29 19:07:15

奇妙的CSS之布局与定位的相关文章

《CSS网站布局实录》学习笔记(三)

第三章 CSS网页布局与定位 3.1 div 几乎XHTML中的任何标签都可以用于浮动与定位,而div首当其冲.对于其他标签而言,往往有它自身存在的目的,而div元素存在的目的就是为了浮动与定位. 3.1.1 div是什么 div是XHTML中制定的.专门用于布局设计的容器对象.在传统表格式布局中,之所以能够进行页面的排版布局设计,完全依赖于表格对象table.如今,接触另一种布局方式--CSS布局.div正是这种布局方式的核心对象.仅从div的使用上说,做一个简单的布局只需要依赖两样东西:di

《css网站布局实录》(李超)——读书札记

1.web表现层技术 2.HTML链接设计思想 3.对信息进行合理的分析.分类与处理来创造商业价值. 4.头部描述浏览器所需信息,主体包含所需要展现的具体内容. 5.HTML(XHTML)XML 6.良好的css代码设计可以使代码之间产生继承及重载关系,能够达到最大限度地代码重用,从而降低代码量及维护成本. 7.由于不同品牌浏览器及不同版本之间的渲染方式不同,各自解析css也存在一些差异. 8.css hack可以简单地翻译为css黑客程序,它是一个被设计者们习惯使用的名称.它表现一种类似于欺骗

《CSS网站布局实录》读书笔记

CSS入门与基础不二之选,内容十分全面,实体书已不印刷,只能下载电子版 书的背景: 国内第一本web标准的CSS布局书,2006年9月第一版,作者李超. 环境背景: 当时主流浏览器IE6与Firefox,兼容浏览器IE5/4/Opera/Mozilla,web2.0标准是XHTML1.0,为XML过渡而生,页面编码格式gb2312,使用工具Dreamweaver可视化开发. 基础篇之XHTML: HTML结构包括头部(head)主体(body)两大部分.头部描述浏览器所需信息如<title>无

css+div网页设计(二)--布局与定位

在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子模型的范围包括 margin.border.padding.content. 需要指出的一点是,在ie中与firefox中盒子模型表示略有不同: IE 盒子模型的 content 部分包含了 border 和 pading. 而firefox中的盒子模型的content部分不包含border和pad

认识CSS中布局之文档流、浮动、定位以及叠放次序

前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流 普通流又被称为文档流或者标准流,普通流是指网页内标签元素正常情况下会按照自上而下,自左向右按顺序排列.即块级元素独占一行,多个块级元素存在会自上而下顺序排列,多个行内元素会共占一行,自左向右排列. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 &l

css中的几种控制页面布局的定位机制(相对定位与绝对定位)

  CSS中几种控制页面布局的定位机制 对于web的初学者来说,CSS中的几种定位方式经常让人摸不着头脑,从而达不到想要的页面布局效果,趁有时间就好好总结一下CSS中的几种定位方式,也当自己再巩固一下. CSS中包含三种控制页面布局的定位机制:普通流.相对定位.绝对定位.在CSS中通过position属性表明定位机制.此外还可以使用float属性来让元素浮动 普通流 相应语法(默认) position:static; 所谓的普通流就是根据块级元素以及内联元素自身的属性来进行布局,而不人为的进行控

CSS原生布局方式

前言 网页原生布局的方法其实网上有很多,大概为Flow(流动布局模型).Float(浮动布局模型).Layer(层级布局模型).<!--more--> Flow布局 流动布局模型其实就是默认的网页布局模式.也就是说网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的.流动布局将会有两个比较典型的特征,第一,块级元素都会在所处的最近父级容器元素内自上而下按顺序垂直顺延分布,因为在默认状态下,块级元素的宽度都是100%(即父级元素宽度的100%).实际上,块状元素都会以行的形式占据位

&lt;转载&gt;div+css布局教程之div+css常见布局结构定义

在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索框.页脚(版权和有关法律声明). 通常采用DIV元素来将这些结构定义出来,类似这样: <div id="Container"></div> 页面层容器 <div id="header"></div> 页面头部 <di

css基础css页面布局基础

样式可以在HTML中定义,也可以在一个单独的外部样式文件中定义.样式可以分为嵌入式样式表,外部样式表,内联样式表. 外部样式表:首先要建一个后缀为.css的样式表文件,然后在web文档中的<head>段使用<link>标记,这样就可以将一个外部样式表文件链接到文档中. 语法:<link rel="stylesheet" type="text/css" href="样式表的url"/> 嵌入式样式表:在web文档