前端学习笔记（9月18日至9月23号）

1. 如何在弹性盒中实现横向滚动？

        在弹性盒中，当一行中的内容过多时，它也不会撑开页面，既不会形成横向滚动条。如果给里面的内容增加样式，是不会好用的。那如何使内容排在一行是而不受挤压呢？可以实现如下代码：

flex-shrink:0;

这样就可以了。

其中可以有两个参数，分别是：1  挤压；0 不挤压。

2.多列布局

2.1 什么是瀑布流布局？

        是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面 滚动条 向下滚动，这种布局还会不断加载 数据块 并附加至当前尾部。 

2.2 如何在多列布局中避免盒子被打断？

        可以在div内部加一个属性：

break-inside:avoid;

及不允许div折行。知道就知道，不知道就不知道。

3.响应式布局

3.1 什么是响应式布局？

        响应式布局是同一页面在不同的屏幕上有不同的布局，即只需要一套代码使页面适应不同的屏幕

        最常用的格式为：

@media screen and (max-width:？？px 或 min-width:？？px){
	/*标签*/
}

        其中的问号为不同设备的断点。手机为480px,平板为768px,电脑一般为1080px。

3.2 缺点

        （1）效率低。

        （2）代码累赘，响应时间长。

4 视口单位

4.1 vh和vw

css3中引入一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口的高度。

单位	含义
vw	相对于视窗的宽度，1vw等于视口宽度的1%，即视窗宽度是100vw
vh	相对于视窗的高度，1vh等于视口高度的1%，即视窗高度是100vh

 

用视口单位度量，视口为宽度为100vw，高度为100vh。例如，在桌面端浏览器视口尺寸为650px，那么1vw=650*1%=6.5px

vw/vh和百分比的区别

单位	含义
%	大部分相对于祖先元素，也有相对于自身的情况
vw/vh	相对于窗口的尺寸

 4.2 em和rem

4.2.1什么是rem:

        首先：rem全称（font size of the root element）（根元素的字体大小）
        它是css3新增的尺寸（度量单位），根节点（html）的font-size决定了rem的尺寸单位，也就是所它是一个相对的单位。
        rem是一个相对长度单位。相对于父元素的倍数来计算。
        浏览器默认字体大小是16px,1rem就是16px.

4.2.2 什么是em：

        首先 em是相对于父元素的字体大小来变化的
        跟rem相比em有局限性，因为em只能相对父级文字大小变化，而rem是相对于根元素大小变化的。

 4.3 rem布局准备工作

<script>    

//fontsize计算
  document.documentElement.style.fontSize=
    document.documentElement.clientWidth/750*16+'px'



//fontsize=当前设备的css宽度/物理分辨率*基准font-size

</script>