html怎样布局完美,【HTML/CSS】常见的5种布局方法解释

一. 静态布局

静态布局就是每一个元素都用px写死。这种布局方法毫无疑问是最简单(因为不用考虑不同分辨率的情况)，同时也是最糟糕的。

不过，现代大多数企业的PC站点先使用一个静态布局，然后移动端再单独设计一个布局。

二. 弹性布局

弹性布局采用高级的度量单位(如em, rem)来度量文字的大小，其它采用px来进行度量。

这样做得好处是，在其它元素不变的情况下，我们的文字可以根据具体的分辨率放大和缩小。

这在移动端是非常有益处的，因为在移动端，我们经常会因为分辨率的问题，导致网页的缩放，字也看不清，给人一种非常不爽的感觉。

三. 自适应布局

自适应布局就是结合CSS3的@media查询，根据不同的分辨率范围选择不同的静态布局页面。

对于同一设备而言，获得的其实是一个静态页面，这个页面的大小是不会再改变的了，即使你再之后修改了分辨率。

相对于之前两种布局而言，自适应布局有了很大的进步，已经有响应式布局的影子了。

四. 流式布局

流式布局就是大部分元素高度用px写死，然后宽度用百分比布局。

典型的案例如bootstrap的栅格系统。

这样做主要是为了在相近的分辨率范围之内兼容。当然，如果分辨率相差得特别大，那效果肯定不好。

这里我们可以稍微讲得详细一点，流式布局主要有以下几种：

左侧固定，右侧百分比。

右侧固定，左侧百分比。

两侧固定，中间百分比(圣杯布局或者叫双飞翼布局)。-->由此可见布局也有上下级之分.

所有的都按照百分比来。

流式布局的实现方式：

一个就是按照之前的定义，使用百分比布局。

可以给父元素写一个display:flex, 然后子元素使用flex进行布局。

创建BFC(Block Formating Context),也就是在并列子元素中创建BFC。

之前提到的流式布局的最后一种，可以采用li+float的方法来实现。

五. 响应式布局

响应式布局是最完美的布局，他要确保的是在一个页面的所有终端上都保持一个非常好的效果。当然这对CSS程序员而言就不那么又好了233.

响应式布局的主要方法就是通过流式布局和自适应布局相结合，也就是利用媒体查询和自适应布局进行编写。