布局篇(2)—If you love css …

上篇讲的布局(切割)方法相信大家己经掌握，其特点是用固定宽度(fixed-width)来实现页面内各个元素的显示效果，简单实用，易于掌握。本篇将讲述其他相对高级的布局方法。

布局的分类,根据对元素宽度的定义不同，布局可分为以下几种：

1. 固定宽度(fixed-width)布局：
即上一篇所用到的布局方法，其特点是主要DIV的宽度都是用固定大小的px值定义的，其宽度不随浏览器及字体大小的影响。多以px作为宽度单位。
优点：宽度固定，最为保真地表现作者的设计意图；简单易学。
缺点：它是这几种布局方法中最为“自私”的，因为其不考虑访客的浏览设备及设置。比方说，在1024宽的浏览器表现良好的布局，到了1600以上的宽屏浏览器就显得较为局限，其可能缩于屏幕一侧或是中央。
现状：由于其简单易用，且基本满足大部分访客的需求，仍是主要的布局方法，尤其在大陆。
趋势：随着液晶屏幕的发展和普及，成本的下降，市面上宽屏显示器已经开始大量涌现，尤其在西方发达国家，1600的宽屏显示器渐成主流，所以在800或是1024下显示良好的，使用固定宽度的布局方法已经开始被边缘化。
站点举例：网易蓝色理想

2. 自适应(liquid)布局：
即根据用户浏览器的宽度，自动调整宽度显示的布局方法。以%作为宽度单位。
优点：自动适应各种屏幕宽度，轻松实现满屏显示。
缺点：如果屏幕过宽，而内容有不多的情况下，文字可能拉伸得很长，影响美观。而当屏幕过窄时，内容又会被压缩得很窄，可读性下降。
现状：目前很多的web2.0站点使用%来实现布局，即自适应访客的屏幕宽度。
趋势：就目前的情况看来，没有哪一个屏幕分辨率能够统一整个市场，所以800，1028，1280，1600等各种宽度的浏览器会各据一方，并且只会越来越宽，liquid布局以其良好的自适应能力将成为主要的布局方法。
站点举例：Google Cssliquid

3. 弹性（elastic）布局：
所谓弹性，是针对字体大小而言的，当用户调整字体大小时，宽度会随字体大小的变化而变化。以字体高em作为宽度单位。
优点：满足了视力下降人士的需求，不管用户如何调整字体大小，页面布局都不会被打乱；
缺点：当用户不调整字体大小时，其效果和固定宽度布局的效果其实是一样的，即不会随屏幕的大小的变化而自适应；对于初学者不易掌握。
现状：弹性布局方法是目前较为少用的一种。
趋势：由于其能自动适应字体大小，且在用户不调整字体大小时，有固定的宽度，所以它将是固定宽度布局的不错的替代方法。
站点举例：BlueAnvil Designbit(可能需要代理浏览)

4. 混合布局：
即在一个页面内用两种以上的布局方法。比方说对于内容DIV使用%，而在边框DIV则使用em作为宽度单位。

如何选择适合你的布局方法：
在选择布局方法时，你需要考虑以下两个方面：
1.你的原始设计：
当你的原始设计的宽度固定，或是宽度过大会影响美观的话，Jorux建议你使用弹性布局。
2.用户群的分布：
如果你的用户群数量巨大，也就是说使用各种屏幕分辨率的用户都会达到一个可观的数量，那么你在布局时就应该考虑使用自适应的方法布局。并且在设计时考虑到这点，设计出在各种宽度下拉伸都基本保持美观的作品。

你可以看到，固定宽度的布局方法已经不是Jorux的推荐方法。这也是Jorux写这篇文章的原因，大家应该秉持以用户为中心的设计理念，更好地适应各种客户端及其设置。本站也会很快改写CSS。

