当前位置 : 主页 > 网页制作 > css >

CSS布局的类型

来源:互联网 收集:自由互联 发布时间:2021-06-13
我是初学者,仍然无法理解布局的类型,CSS的整个布局架构.这似乎微不足道,但很难在互联网上搜索.我见过的所有网站都将CSS布局划分为固定(或静态),流体(或流动)和响应.例如,网格和弹性
我是初学者,仍然无法理解布局的类型,CSS的整个布局架构.这似乎微不足道,但很难在互联网上搜索.我见过的所有网站都将CSS布局划分为固定(或静态),流体(或流动)和响应.例如,网格和弹性框是一种没有分类的外星人.

我认为这是:

响应或响应 – 固定和流畅的布局
自然响应 – 网格固定布局,网格流体,弹性框架

我对吗?有人能解释一下我们这个时代的有效分类吗?

固定和流体网页布局在多年后推出响应式布局方法之前已经过时.

十年前甚至更多(大约2002-2005),当CSS2定位已经得到浏览器的良好支持,但大多数网页仍然使用表格和spacer.gif(或两个)进行布局,在固定网络之间进行选择页面布局(使用硬编码宽度)和流体网页布局(使用基于百分比的宽度)是关键的设计选择.

当Ethan Marcotte在his seminal 2010 article in A List Apart年推出响应式网页设计方法时,这是一种新方法:不仅页面宽度可以扩展和收缩(与Fluid一样),而且单个页面元素可以独立于其他页面扩展和收缩.并且(因此)根据它们的宽度和观察它们的视口宽度之间的相互作用将它们自身排列成水平行或垂直堆叠.

除了其他创新之外,Responsive还使标题(和其他文本元素)具有可更改的字体大小,并允许菜单之间的元素在侧边栏中永久可见以最初不可见之间切换,只有在您点击时才会生成可见的下拉菜单一个菜单按钮.

这使得响应从根本上比旧的流体更复杂.

随后是少数甚至更新的方法,作为响应式的替代或补充.

一种方法被称为自适应网页设计(2011年由Aaron Gustafson创造的一个术语),它提出了少量(3-5)预定义的“对齐”布局来代替响应式设计,其中不同的元素可以流畅地重绘自己连续地对每个像素增加或丢失视口宽度.

另一种方法(也是2011)被命名为RESS(响应服务器端 – 由Luke Wroblewski创造的术语),其中,根据所使用的视口和/或设备,某些元素不仅会被隐藏,甚至不会从服务器下载.

Flexbox不同于上面的设计方法和方法.它是一个CSS3模块,旨在为设计人员提供更多的二维布局功能,并使他们免受限制和困难,因为他们只使用(有限的)工具集边距,填充来二维定位页面上的所有内容并浮动.

网友评论