前端开发小知识点整理

1. 响应式编程：通过百分比和(vw,vh,em,rem)进行前端编程实现web前端页面的适应性编程，需要注意的点整理如下：
   • 百分比是相对父view而言的，设置当前的view的百分比要依赖于父view的宽和高，如果没有设置父view的宽和高此view设置为百分比则其等于fit-content，以所有子view的高度为当前view的高度。
   • vw,vh则是将当前屏幕的分辨率分为100份，类似于Android的dp，需要注意的是vh和vw始终是以当前屏幕的宽高分辨率划分。如果设计文稿是以375宽度设计的，则建议开发的时候以iphone se的375667进行开发。此时的view宽度/375100,高度可以借助于比例aspect-ratio进行控制。

// 声明全局变量 借助于css的var函数次函数的变量必须以--开始
:root {
    --theme_color: #D7362F;
    --nav_ratio: calc(375px/375);
    --vw_ratio: calc(100vw/375);
}
//通过css的计算函数 calc 动态计算width和height 原理和上面的注释一致
width: calc(50*var(--vw_ratio));
height: calc(50*var(--vw_ratio));

* 开发中建议以vw，vh，em，rem的方式进行开发，若使用百分比也需要在进入页面时候设置body的宽高为100vh和100vw。
* 居中显示可以通过上面的计算方式适应式设置view的宽度然后让其居中显示。

2. ios手机中，浏览器为了提升用户体验，针对input且字号小于16的时候，用户点击input并获取到焦点的时候会自动整体放大网页，更方便用户输入和阅读，如果不需要这个功能，可以通过设置页面最大缩放为1和用户不能修改缩放来控制，还有就是将input的字号修改为16或者以上（这种不建议毕竟ui样式整个设计的）。
   统计用户在前端页面的停留时间
   input输入框ios放大现象
3. 在web中设置滑动并可能出现的几个小问题：
   • 通过overflow：auto/scroll可以设置滑动，但是需要注意的是设置的元素的精确高度，如果不设置精确高度，则默认元素高度是整个子元素的高度，此时不会触发其竖向滑动（横向也是这样）
   • 针对元素没有设置横向滑动隐藏的时候，元素在样式上特别是ios手机上会出现横向随意拖动，效果不好，将元素的横向滑动禁止即可。
   • 还有一个需求：通常元素滑动后重新加载数据需要再滚动到初始位置方便用户，此时需要注意是谁的的滚动就是让谁调用函数scrollTo(0,0)。
     元素滑动回初始位置
4. z-index:web中的元素也存在z轴上的层级关系，后面的元素会覆盖前面的元素（这个不同设备，不同浏览器也不太相同，ios设备会出现，Android设备倒不会出现），想让前面的元素显示在后面的元素上面，直接设置这个属性即可，属性值越大在z轴上越靠上面。
5. 在Web端的开发中常用display:flex进行横向的或者竖向的布局，所以下面是整理了与其相关的几个属性的整理：
   • flex-direction： 用于指定Flex容器中子元素的排列方向。它可以取以下值：
     • row（默认值）：子元素将水平排列。
     • row-reverse：子元素将水平排列，但是从右到左。
     • column：子元素将垂直排列。
     • column-reverse：子元素将垂直排列，但是从下到上。
   • flex-wrap：用于指定当Flex容器中的子元素超出容器时是否换行。它可以取以下值：
     • nowrap（默认值）：不换行，所有的子元素都将在一行显示。
     • wrap：换行，子元素将根据需要换行显示。
     • wrap-reverse：换行，但是从最后一行开始。
   • flex-flow：是一个简写属性，用于同时设置flex-direction和flex-wrap属性。例如：
     • flex-flow: row wrap 等同于：flex-direction: row; flex-wrap: wrap;
   • justify-content ：用于定义当Flex容器有多余空间时，子元素在主轴（即flex-direction指定的方向）上的对齐方式。它可以取以下值：
     • flex-start（默认值）：子元素靠向主轴的起始位置。
     • flex-end：子元素靠向主轴的结束位置。
     • center：子元素在主轴上居中对齐。
     • space-between：子元素之间的空间平均分布，第一个元素靠向主轴的起始位置，最后一个元素靠向主轴的结束位置。
     • space-around：子元素周围的空间平均分布，即每个子元素两侧的空间相等。
     • space-evenly：所有子元素之间的空间和首尾空间都相等。
   • align-items：用于定义当Flex容器有多余空间时，子元素在交叉轴（即非flex- direction指定的方向）上的对齐方式。它可以取以下值：
     • flex-start：子元素靠向交叉轴的起始位置。
     • flex-end：子元素靠向交叉轴的结束位置。
     • center：子元素在交叉轴上居中对齐。
     • baseline：子元素的基线对齐。
     • stretch（默认值）：如果子元素没有设置高度或宽度，将拉伸以填满整个容器的高度或宽度。
   • justify-content 和align-items是相对的，前者是flex指定的方向的子元素的分步，后者是其相反方向的子元素的分步。
   • align-content： 当Flex容器有多条轴线（即多行）时，用于定义这些轴线在交叉轴上的对齐方式。它同样可以取与align-items相同的值，但主要用于处理多行的情况。例如，当使用flex-wrap: wrap;时，该属性特别有用。默认值为stretch。
   • flex-grow： 用于定义Flex项的放大比例，默认值为0，即如果存在剩余空间，也不放大。例如，如果一个Flex项的flex-grow值为2，而另一个为1，则前者将占据更多的剩余空间。
   • flex-shrink：用于定义当空间不足时，Flex项的缩小比例，默认值为1，即如果空间不足，所有项都将缩小以适应容器大小。你可以通过设置此属性为0来阻止某项缩小。
   • flex-basis：用于定义在分配多余空间之前，项目占据的主轴空间（main size）。它可以是一个长度（如200px）或一个百分比值（如25%）。默认值为auto，即项目的原始大小。