全国免费咨询热线:

400-611-9921

 
关于盒子理论与网页设计

2016-07-19

1445

现在CSS浮动清楚定义了现在的网页布局,基于几个世纪以来的印刷理论,尽管他们运用起来很合适,严格来说,浮动并非是那个目的。就像表单布局一样,在90年代并没有阻止我们的前进。然而,网页布局的未来确实是清晰明...


现在CSS浮动清楚定义了现在的网页布局,基于几个世纪以来的印刷理论,尽管他们运用起来很合适,严格来说,浮动并非是那个目的。就像表单布局一样,在90年代并没有阻止我们的前进。

然而,网页布局的未来确实是清晰明亮的,这要归功于弹性盒子。CSS布局机制是让我们安排元素在一个真正的网格空间。一些元素被固定,其他的可以滚动。他们的顺序可以独立于他们原来的顺序。所有的这些元素都可以适配一系列屏幕,从宽屏到智能手机,甚至是一些还没有想到的设备,浏览器支持也非常棒。所以这是一个很好的加入弹性盒子布局方式的时机,如果你还没有尝试过的话。

但是改变我们的方式并不是那么容易的。弹性盒子有着令人眼花缭乱的特性,这些特性很少有相似的,引入他需要花点时间。幸运的是,为了达到这个布局目的,你只需要了解很少的理论知识。让我们看下我们如何创建一个类似于Gmail的网站,基于弹性盒子布局原理的界面。假如你们有探索或者深入理解弹性盒子布局这种理论,这篇文章将会再次解释那些曾经困惑你的地方。

弹性盒子理念

弹性盒子理论需要一个全新的思考方式。代替从左到右,从上到下的行与列的排列布局,我们在一条线上安排元素——实际上,是两条线,一个主轴线和一个交叉轴线,但今天我们要用的是第一个主轴线。考虑到主轴线沿着盒子(div或者其他html元素)排列,这个类似于绳子的无形轴线,从容器的一端延伸到另一端。这引出四个很有趣的概念。

对齐

首先,我们可以沿着绳子分割这个盒子,使元素到一端,这样集中分布它们。那意味着元素可以紧邻屏幕的左边或者右边,无论屏幕有多宽。甚至这样分配可以满足任何尺寸的屏幕,这是最完美的在我们的多屏幕世界中。

弹性盒子允许设计师将HTML的元素推向绳子的任何一端

方向

其次,我们也可以翻转这个绳子,因此盒子向反方向翻转而不用去编辑HTML。这和排序技术很相似,允许我们翻转排列——除了第三个特征进一步来区分它们的不同。

元素的顺序和位置都可能被翻转

定位

第三,可以通过90度转动绳子从容器的顶部吊着,而不是从一边运行到另一边。

全部排列可以旋转90度,悬挂在容器的顶部

次序

最终,我们可以控制盒子的次序,沿着绳子哪一个排第一、第二、第三等等,而不用去编辑HTML。这是很厉害的,意味着我们可以控制HTML的文档结构。想让元素垂直居中排布?没有问题。想在你的HTML结束但在你开始布局时导航?当然可以。想尝试一下不同的布局?全部需要用到CSS理论。就像这样,我们已经开始考虑就文档内容和设备,而不是固化的栅格。

HTML元素的顺序可以通过CSS属性来改变,而不需要去改变HTML结构本身

有很多知识,但是这里只讲一些基础的理论:

1. 块级元素紧紧的沿着一条不可见线

2. 我们可以沿着那条线推动元素

3. 我们可以翻转绳子,这样就可以翻转盒子的顺序。

4. 我们可以沿着绳子按任何方式来改变盒子的顺序,而不用考虑改变HTML。

顺序

顺序是一个很重要的概念在弹性盒子理论中。让我们举一个简单的HTML文档:一个传统的博客一般包含这几点信息。

  • 头部

网站的标题,描述,查询表单(这些框架告诉人们网站信息,已确保让他们知道自己在那里)

  • 变换属性

作者,日期,主题(这些信息可以帮助人们了解这是否是他们所需要的)

  • 主要内容

