博文纲领：
web前端学习:移动端开发常用布局—流式布局详细讲解
1、网页布局中，流式布局是其中一种，它允许元素的宽度根据屏幕分辨率自动调整，确保页面在不同设备上显示时，元素大小也能随之变化，这是移动端开发中常用的一种布局方式。流式布局适用于以下场景：当页面在不同尺寸的设备上显示时，需要适应屏幕大小的变化，以提供良好的用户体验。
2、静态布局：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。
3、流布局与响应式网页设计是现代网页设计中的两个关键概念，它们在处理不同设备和屏幕尺寸时展现出独特优势，同时也存在显著差异。早期Web前端开发者在移动端开发中，采用固定布局策略。
4、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。
5、它的流式-固定布局（fluid-fixedlayout）可以根据桌面端以及移动设备的分辨率自动优化要呈现的网页内容。它支持多种网格布局，包括多列混杂的嵌套模式。Web前端开发框架有Bootstrap、Vue、AmazeUI。前端框架有：Bootstrap框架；Foundation框架；Angular框架；React框架；VueJS框架；Node.Js。
前端必会的三种垂直对齐方式
1、前端开发中，掌握三种关键的垂直对齐方式至关重要。首先，弹性盒子布局，Flexbox，以其强大的适应性，能够使元素在容器内根据可用空间自动调整大小，确保在不同屏幕尺寸下都能保持良好的布局效果。
2、弹性盒子布局 弹性盒子布局，简称Flexbox，是一种创新的布局策略，赋予元素在容器内部适应不同显示环境的能力。此方法让元素自动调整大小，以匹配容器和设备的显示需求，为页面布局提供了高度的灵活性和响应性。网格布局 网格布局专为二维布局设计，擅长处理行与列的布局问题，实现结构化和有组织的元素排列。
3、文本对齐： 水平对齐：使用textalign属性。其值有left、right和center，这些值分别对应文本的不同水平对齐方式。 垂直对齐：使用verticalalign属性。其值包括baseline、texttop、textbottom、sub和super。这些值用于控制内联元素或表格单元格内容的垂直对齐方式。文本间距： 文本缩进：使用textindent属性。
前端面试题系列之-CSS及页面布局篇
参考链接： CSS实现不换行/自动换行/文本超出隐藏显示省略号 object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能 import规则一定要先于除了@charset的其他任何CSS规则。
Flex布局的使用：Flex布局是一种强大的布局方式，通过flexdirection、flexwrap、justifycontent等属性可以实现复杂的响应式布局。了解flex： 1的含义以及常见布局问题的解决方案是掌握Flex布局的关键。选择器和优先级的理解：CSS选择器用于选择网页元素并应用样式。不同选择器的权重不同，优先级也不同。
不要想着IE7没了就不用考虑浏览器相容性问题，chrome/firefox、webkit的各种版本，手机的各种浏览器、各种终端都要处理浏览器相容性问题，恩，对，偶尔还有flash来着。相容各种终端、相容各种解析度、相容浏览器都是相容性问题，这是FE的命，得认。抱着让使用者有最好体验的想法去做，收获更大。
Flex布局，适用于一维布局。Grid布局，适用于二维布局。定位布局。表格布局。浮动布局。重绘与回流：重绘：样式改变时的屏幕绘制过程。回流：元素尺寸、位置变化时的页面重新计算与绘制。减少回流可以通过优化CSS代码实现，如避免频繁操作DOM、合并样式等。CSS动画：通过transition、transform和animation实现。
前端html5自适应页面布局的方法有哪些?
通过设置viewport元标签，可以控制浏览器中的viewport大小和缩放比例，实现自适应布局。viewport元标签内通常包含设置设备独立像素、初始缩放比例以及最小和最大缩放比例的属性，这些属性帮助浏览器根据设备屏幕尺寸调整页面布局。采用rem单位进行布局，依据页面根元素的字体大小来设置其他元素尺寸，实现自适应布局。
自适应站点对百度友好设计，通过以下方式实现：在viewport标签下添加applicable-device标注，明确告诉百度“我是自适应页面”，以便于百度识别。在百度站长平台的Sitemp提交工具中，为mobile type标记，以区分移动网页。自适应网站能够提供更好的浏览体验，但设计时需考虑页面布局。
在设计自适应网站页面时图片自动适应大小，在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制 用em替换px 流动布局（fluid grid）的使用，“流动布局”指的是各个区块的位置都浮动，不是固定不变的。
添加禁止缩放功能到HTML5项目，可通过在页面头部设置meta标签来实现。代码示例如下：在上述代码中，`user-scalable`属性设置为`no`，即禁止用户缩放页面。`width=device-width`表示页面宽度等于设备宽度，`initial-scale=0`表示页面初始缩放比例为1，`maximum-scale=0`表示页面最大缩放比例也为1。
实现难 响应式网站主要是一HTMLCSS3为基础，需要精通这两种技术的高手。现在能够将这两种技术运用到恰到好处的网站设计师并不多见，如果设计师对这两种技术不够精通，会导致就算设计师做出很棒的页面，但是实现以后，不会完全一模一样。