2024年单独移动端页面-流式布局和flex弹性布局技术(3)，靠着这份900多页的PDF面试整理

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

1）下载并引入css初始化normalize.css/

2）特殊样式：如下

/让盒子变成css3盒子模型，在加上boder或者padding后不再撑大盒子了/

box-sizing: border-box;

/为移动端链接清除默认蓝色背景/

-webkit-tap-highlight-color:transparent;

/为移动端去掉外观样式/

-webkit-appearance：none;

/* 禁止长按屏幕弹出菜单 */

img,a { -webkit-touch-callout:none; }

---

一、流式布局是什么

========================================================================

流式布局就是百分比布局

1、宽度给百分比来根据屏幕的宽度设定的，不受固定像素的限制

2、为了照顾盒子在合理的范围内，给盒子一个max-width、min-width、max-height、min-height

二、flex弹性布局

=========================================================================

1.布局原理

---

通过给父盒子添加display:flex;来控制子盒子的位置和排序方式，父盒子是容器，子盒子是项目。

特点：

1.1、任何元素都可以设置弹性布局

1.2、自适应的效果

1.3、当父盒子设置为flex布局后，子元素的float、clear、vertical-align属性将失效。

2.运用场景

---

2.1、当使用pc端布局的时候，我们还是用传统的方式布局

2.2、如果移动端或不考虑兼容性问题的pc端页面布局，则考虑使用flex布局

3.属性

---

• 给父盒子添加 display：flex；当布局模式为flex技术后，行内元素就不用转换成块元素了，直接可以设置样式，也不需要清除浮动了，子盒子默认沿着主轴方向排列。

• 给父盒子添加的属性：

1、设置主轴的方向 ：属性 flex-direction：如果设置的主轴是x轴，则y就是侧轴，我们的子元素是根据主轴来排序的。

| 属性值 | 说明 |

| — | — |

| row | 从左到右 X轴 |

| row-reverse | 从右到左 |

| column | 从上到下Y轴 |

| column-reverse | 从下到上 |

2、设置主轴上的子元素的排序方式 ：属性：justify-content：

| 属性值 | 说明 |

| — | — |

| flex-start | 默认值，如果主轴是X轴，则排序的方式是从左到右 |

| flex-end | 从尾部开始排列，相当于右浮动，但是子盒子的排序顺序是正确的 |

| flex-center | 在主轴居中对齐，如果主轴是X轴，则就是水平居中 |

| space-around | 平分剩余空间，就是每个子盒子的左右距离一样 |

| space-between | 先两边的盒子贴边，再平分剩余的空间 |

3、设置侧轴上的子元素的排序方式(单行） ：属性：align-items：

| 属性值 | 说明 |

| — | — |

| flex-start | 默认值：从上到下 |

| flex-end | 从下到上 |

| center | 挤在一起，如果主轴是X轴，就是垂直居中 |

| stretch | 沿着侧轴拉伸 |

---

代码如下（示例）：

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦*

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-JBaf9pv2-1715631400744)]