网页的主要内容是什么

  • 提供服务的内容

一些相关的信息

  • 导航

可以指引你到达网站的各个网页

  • 尾部

版权信息,订阅信息,社交媒体,信息登记

为了可以被搜索引擎检索和用户浏览,这些元素被按顺序排列。现在,我们把这个绳子从移动设备的顶部悬挂下来,记录他们,并且把主要内容放在首位。

1. 主要内容

2. 变换属性

3. 补充内容

4. 头部

5. 导航

6. 尾部

然而,在电脑桌面端又有不同的浏览顺序

1. 头部

2. 变换属性

3. 主要内容

4. 补充内容

5. 导航

6. 尾部

等一下,那不是正确的顺序。我们希望导航在顶部,弹性盒子可以很轻松的做到这一点。这条绳子也可以放进弹性盒子内部,并且所有的规则同样适用。

嵌套绳子和盒子

每一个弹性盒子布局都可以在容纳另外的盒子按照他们各自的绳子排列,这条绳子可以从左到右排列反之亦然,也可以从上到下反之亦然,也可以把盒子推向另一边,居中来分布。因为弹性盒子的灵活性打开了各种可能性,他也意味着我们需要仔细的考虑我们的布局。

盒子沿着弹性绳子排列的时候,也可能包含着其他弹性盒子

我们从一些内容举例开始,看下它为何变得复杂了。这不是按照布局的顺序(你所看到的顺序)假想一下你给一个观众一个描述,你告诉他们你将说什么,然后你说了,然后你在总结下你刚说的内容。我们假设的页面也是按照相似的结构。

  • 头部
  • 当前信息
  • 信息列表
  • 盒子内部的一些链接
  • 尾部

描述一个设计

为了使事情简单一些,我们会在一个相似的布局上开始工作。

一个典型的邮箱APP排版布局

这里有两个弹性盒子布局,第一个有三个盒子从上到下。第二个布局是在中间的盒子,从右到做排列。

头部、尾部的宽度和视口宽度一样。导航栏适配在左边,当主要内容信息不能被完全容纳后,区域允许出现滚动条。为了达到这个目的,需要设置一些浮动和绝对定位,但是弹性盒子给了我们更多的选择,接下来我们一起看下。

设置文档

外部的容器只有三个部分,包裹在一个弹性容器元素内:

我们用语义表达方式把它称之为弹性盒子,至少我们的CSS会更通顺。

在盒子内部,我们需要三个层级块:

这个例子用这个段落作为一个独立的整体,而不是文章中的段落。

声明这些元素为弹性盒子

我们需要告诉浏览器这些元素是弹性布局,可以伸缩的。

注意到这个可以使弹性盒子应用在主要的容器上,而不是内容本身。

增加一些维度

根据原型设计图,我们了解到确定的元素需要有自身的长度和宽度。网站的头部和尾部相对于主题内容来说要短一点,相对于左边很窄的导航工具栏。文章的内容区域占据了剩下的空间区域。为了保持灵活的布局而不考虑屏幕尺寸(这篇教程所声明的),这些区域不会设置固定的宽度。

这里,我们将 flex-basis比喻为宽度,只要主轴是水平的,如果我们将绳子从上到下挂起来,那么 flex-basis 将自动变为高度!

使主要部分可滑动

这个是很容易的。只需要设置添加 overflow:scroll。对于主要的元素避免他被头部和尾部所覆盖。小提示:尝试overflow:auto 隐藏滚动条(当他们不是必须的时候)在大多数浏览器中。

测试内容

在这一点上,头部的表单浮动,需要设置一点边距,即使当浏览器被重置。主要部分应当很完美的浮动不管在任何尺寸的浏览器中。假如浏览器不能友好的支持弹性盒子,那么这个页面将变为主要内容优先的布局方式。

知道哪些浏览器不支持弹性盒子是很重要的。每个最新的版本基本上都支持,但是,有个问题是用户何时更新他们的软件。那么哪些版本开始这些浏览器支持弹性盒子呢?

  • 谷歌31以及以后
  • 火狐31以及以后
  • IE浏览器10及以后
  • 电脑版Safari 7及以后
  • iOS版 7.1及以后
  • 安卓4.4及以后
  • 谷歌安卓版42及以后
  • 欧朋27及以后

