html中页面布局主要有,4种Html页面布局

有些人经常问我这样的一些问题，就是如何才能在页面上精确的控制元素，为什么我的页面总是一直在飘呢，我在这里只想说，关于页面布局，标准也很重要。

(1)流体布局

流布局与固定宽度布局基本不同点就在于对网站尺寸的测量单位不同。固定宽度布局使用的是像素，但是流布局使用的是百分比，看到百分比，你应该想到，这将提供了很强的可塑性和流动性。换句话说，通过设置了百分比，你将不需要考虑设备尺寸或者屏幕宽度大小了，结论就是，你可以为每种情形找到一种可行的方案，因为你的设计尺寸将适应所有的设备尺寸。流布局与媒体查询和优化样式技术的关系密切。

(2)固定布局

在固定布局中，网页的宽度是必须指定为一个像素值，一般设为960像素。在过去，开发人员发现960像素是最适合作为网格布局的宽度，因为960可以整除3，4，5，6，8，10，12和15。尽管到了今天，在web开发中还是比较普遍使用固定宽度布局的，原因是这种布局提供很强的稳定性与可控性。如果你知道你的网页宽度，就可以兼容所有浏览器与设备，你可以精确地控制图像位置，就好像一切尽在掌控之中。然而，固定宽度布局固然有些劣势，，想创建一个固定宽度布局网站的开发人员必须意识到网站是否可以在各式各样的屏幕，浏览器和设备中可用与可见地显示出来。现在市场上出现如此众多设备，意味着有各式各样的屏幕尺寸，对开发人员提出了“一种尺寸适应所有”的技术挑战，这种挑战已超越了固定宽度设计的精确度和可控制性。固定宽度的网站出错的一个常见例子就是小于960像素的屏幕尺寸是非常常见的。这样网站就不能够全屏显示了，你将看到一条水平的导航条。事实上,这些小屏幕通常用手指操作,而不是鼠标来控制。

(3)弹性布局

弹性布局跟流布局很相像，主要不同是大小单位。弹性布局的大小单位不是像素或者百分比，而是em。一个em单位等于定义在CSS规则：font-size的值大小。例如，我们设置文本的font-size大小为20像素，那么1em就等于20px，2em就等于40px，以此类推。这种布局为开发人员提供了一种很强的排版控制。由于绝大多数的布局主要由文本来填充，此方案使弹性布局成为许多项目的强有力的竞争者。然而，还是存在缺点就是在某些例子中依然出现令人不愉快的水平滚动条。

(4)混合布局

最后介绍这个混合布局，是上面介绍的两种或者更多布局类型的组合。例如，开发人员可能需要设置某些指定元素(侧栏或者底部)一个固定宽度，剩下的就选择百分比或者em。明显地，这种途径还是有劣势——如果你是指侧栏的宽度为200像素，然后为剩下的内容设置为80%的宽度，当屏幕小于1000像素时，你将会看到一条水平滚动条，因为主要的列已经没有足够空间容纳了。现实中很少情况,在你的项目只会有一个元素。但是你可以很容易地解决这些问题,后面我们将会学习到。

总结：

你可能想知道什么是最好的解决方案？上面列出的四种类型布局哪种才是最适合作为响应式解决方案。你或许已经猜到,每个布局类型都有其优点和缺点。每个页面布局没有说哪个哪个好，看你在页面怎么的去运用了，也可以把他们混合在一起用，也许会起到不一样的效果。

html中页面布局主要有,4种Html页面布局相关推荐

AutoLayout代码布局使用大全—一种全新的布局思想
相信ios8出来之后,不少的ios程序员为了屏幕的适配而烦恼.相信不少的人都知道有AutoLayout 这么个玩意可以做屏幕适配,事实上,AutoLayout不仅仅只是一个为了多屏幕适配的工具, 它真 ...
css浮动布局自适应,CSS 几种常用自适应布局
通过阅读和实践,我对几种常用的布局样式有了一定的了解,也稍微总结了一下原理,若有不对请大家纠错.谢谢我理解的[两列布局]左边固定和右边自适应,或者右边固定左边自适应的原理是: 1.设置固定区域的宽度 ...
jsp页面页面post传值_几种JSP页面传值方式
2010-01-25 几种JSP页面传值方式: 文章分类:Web前端几种JSP页面传值方式: 1. 隐藏域传值: &ltform method="post" action ...
java list布局_java – 使用2种不同的布局重用Android Listvi...
我已经了解到,为了最大限度地提高Android列表视图的效率,您应该只需要尽可能多的充满"行"视图,以适应屏幕.一旦视图移出屏幕,您应该在getView方法中重用它,检查conve ...
用java写jsp页面跳转页面跳转_五种 JSP页面跳转方法详解
相关文章 JAVA,HashSet面试题:本文列举java面试题中关于HashSet的一些知识点开源混淆工具ProGuard配置详解及配置实例:ProGuard是一个免费的java类文件压缩,优化, ...
html三列布局中间固定,常见的三列布局（左右固定宽度，中间自适应）
实现css中的三列布局,左右固定宽度,中间自适应.三列布局方式的关键是怎么样才能使得在伸缩浏览器窗口的时候让中间的子元素宽度改变.比较常见的实现方案是:定位,浮动,css3中新特性flex布局,以及流 ...
常见的5种网站页面布局方式及特点分析
互联网的世界里,网页是我们接触最多的内容展示平台(载体),各种风格设计及不同类型主题的网站数不胜数,笔者作为一名网页设计师,在关注内容本身的同时,也喜欢研究一下网站页面的设计特点,这不失为一种提升网页 ...
CSS3与页面布局学习总结（四）——页面布局大全BFC、定位、浮动、7种垂直居中方法...
目录一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...
手机界面设计中9种常用的布局
手机由于屏幕尺寸的限制,可显示内容要比PC屏幕少得多.在手机界面设计中,若直接把所有内容在一屏内显示,会使界面混乱不堪,丑陋且不可用.我们需要对信息进行有效组织,通过合理布局把信息展示给用户.合理的布 ...

html中页面布局主要有,4种Html页面布局

html中页面布局主要有,4种Html页面布局相关推荐

最新文章

热门文章