怎样使用弹性布局的方法实现布局篇(1)中的效果：
1. 在body中设置font-size:62.5%，使得1em=10px；
2. 避免在任何DIV中声明字体大小，这是为了避免em的值因继承父级元素的字体高而不断变化，而在DIV的子元素中声明字体大小。如在p,h1等选择器中声明。
3. 用em作为宽度和高度单位，例如你想设置DIV宽度为760px，那么你需要将其设置为76em。
那么css代码可以为(仅供参考)：

* {
margin: 0;
padding: 0;
}
body{
font-size:62.5%;
background-color:#444;
}
#AllWrap {
float:left;
width: 76em;
background-color: white;
}
#Header {
height: 8em;
background-color: red;
}
#MidWrap {
}
#Content {
float:left;
width:56em;
height:40em;
background-color: white;
}
#Sidebar {
float:left;
width:20em;
height:40em;
background-color: green;
}
#Footer {
clear:both;
width:76em;
height: 8em;
background-color: blue;
}

你可以尝试调整浏览器的字体大小，可以看到各个DIV也随之变化。

如何用%实现自适应的布局方法：
满足以下条件：
1.满屏显示，及Header，(Content+Sidebar),Footer的宽度均自动适应屏幕宽度，并占满整个屏幕宽度；
2.Content占70%屏幕宽，Sidebar占30%，高度均为400px；
3.Header和Footer的高度均为为80px；
4. 实现如下效果效果(点击看大图)：

布局篇(2)—If you love css …相关推荐

一步一步构建手机WebApp开发——页面布局篇
继上一篇:一步一步构建手机WebApp开发--环境搭建篇过后,我相信很多朋友都想看看实战案例,这一次的教程是页面布局篇,先上图: 如上图所示,此篇教程便是教初学者如何快速布局这样的页面.废话少说,直接 ...
web前端布局篇（切图）
web前端布局篇(切图) 这里的切图不是指ps里面的切图,而是指web前端工程师将设计图转化为静态页面的过程. 在布局的时候,我们通常会以设计图为蓝本,然后将设计图拆分,变成一个一个的HTML标签,搭 ...
Echarts5.3.2可视化案例-布局篇
Echarts5.3.2可视化案例-布局篇 00参考以及效果 01背景知识大屏 flex布局 02 大屏设计 00 项目目录 01-使用技术 02- 案例适配方案 flexible配置 cssrem ...
【面试篇】前端点滴（css/css3）
[面试篇]前端点滴(CSS/CSS3)---倾尽所有面试小问答 css基础 css盒模型 css选择器 BFC css(float) css(position/z-index) css(displa ...
css布局方式_手把手教你CSS Flex布局「真香」
作者:EcbJS 转发链接:https://blog.csdn.net/EcbJS/article/details/106466757 前言之前做项目,关于布局方面没怎么深入研究过,好多页面都是 ...
为网格布局图片打造的超炫 CSS 加载动画
今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...
height:calc(100% - 10px)的用法(垂直居中) - 布局篇
下图demo所示,如何让sidebar左侧边栏导航在垂直方向全尺寸拉伸? 如何让一个侧边栏垂直方向全尺寸拉伸? 代码如下: height:calc(100% - 10px) 以上就是关于" ...
深度探索Qt窗口系统——布局篇
深度探索Qt窗口系统--布局篇虽然界面管理器可以完成窗口布局,但是对于动态布局的情况下,这种做法就无能为力了,现实中界面经常要支持国际化,对于同一内容用不同语言翻译可能长度不一,这就需要窗口动态布局 ...
开启Fluter基础之旅三-------Material Design风格组件、Cupertino风格组件、Flutter页面布局篇...
Material Design风格组件: 继续接着上一次https://www.cnblogs.com/webor2006/p/12545701.html的Material Design进行学习. A ...
学习笔记| AS入门（三）布局篇
在我们之前的学习过程中,总是需要和.xml布局文件接触,那布局到底是什么呢?布局是指页面内容该如何排布,比如控件和父容器的位置关系以及控件与控件之间的位置关系是怎样的.其实除了最常见的LinearLa ...

布局篇(2)—If you love css …

布局篇(2)—If you love css …相关推荐

最新文章

热门文章