那么老的浏览器怎么办呢?解决方案大相径庭,取决于你正在努力达到的布局,尽管我们可以推出一些技巧。

最安全的方式让弹性盒子完美的支持浏览器,是按照顺序把CSS写在他将出现的地方。按照语义化的思考方式开始,老版本浏览器将忽视弹性盒子的属性信息,感谢的是,好的条件注释将允许我们应用浮动和清除布局。老版本的浏览器往往可以给你更清晰的逻辑顺序,因此弹性盒子和浮动将并存。智能的浏览器将会应用弹性盒子布局,尽管逻辑上浏览器应当忽视它们。最后,假如你想试验下,那么尝试Flexie,一个基于JavaScript的polyfill的老版本浏览器工具。


本文来自广州品牌网站建设网站设计制作公司-纵天科技 


标签:纵天,高端网站建设,企业网站,广州响应式网站



关注我们:在查找公众号中搜索:zomsky1688,或者扫描下方二维码快速关注。
广州市纵天信息科技有限公司公众号
热门标签
房地产网站建设汇景网站建设汇景网站开发汇景控股新能源网站开发新能源网站制作奥动新能源网站建设奥动官网网站改版石油公司网站建设广州网站搭建广州市网站制作生物网站建设珠海方正官网建设方正官网建设日本YKK官网建设骏丰频谱官网建设斯帝罗兰官网建设高新兴官网建设三盟科技官网建设赛立信官网建设福美控股官网建设德国商会官网建设皇朝家具官网建设皇朝定制官网建设百利官网建设广芯微官网建设物联网网站建设芯片网站建设网站开发日本YKK官网百利网站建设办公家具网站建设广州建站公司广州做网站营销型网站建设柏洪集团网站集团网站建设新元素网站教育网站德胜教育集团德国商会网站建设品牌网站建设赛立信网站建设智能家居网站运动网站建设贸易网站建设玩具网站建设化工网站建设日化网站建设家电网站建设音响网站建设物流网站建设旅游网站建设酒店网站建母婴网站建设珠宝网站建设钟表网站建设培训网站建设教育网站建设建材网站建设装饰网站建设机械网站建设美妆网站建设展览网站建设皮具网站建设五金网站建设仪器网站建设照明网站建设水电网站建设咨询网站建设法律网站建设家具网站建设家居网站建设服装网站建设服务网站建设食品网站建设金融网站建设餐饮网站建设环保网站建设政府网站建设科技网站建设地产网站建设医药网站建设数码网站建设营销型网站广州网站制作广州网站建设公司建网站广州网站设计公司建站优必思官网英文版网站定制网站广州网站建设中服装网站设计服装网站制作防火板网站大数据网站科技网站制作物联网网站人工智能网站防火板网站制作家居网站制作枕头网站电器网站制作电器网站家具网站家居网站网站建设公司​手机网站建设响应式网站企业官方网站网站策划官网改版企业网站建设网站制作网站设计建站公司网站建设公司企业网站网站建设费用网站建设广州企业网站建设企业建站官网建设广州建站广州网站建设纵天科技
点击展开
关于纵天
广州市纵天信息科技有限公司成立于2008年,是中国领先的整合式互联网应用服务商。12年专业历程,坚持以科技创新为先导的网络服务,服务超过8000+知名品牌与创新客户,涉及网站设计、APP应用开发、微信开发、平面设计、视频拍摄、互联网整合营销等多个领域。
微信咨询
官方微信
联系方式

地址1:广州市天河区珠江新城邦华环球广场16F

地址2:杭州市滨江区滨安路1190号智汇中心B308

业务 QQ: 3561401262

E-mail: sales@zomsky.com

电话咨询 在线咨询 QQ咨询 官方微信
官方微信
TOP

立即与纵天项目顾问通话

400-611-9921

您也可以咨询我们的在线客服或预约资深顾问

信息保护中,请放心填写
关闭