web常见的五种前端布局方式

web大前端布局

常用的布局

常用的布局一般分为一下几大类：

文档布局（text）

文档流本质是 nomal flow （普通流、常规流）

元素在文档中的特点 块级元素，和内联元素。

块级元素：是自带有这行效果，在文档中独占一行的效果，块状元素会自上而下的排列且在默认宽度是父元素的100%而高度默认被内容撑开。

内联元素：内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。在文档流中，内联元素的宽度和高度默认都被内容撑开。 什么是文档流（文档布局）将窗体自上而下分成一行一行，块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素。

缺点：在移动端不可以使用pc端的页面，两个页面的布局是不一致的，移动端需要自己再设计一个布局并使用不同的域名呈现

浮动布局（float）

浮动一般用于让块级元素排成一行在同一行显示

任何元素都可浮动，如一个元素设置为浮动元素，浮动元素无论最初是什么都会变成一个行块级元素，拥有disolay：inline-block属性float：left沿着父容器顶部向左推入容器，如果卡住推不动，判断当前位置能否全部显示该子容器，如果能完成 如果不能继续找空档往里推

缺点：脱离文档流，需要清除浮动，高度塌陷（float的破坏性主要是指它会使父容器的高度塌陷，也就是父元素在高度计算的时候会忽略浮动的元素）。

优点：兼容性好，计较简单容易上手

清除浮动

清除浮动是为了父级元素所在容器中的block-level box布局不产生影响所以在浮动布局情况下，让父级得适合的高度

最后在同一结构下, 如果采用浮动布局,所有的同级别兄弟标签都要采用浮动布局浮动布局的盒子宽度在没有设定时会自适应内容宽度

定位布局（position）

relative属性：脱离文档流，但保留占位符，其偏移位置是相对于本身在正常文档流中时的位置， 脱离文档流是说设置了relative属性之后，元素不在z-index：0；的正常文档流中，其z-index的值>0但保留占位符，就是在正常文档流中位置依旧保留着，后续元素不能占位，然后相对于本身正常位置进行偏移。

absolute：完全脱离文档流，不保留占位符，其元素定位是相对于其父级以上，一直追溯至设置了position：relative或fixed属性的外层元素（也包含块元素），如果其外层元素均匀未设置position属性，则定位是相对于HTML文档进行的绝对定位，并不是相对于body的定位

缺点：脱离文档流，会导致后续元素全部脱离文档流，可用行差。

优点： 就是 让元素拥有了 inline-block 宽高限制

流式布局（streaming）

元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。屏幕尺度跨度过大的情况下不能正常显示

使用百分比定义宽高大多数都是用px来固定住，可以根据可视区域（viewport）和父元素的尺寸进行调整，尽可能的适应各种分辨率，往往max-width/min-width等属性控制尺寸流动范围以免过大或者过小影响阅读页面。这种布局方式在WEB前端开发的时早期历史上，用来应对不同尺寸的pc屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果长度过大，那么在相对其原始设计而言过小或过大的屏幕都不能在屏幕上正常的显示。

因为宽度使用百分比（%）来定义，但是高度和文字大小等大都是用px来固定。所以在大屏幕的手机下显示效果变成有些页面元素宽度被拉的很长，但是高度，文字大小文字还是和原来一样，享受到非常的不协调

缺点：如果尺度过大或者过小在屏幕上就不能正常显示

优点：兼容性比较好，当屏幕分辨率变化时元素大小不变布局也不变

弹性布局（rem/em）

弹性布局是css3引入的布局方式，用来代以前的WEB开发人员的一些复杂易错的hacks方法（如float实现流失布局）

rem是相对于html元素的font-size大小而言的，而em是相对于其父元素，使用rem单位的弹性布局在移动端比较受欢迎使用。

、这类布局的特点是，包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位（同「流式布局」或「静态/固定布局」）。早期浏览器不支持整个页面按比例缩放，仅支持网页内文字尺寸的放大，这种情况下。使用em/rem做单位，可以使包裹文字的元素随着文字的缩放而缩放。

rem,em区别：rem,em都是顺应不同网页字体大小展现而产生的。其中，em是相对其父元素，在实际应用中相对而言会带来很多不便；而rem是始终相对于html大小，即页面根元素。

浏览器的默认字体高度一般为16px，即1em:16px，但是 1:16 的比例不方便计算，为了使单位em/rem更直观，CSS编写者常常将页面跟节点字体设为62.5%，比如选择用rem控制字体时，先需要设置根节点html的字体大小，因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px，方便了计算。

缺点：浏览器的兼容性比较差只能到ie9以及以上。

优点：适应性强，在做不同屏幕分辨率的界面时非常使用，可以随意按照宽度，比列划分元素的宽高，实现快捷，易维护。简单，方便，快速。

自适应布局（adaptation）

自适应布局分辨为不一样屏幕分辨率定义布局，可以创建多个静态布局，每一个静态布局对应一个分辨率范围，屏幕分辨率变化时，页面里面的元素的位置会变化而大小不会变，可使用(@media媒体查询)给不同的尺寸和介质的设备切换不同的样式在优秀的响应范围设计下可以给配范围内的设备最好的体验，在同一个设备下实际还是固定的布局

缺点：如果需要不同页面那么还需要写多页的代码

优点：屏幕分辨率变化时，页面里面元素的位置变化而大小不会变化

响应式布局（ BootStrap）

为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。响应式几乎已经成为优秀页面布局的标准，每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。

缺点：媒体查询是有限的，也就是可以枚举出来的，只能 适应主流的宽高，要匹配足够的屏幕大小，工作量比较大，设计也需要多个版本

优点：适应pc和移动端，如果只够的耐心，效果会很完美。

以上就是常见的前端布局，不理解的可以多多查询，浏览，理解。