CSS中常见布局介绍
1开篇
内容决定形式，不同的应用场景需要不同的展现形式。布局最终的目的是为了让内容能够更加灵活和便捷的呈现在最终用户的眼前。
用户只关心他是否能从不同的设备上能够访问到你的内容，而不会关心你通过使用什么技术手段能够达到这种效果。
2布局的目的
页面的布局方式是页面构成的主骨架。
通用布局的目的主要是提供一种抽象，指导设计和开发人员都能够按照某种规范来简化设计和开发的过程。
3常见的布局方式
以下描述的一些布局方式并不是完全互斥的，不同的布局之间可以互相嵌套。并且也没有一种布局方式适用于所有的应用场景。具体采用哪种布局方式还需要看实际需求、应用场景以及实现难易程度。
以下针对一些常见的布局方式进行描述：
3.1固宽布局
固宽布局比较简单，这种布局有一个设置了固定宽度的外包裹，里面的各个模块也是固定宽度而非百分比。重要的是容器（外包裹）元素是设置为不能移动的。一般为适应主流的分辨率，设置固定宽度为950px左右。如果小于这个宽度，则会出现滚动条。如https://www.360docs.net/doc/cd8316817.html,，它为固定宽度为980px。
上图展示的是一个固定宽度布局的基本轮廓，三列，分别为520,200以及200，每列的间距为20px
优点：
1.设计师所设计的就是最终用户所看到的
2.设计更加简单，并且更加容易定制
3.在所有浏览器中宽度一样，所以不会受到图片、表单、视频和其他固定宽度内容的
影响
4.不需要min-width、max-width等属性，因为有些浏览器并不支持这些属性
5.即使需要兼容800×600这么小的分辨率，网页的主体内容仍然有足够的宽度易于阅
读
缺点：
1.对于使用高分辨率的用户，固定宽度布局会留下很大的空白。因此出现了“黄金比
例”，“三分定律”，综合平衡和其他设计原则
2.屏幕分辨率过小时会出现横向滚动条
3.背景图像的平铺，无缝纹理，连续的图案需要能适应更大的分辨率
4.在某些情况下，可用性会很低
另外在考虑固定宽度布局的时候，可能会需要调查实际用户常用的分辨率。下面是W3School 调查的一个结果：
当使用固定宽度布局时，应该确保至少居中外包裹DIV以保持一种平衡（margin:0 auto），否则，对于使用大分辨率的用户，整个页面会被藏到一边去。
3.2液态布局
液态布局也通常被称作流动布局。通常采用相对于分辨率大小的百分比的方式自适应不同的分辨率。
上图是一个简单流动（流体）布局的轮廓。尽管有些设计师可能给流动布局中某些元素设置了固定宽度，比如margin，只要主体元素是百分比宽度，就可以让布局自适应适应各种分辨率。
禅意花园就是采用液态布局：
1440*900
800*600
优点：
1.对用户更加友好，因为它能够部分自适应用户的设置
2.页面周围的空白区域在所有分辨率和浏览器下都是相同的，在视觉上更美观
3.如果设计良好，流动布局可以避免在小分辨率下出现水平滚动条
缺点：
1.设计者需要在不同的分辨率下进行测试，才能够看到最终的设计效果
2.不同分辨率下图像或者视频可能需要准备不同的对应的素材。
3.在特别大的分辨率下，内容会被拉成长长的一行，变得难以阅读
使用液态布局的要点：
液态布局设计越少依赖图片和困难的技术，就越容易被制作和维护。它将能够兼容各种分辨率。使用更为简洁的代码和设计，可以更好的防止、发现和解决兼容性问题。
3.3弹性布局
它能和其他两种主要布局类型（固定宽度和流动）结合使用。如https://www.360docs.net/doc/cd8316817.html,就采用的是弹性布局。
弹性布局使用em作为单位。1px是电脑显示屏上一个无法度量的一个点，而1em是和元素本身的字体一致。em是相对单位，随用户字体大小变化而改变。参考px和em的区别
优点：
1.应用恰当的弹性布局对用户十分友好。页面中所有元素可以随着用户的偏好缩放。
2.对于同时喜欢流动和定宽布局的设计师来说，弹性布局是完美的，因为前两种布局
的优点在弹性布局中都能找到。
缺点：
1.正是因为第一个优点，这种布局会产生很大的可用性问题。需要花更多时间理解和
测试，让布局适合所有用户。
2.这种布局类型相对于其他两个更难设计，它能带来的某些可用性提升看起来并不值
得。
3.根据布局的具体情况，一些弹性设计需要专门为IE6追加一些样式。
弹性布局会同时拥有固定和液态布局的优点。设计师会经常使用弹性布局的原则，如字体和容器大小使用em，然后巧妙地混合使用百分比和像素设置其他的布局元素。
3.4栅格化布局
栅格化布局是现在比较流行的一种布局方式，淘宝TED上有一个系列介绍文章。
注：下面所描述的都是固宽情况
3.4.1什么是栅格化
栅格系统英文为“grid systems”，是一种平面设计的方法与风格。运用固定的格子设计版面布局。能以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。如图新浪微博的首页：
一个标准的栅格系统，包括以下部分:
下面介绍栅格系统中的宽度是如何计算出来的：
在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下：W =（a*n）+（n-1）*I，由于a+i=A，因此可得：(A×n) – i = W。注：最左右边没有边距(margin-left,marign-right)。
这个公式表述了网页的布局与网页“背后”的栅格系统之间的某种关系。以yahoo为例，来看一下栅格系统的应用：
yahoo的网站页面宽度为W=950px，每个区块与区块的间隔为i=10px；如果应用上面的公式，可以推出A=40px，即yahoo首页横向版式设计采用的栅格系统为：（40×n）- 10 = W
下面列出当n等于不同数值时W变化的数值表格：
从表格可以看出：yahoo首页的布局是按照栅格系统进行设计的，每个区块的宽度对应的n 值分别为：4，11，9。在这里看到一个很有意思的事情：只要保证一个横向维度的各个区块的n值相加等于24，则即可保证页面的宽度一定是950px。然而，950px的宽度也恰好就是当n=24的时候，W的宽度值。由此得出以下的应用模式：
设计师根据需要制定不同的版式或者划分区块，他们的依据将是上面的对应表进行设计。
在固定宽度情况下，还可以切分成多种方式，如12*80等。n越大，灵活度越高。可以根据网页的实际复杂度来选用对应的切法。
16*60
3.4.3栅格化的优点以及应用场景
主要优点：
1.能大大提高网页的规范性和可重用性。在栅格系统下，将页面模块的尺寸标准化，
这对于大型网站的开发和维护来说，能节约不少成本；
2.基于栅格进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相
似度，提升用户体验；
3.对于设计师们来说，灵活地运用栅格系统，能做出很多优秀和独特的设计。
一般来说只实现宽度的栅格化，高度的栅格化由于字体的大小等的限制会出现得不偿失的情况。另外如果一味地追求将所有设计都栅格化，则立刻会陷入地狱一般的黑暗中。主要设计到一个粒度问题：任何设计都有适用范围，超出最佳适用范围，强行使用只会带来无尽的烦恼。以下场景非常适合栅格化：
1.页面的总体宽度布局，比如两栏、三栏等布局
2.一些固定区块的尺寸，比如广告图片的尺寸
3.区块之间的间距，可以参考栅格系统的槽宽（Gutter）
4.一些可以栅格化的小区域，暗合栅格往往能简化布局上的考虑
3.4.4栅格化布局实例
Bootstrap实现了栅格化布局。这里以Bootstrap2.3为例，最新的版本为3.0.3
Bootstrap的栅格系统为12列(最大列数)，形成一个940px宽的容器。
Bootstrap的栅格系统有俩种，一种是固定式的，一种是流式的(也就是可适应宽度的)。
3.4.4.1固定式栅格
固定式栅格系统每列的宽度(width)及列与列间的间距(margin)都是固定的，列宽为60px，列间距为20px。如下图：
在Bootstrap中定义了俩个样式。容器为 .row ，可在容器中加入合适数量的 .span* 列。
用法如下：
显示结果：
用法非常类似
| "、" | "。注意：由于默认是12列的栅格，所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。 3.4.4.2流式(液态)栅格 流式与固定式栅格的区别就是，每列的宽度是按照百分比来瓜分外围包裹的宽度的。 .row-fluid { width: 100%; *zoom: 1; } .row-fluid [class*="span"] { display: block; float: left; width: 100%; min-height: 30px; margin-left: 2.127659574468085%; *margin-left: 2.074468085106383%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } margin-left: 2.127659574468085% 以百分比设置列的左边距(margin-left),约等于2.12%, 我们以上面固定式中的940px 为例来算下大约是多少px。2.12% * 940 = 19.928 。与20px 很接近。 span 4 span 8 缩小窗口后也成比例缩小： 3.5响应式布局 3.5.1起因 移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？ 手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone/iPad版本。但是导致维护很复杂。于是”一次设计，普遍适用”进入人们的视野。当然“响应化”本身不是目的，我们真正需要的是一种机制，它能够帮助网站根据不同的设备平台(不同屏幕大小，方向)对内容、媒体文件和布局结构进行相应的调整与优化，从而使网站在各种环境下都能为用户提供一种最优且相对统一的体验模式 3.5.2提出 2010年，Ethan Marcotte提出了"响应式网页设计"（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。下面是一个例子： 《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。参考：https://www.360docs.net/doc/cd8316817.html,/d/responsive-web-design/ex/ex-site-larger.html 如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。 如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部 3.5.3实现关键技术 实现响应式设计的关键方法：允许页面宽度自动调整、利用媒体查询根据不同的宽度设置不同的样式、液态布局、自适应媒体(图片、视频等)。 1.运行页面宽度自动调整 在网页代码的头部，加入一行viewport元标签： viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。 2.利用媒体查询设置不同的样式 什么是媒体查询？ 在CSS2中开始，就可以通过媒体类型在CSS 中获得媒体支持。 media 属性定义了应该用于指定每种媒体类型的样式表： ?screen 适用于计算机彩色屏幕。 ?print 适用于打印预览模式下查看的内容或者打印机打印的内容。 CSS3中扩展媒体类型函数，并允许在样式表中使用更精确的显示规则。媒体查询是评估true 或false 的一种表达。如果为true，则继续使用样式表。如果为false，则不能使用样式表。这种简单逻辑通过表达式变得更加强大，使您能够更灵活地对特定的设计场景使用自定义的显示规则。 媒体查询包含一个媒体类型，后跟一个或多个检查特定条件（如最小的屏幕宽度）的表达式。样式表中的媒体查询看起来如下的示例所示。 @media all and (min-width: 800px) { ... } 所有最小水平屏幕宽度为800 像素的屏幕（屏幕和打印等）都应使用如下CSS 规则。该规则在示例中省略号所在的地方。对于该媒体查询： ?@media all 是媒体类型，也就是说，将此CSS 应用于所有媒体类型。 ?(min-width:800px) 是包含媒体查询的表达式，如果浏览器的最小宽度为800 像素，则会告诉浏览器只运用下列CSS。 媒介查询还可以支持多种查询条件和逻辑关系，具体可以参考: 使用CSS 媒体查询创建响应式网站 由于媒介查询是CSS3中的规范，在IE8-是不支持媒介查询的，不过可以采用第三方的工具： 1.Respond.js这个JavaScript 库 它是一个极小的增强Web 浏览器的JavaScript 库，使得原本不支持CSS 媒体查询的浏览器能够支持它们。该脚本循环遍历页面上的所有CSS 引用，并使用媒体查询分析CSS 规则。然后，该脚本会监控浏览器宽度变化，添加或删除与CSS 中媒体查询匹配的样式。能够在原本不支持的浏览器上运行媒体查询。但是只支持创建响应式设计所需的最小和最大width 媒体查询。这并不是适用于所有可能CSS 媒体查询的一个替代。 2.使用css3-mediaqueries.js 有两种加载样式的方式，一种是不同的屏幕大小，样式文件分离，另外一种是内嵌样式。 ?加载不同的样式文件 如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件 如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件 ?内嵌样式的加载： 如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。 @media screen and (max-device-width: 400px) { .column { float: none; width:auto; } #sidebar { display:none; } } 3.液态布局 主要涉及到不使用固定宽度、字体大小不使用绝对大小px，而使用相对大小em等 4.自适应媒体 需要为图片设置max-width: 100%和height: auto，来实现其自动缩放。或者为避免某些情况下图片放大或者缩小导致失真，可以根据不同的宽度来加载不同的图片，如： https://www.360docs.net/doc/cd8316817.html,/responsive-imgs-part-2/ 一个具体例子可以参考，但是实现得不是很严谨，里面的宽度使用了绝对值。 3.5.4相关框架实现 Foundation，Bootstrap 利用Bootstrap 进行快速Web 开发 3.6自适应布局 自适应布局和响应式布局的目的都是为了适应不同分辨率的情况，但是具体的区别不是很明显，主要实现技术的区别： RWD(responsive-web-design)： ?采用CSS 的media query 技术 ?流体布局（fluid grids ） ?自适应的图片/视频等资源素材 AWD(adaptive-web-design)： ?CSS media query 技术（仅针对有限几种预设的屏幕尺寸设计） ?用Javascript 来操作HTML 内容 ?在服务器端操作HTML 内容（比如为移动端减少内容，为桌面端提供更多内容） 其它一些区别可以参考如下一些文章： https://www.360docs.net/doc/cd8316817.html,/blog/web-designer/what-is-the-difference-between-responsive-vs -adaptive-web-design/ https://www.360docs.net/doc/cd8316817.html,/responsive-web-design-rwd-vs-adaptive-web-design-awd http://xvfeng.me/posts/adaptive-vs-responsive-layouts-and-optimal-form-field-labels/ 3.7瀑布流布局 参考百科词条：瀑布流。视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。 国内的一些实现如百度新闻APP，美团网等。 一些JQuery的插件：https://www.360docs.net/doc/cd8316817.html,/index.html ?瀑布流布局的优点 1.有效的降低了界面复杂度，节省了空间：我们不再需要臃肿复杂的页码导航链接或 按钮了。 2.对触屏设备来说，交互方式更符合直觉：在移动应用的交互环境当中，通过向上滑 动进行滚屏的操作已经成为最基本的用户习惯，而且所需要的操作精准程度远远低于点击链接或按钮。 3.更高的参与度：以上两点所带来的交互便捷性可以使用户将注意力更多的集中在内 容而不是操作上，从而让他们更乐于沉浸在探索与浏览当中。 ?瀑布流布局的缺点 1.有限的用例：无限滚动的方式只适用于某些特定类型产品当中一部分特定类型的内 容。例如，在电商网站当中，用户时常需要在商品列表与详情页面之间切换，这种情况下，传统的、带有页码导航的方式可以帮助用户更稳妥和准确的回到某个特定的列表页面当中。 2.额外的复杂度：那些用来打造无限滚动的JS库虽然都自称很容易使用，但你总会需 要在自己的产品中进行不同程度的定制化处理，以满足你们自己的需求；另外这些JS库在浏览器和设备兼容性等方面的表现也参差不齐，你必须做好充分的测试与调整工作。 3.没有页脚：如果使用了比较典型的无限滚动加载模式，这就意味着你可以和页脚说 拜拜了。最好考虑一下页脚对于你的网站，特别是用户的重要性；如果其中确实有比较重要的内容或链接，那么最好换一种更传统和稳妥的方式。千万不要耍弄你的用户，当他们一次次的浏览到页面底部，看到页脚，却因为自动加载的内容突然出现而无论如何都无法点击页脚中的链接时，他们会变的越发愤怒。 4.SEO：集中在一页当中动态加载数据，与一页一页的输出相比，究竟那种方式更利 于SEO，这是你必须考虑的问题。对于某些以类型网站来说，在这方面进行冒险是很不划算的。 5.关于页面数量的印象：其实站在用户的角度来看，这一点并非负面；不过，如果对 于你的网站来说，通过更多的内容页面展示更多的相关信息(包括广告)是很重要的策略，那么单页无限滚动的方式对你并不适用。 4总结 各种不同布局的方式和布局框架的实现最终的目的还是为了简化设计和开发。不同的布局方式适应于不同的应用场景。 尽管响应式设计是未来的一种趋势，但实际上要实现所有屏幕的自适应要求非常高，尤其是在屏幕分辨率差异特别大的情况下。从成本考虑，比较合适的方式是一个Mobile版本和一个Screen版本，在这两个版本下对于一些比较接近的几种分辨率做自适应。另外从体验考虑，移动和电脑终端的使用情景、流程、交互都有很大不同，最佳情况应该是针对性的做不同内容，而不是相同内容、自适应的呈现。 响应式设计这方法论有几个前提： 1.主体是足够简单的内容、而且用户行为以消费为主，而不是生产（专业性较低） 2.计算需求较弱 3.无法预期用户的访问设备。如果明知别人一定会用desktop设备访问，或是使用场景本 来就只有移动端，就没必要再去做响应式了，直接针对特定尺寸设计会受到更少的限制不适合的范畴也就明确了： 1.工具平台网站，因为他有过于复杂的用户行为。比如Google的众多手机版本的应用 其实都对复杂功能有做很多裁剪，而且基本不用响应式的方式来做 2.游戏，因为计算量会比较大。 5附录 5.1px和em的区别 px像素（Pixel），相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 em是相对长度单位，相对于当前对象内文本的字体尺寸。如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 因此用px来定义字体，就无法用浏览器字体放大的功能。 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:1em=16px。那么 12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明font-size=62.5%，这样可以使em值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位。 6参考资料 1.浅析iPhone平台三种应用类型的布局方式 2.浅谈响应式布局 3.Responsive Web Design(鼻祖) 4.响应式布局入门 5.栅格布局，淘宝UED 6.什么是响应式Web设计 7.设计好脾气的Web页面 8.“无限滚动加载”适用于你的产品吗 9.适应网页设计（Responsive Web Design） 10.Inspiration: Fluid & Responsive Design(exams) 11.Understanding Responsive Web Design (RWD) & Environment Aware Component Design Version: 2013.11.21 12.线框原型(线框图)的本质及实践应用概述 13.https://www.360docs.net/doc/cd8316817.html,/blog/– Great blog covering everything about WebGL. 14.https://www.360docs.net/doc/cd8316817.html,/– Great blog with plenty of tutorials to learn from. 15.https://www.360docs.net/doc/cd8316817.html,/en/tutorials/– Great site with plenty of resources to learn from. 16.https://www.360docs.net/doc/cd8316817.html,.br/html5/ (pt-br) – Great HTML5 reference guide (in Portuguese). 17.https://www.360docs.net/doc/cd8316817.html,/– Great question-answer type site. Take a look! 18.https://www.360docs.net/doc/cd8316817.html,/category/tutorials/– Everything you need to know about css3 19.https://www.360docs.net/doc/cd8316817.html,/–creativity? The most crazy but awsome web design details are here. 20.https://www.360docs.net/doc/cd8316817.html,/–Great work in there. 21.https://www.360docs.net/doc/cd8316817.html,/ 22.Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You? 23.Bootstrap栅格系统研究 24.多设备的Web布局模式 25. DIV+CSS：网站首页布局实例教程DIV+CSS：网站首页布局实例教程 第一步：页面布局与规划 在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图: 根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/ ├#Header {}/*页面头部*/ ├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。 第二步：写入整体层结构和CSS 接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容： [color=#aaaaaa][/color] 为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开css.css文件，写入CSS 信息，代码如下： /*基本信息*/ body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;} /*页面层容器*/ #container {width:100%} /*页面头部*/ #Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}[color=#aaaaaa][/color] [color=#aaaaaa][/color] [color=#aaaaaa][/color] [color=#aaaaaa][/color] CSS 定位详解CSS 定位 CSS 定位(Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。 定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。 另一方面，CSS1 中首次提出了浮动，它以Netscape 在Web 发展初期增加的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。 一切皆为框 div、h1 或p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和strong 等元素称为“行内元素”，这是因为它们的内容显示 在行中，即“行内框”。 您可以使用display 属性改变生成的框的类型。这意味着，通过将display 属性设置为block，可以让行内元素（比如 元素）表现得像块级元素一样。还可以通过把display 设置为none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。 但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待： DIV+CSS布局：CSS浮动float属性详解DIV CSS布局：CSS浮动float属性详解 在传统的表格布局中，我们对表格应该对齐方式对实现了对布局的应用，而应用Web标准构建网页以后，float浮动属性是布局中非常重要的属性，我们常常通过对div元素应用float浮动来进行布局，不但对整个版式进行规划，也可以对一些基本元素如导航等进行排列。 我们来看看float属性基本释义： 该属性的值指出了对象是否及如何浮动。当该属性不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于block。也就是说，浮动对象的display特性将被忽略。 float属性的参数： none：对象不浮动 left：对象浮在左边 right：对象浮在右边 下面我们通过一些测试来了解可能出现的一些情况，如果float取值为none则不会发生任何浮动，块元素独占一行，紧随其后的块元素将在新行中显示，如下图： 我们看下面的运行效果： Source Code to Run |