1. 现在前端流行什么页面布局方式
前端常用页面布局分为下面几种：
1.静态布局
给页面元素设置固定的宽度和高罩隐度，单位用px。窗口发生变化时，会出现滚动条，内容会被遮挡。
优点：简单方便，不存在兼容问题。
缺点：网页无法根据用户设备屏幕的宽度进行自适应。
2.流式布局
也叫100%布局。宽度单位为百分比。流式布局常用的设计答孙模板:左侧固定+右侧自适应，左右固定宽度+中间自适应。
优点：可以适应不同尺寸的屏幕
缺点：如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定
3.响应式布局
使用meta标签设置，页面元素宽度随窗口调整自动适配。采用自适应布局和流式布局的综物举厅合方式，为不同屏幕分辨率范围创建流式布局。
优点：适应pc和移动端，如果足够耐心，效果完美
缺点：
（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。
（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。
4.弹性布局
就是采用css3中的flex属性。
优点：简单、方便、快速
缺点：CSS3新特性,浏览器兼容性非常头疼。而且手机浏览器对flex的支持也不是很理想。
2. 网站前端开发常用的布局方式有哪些
实现网页布局的方式方法比较多，布局方式可以大概分为这几类。
布局种类：
1、table布局（网页的兴起，1995）
2、Flash布局（自由的黄金时代，1996）
3、div+css（CSS的诞生，1998）
4、栅格与响应式（移动端的兴起，2007与2010）
当前WEB前端开发使用DIV+CSS的布局方式会比较多也比较常用吧，网页布局看起来貌似简单，但是它需要综合使用很多HTML+CSS的知识，总的来说知识量是不小。如果想系统化的了解HTML+CSS方面的知识，建议你选择一本比较不错的HTML5相关书籍（主要看知识逻辑、知识的表达方式，比如《HTML5布局之路》）进行学习，让自己的知识更扎实一些，不然学的零零散散的。
Tips：学习好HTML+CSS有利于后面学习JavaScript，毕竟需要它们两者结合在一起才可以实现出可交互的前端页面。
3. 网站前端开发惯用的布局方式有哪些
网站布局之“厂”字型
所谓的“厂”字型布局结构，就是指页面顶部为横条网站标识和广告条，下方左面为主菜单，右面显示内容的布局。菜单条与背景，整体效果类似“厂”字。“厂”布局是目前最常见的一种网页布局方式。这种布局的优点是页面结构清晰，主次分明。缺点是由于被使用得过多，显得缺乏创意，略显呆板。
网站布局之“三”字型
这种布局多用于国外站点，通常页面上方横向几条色块，将页面整体分割为若干部分，色块中大多放广告图片或者Flash动画。
网站布局之 “国”字型
“国”字型布局通常上下各有一个广告条或者其他栏目条，左面是主菜单，右面放友情链接或者其他栏目等，中间是主要内容。这种布局的优点是充分利用版面，信息量大。缺点是页面显得比较拥挤和局促，不够灵活。
网站布局之门户型
这类网页通常内容多，信息量大，通常没有时显的线条作为边界，图片用得也比较少，一般通过文字的排列产生视觉上的分区效果。
网站布局之区块型
区块型布局现在出现的越来越多，在网页上各个区域具有封闭的边界，经过合理放置显得清晰美观。其缺点是由于片面固定，各区域很难根据其中的内容的多少而调整大小，因此不适宜用于区域内容的长度经常变化的网页。
网站布局之宣传单型
宣传单型布局页面就像一张宣传海报，以一张精美图片作为页面的设计中心，常用于个性类站点。其优点是漂亮吸引人；缺点就是页面中大面积使用图片，导致浏览速度相对较慢。所以这类页面同是可以作为宣传单使用。
4. 【web前端】十分钟彻底弄懂 flex 布局
flex（flexible box：弹性布局盒模型），是 2009 年 w3c 提出的一种可以简洁、快速对页面进行弹性布局的属性。主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到以下浏览器支持：
其中在webkit内核的浏览器中使用时，必须加上 -webkit- 前缀。
使用 flex 布局的容器（flex container），它内部的元素自动成为 flex 项目（flex item）。容器拥有 两根 隐形的轴，水平的 主轴 （main axis），和竖直的 交叉轴 （cross axis）。
主轴开始的位置，即主轴与左边框的交点，称为 main start；主轴结束的位置称为 main end；交叉轴开始的位置，即交叉轴与上边框的交点，称为 cross start；交叉轴结束的位置称为 cross end。
item 按主轴或交叉轴排列，item 在主轴方向上占据的宽度称为 main size，在交叉轴方向上占据的宽度称为 cross size。
注意：使用 flex 容器内元素，即 flex item 的 float，clear、vertical-align 属性将失效。
flex-direction 决定主轴的方向，即项目排列的方向。有四个可能的值：row（默认） | row-reverse | column | column-reverse。
flex-wrap 决定项目在盒中无法撑满的情况下，是否换行。
它是 flex-direction 和 flex-wrap 的集合简写形式，如：row wrap | column wrap-reverse 等。默认值为 row nowrap，即横向排列 不换行。
决定 item 在横向主轴上的对齐方式，可能的值有 flex-start（默认），flex-end，center，space-between，space-around。当为横向主轴时，具体含义如下：
决定 item 在纵向主轴上的对齐方式，可能的值有 flex-start（默认），flex-end，center，space-between，space-around。当为纵向主轴时，具体含义如下：
决定了 item 在横向主轴上的对齐方式，可能的值有 flex-start | flex-end | center | stretch | baseline ，当为横向主轴时，其具体含义为：
决定了 item 在纵向主轴上的对齐方式，可能的值有 flex-start | flex-end | center | stretch | baseline ，当为纵向主轴时，其具体含义为：
该属性定义了当有多根主轴时，即 item 不止一行时，多行在交叉轴上的对齐方式。注意当有多行时，定义了 align-content 后，align-items 属性将失效。align-content 可能值含义如下（假设主轴为垂直方向）：
item 的属性在 item 的 style 中设置，item 共有如下六种属性：
order 的值是整数，默认为 0，整数越小，item 排列越靠前，如上图所示。
它定义了当 flex 容器有多余空间时，item 是否放大。默认值为 0，即当有多余空间时也不放大；可能的值为整数，表示不同 item 的放大比例。
定义了当容器空间不足时，item 是否缩小。默认值为 1，表示当空间不足时，item 自动缩小，其可能的值为整数，表示不同 item 的缩小比例。
表示 item 在主轴上占据的空间，默认值为 auto。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 三属性的简写总和。
align-self 属性允许 item 有自己独特的在交叉轴上的对齐方式，它有六个可能的值，默认值为 auto。
5. 前端几种常见的布局方式
1.静态布局（固定宽高）
2.弹性布局（flex）————常用
3.圣杯布局
flex：flex-group、flex-shrink、flex-basis
flex：auto/none/负数/一个长度或百分比/两个非负数/一个非负数和一个长度或百分比等
A，flex-group：当父元素有剩余空间时，子元素占据剩余空间的量
B，flex-shrink：当父元素的空间不足以展示所有的子元素，父元素没设置flex-wrap，子元素需要进行收缩的量
C，flex-basis：表示该子元素的初始宽度
4.自适应布局（为不同的屏幕分辨率定义的布局 @media媒体查询技术）
5.流式布局：（宽高用百分比，按屏幕分辨率调整，布局不发生变化）
6.响应式布局（使用meta标签，宽高随窗口调整自动适配，适应布局和流式布局的综合方式）
7.栅格布局
1）.栅格(网格划分)：在一个特定区域内划分出有规律的格子，依靠这些格子进行有规律的版面布局。
使用栅格布局：bootstrap（12列），element（24栏），antDesign
2）.栅格布局
container：栅格系统容器；rows：行；cols：列；gutters：各列间的空隙
3）.栅格布局实现响应式布局
8.table布局（使用表格进行页面排版和样式设置）
1）.用法
display:table
display:table-cell，相当于td元素
display:table-row，相当于tr元素
table-layout:fixed | auto(默认)：table-layout 属性用于显示表格单元格、行、列；auto, 自动表格布局，列的宽度由单元格中最大内容的宽度决 定；fixed ,固定表格布局。
6. web前端几种常见的网页布局
现在的网页差不多都采用分列布局，
常见的有单列布局（如网络首页）、双列布局、三列布局和混合布局，超过三列的布局很少见。
最简单的要数单列布局了，这种布局适合各种搜索引擎主页，干净的界面和较少的干扰信息给用户较好的体验。
