CSS布局的类型

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

我认为这是:

响应或响应 - 固定和流体布局
响应性质 - 网格固定布局,网格流体,弹性框

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

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

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

当伊桑·马科特引入的方法自适应网页设计在他的开创性2010文章列表除了,这是一种新的方法:不仅可以页面宽度膨胀和收缩(与想法液),但个别页面元素可能独立地扩展和收缩并且(因此)根据它们的宽度和观察它们的视口的宽度之间的相互作用将它们自身排列成水平行或垂直堆叠.

除了其他创新之外,Responsive还使标题(和其他文本元素)具有可更改font-size和允许的元素,如菜单,在侧边栏中永久可见,最初不可见之间切换,只有在您点击菜单按钮时才会显示为可见下拉菜单.

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

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

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

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

Flexbox不同于上面的设计方法和方法.这是一个CSS3模块,旨在为设计人员提供更多的权力在他们的二维布局和通过努力所带来的限制和困难,让他们自由二维地仅使用(有限的)工具集的页面上的位置的一切margin,padding和float.