html布局的常用的四种实现方式

需求 ：假设高度默认100px ，请写出三栏布局，其中左栏、右栏各为300px，中间自适应

将左右的div宽度设为300px,分别左右浮动，中间盒子不设宽度。注意：先写右边盒子，再写中间盒子，否则先渲染中间盒子，中间盒子会占满该行剩下的宽度，右边盒子只能换行显示，就会出现下面的情况

正常的渲染效果如下所示：

第二种：绝对定位（position:absolute）

设置父盒子position:relative（相对定位），

三个子盒子position：absolute,

左盒子left:0,

右盒子right:0

中间盒子left:300pxright:300px

第三种：flex布局

父盒子 display:flex

左右盒子设置宽度：300px

中间盒子flex:1(flex-grow:1 flex-shrink:1 flex-basis:0%)不考虑元素尺寸自由伸缩

第四种：grid布局

父盒子display: grid

grid-template-columns:300px auto 300px(分割成3列，宽度分别为300px auto 300px)

grid-template-rows:100px(占一行，行高100px)

流动布局

流动布局是浏览器默认的布局方式。他会按照你所写的标签特性，从上至下、从左到右的方式进行排列

在HTML中我们按照标签的排列特性可以将它们分成三类：

1.行级元素：不独占一行，不能设置元素的高度、宽度和底边边距，它的宽度和高度是由他的内容撑起来的。

2.行内块元素：不独占一行，可以设置元素的宽度、高度和底边边距。

3.块级元素：独占一行，元素的宽度、高度、上下边的边距都可以设置。

常用的行级元素有：<span><a>

常用的行内块元素：<img><input><textarea>

常用的块级元素：<div><h1><p><table><tr><td><form><ul><ol><li><dl><dt><dd>

浮动布局

在默认情况下，块级元素会独占一行，但是当我们想让两个块级元素在同一行排列时，我们就可以用到浮动布局

层模型

设置层模型属性会将标签从原来的文本流中上升到浮动层中来，然后调整他在浮动层中的位置，文本层中的标签会覆盖在下面文本层中的标签上面。有相对定位、绝对定位和固定定位三种属性。

rem是相对于 根元素 的字体大小的单位

rem能等比例适配所有的屏幕，根据html的字体的大小来控制rem的大小

2.dpr设备像素比

dpr = 物理像素 / 逻辑像素

物理像素：设计图量出的px（设备显示的px）

逻辑像素：css中设置的px

如果设计图的宽度是640px 或者 750px    dpr = 2

如果设计图的宽度是1080px              dpr = 3

3.vw

视窗宽度

1vw 等于视窗宽度的1%

100vw 等于视窗宽度的100%

4.vw 与 px 之间的换算

如果设计图的宽度是640px  则 dpr = 2

所以：逻辑像素 = 640px /2 = 320px

所以：320px = 100vw

所以：1vw = 3.2px

所以：31.25vw = 100px = 1rem

如果设计图的宽度是750px  则 dpr =2所以：逻辑像素 = 750px /2= 375px

所以：375px = 100vw

所以：1vw =3.75px

所以：26.67vw = 100px = 1rem

如果设计图的宽度是1080px  则 dpr = 3所以：逻辑像素 = 1080px / 3 = 360px

所以：360px = 100vw

所以：1vw =3.6px

所以：27.78vw = 100px

5.根元素字体大小的限制

如果设计图宽度为640px

则：根元素设置为

html{font-size:31.25vw}

如果设计图宽度为750px

则：根元素字体大小设置为

htmt：{font-size:26.67vw}

如果设计图宽度为1080px

则根元素字体大小设置为

html:{font-size:27.78vw}

6.计算方法：

为了方便计算：1rem = 100px,,所以，要除以100

已知 dpr = 2

如果量取设计图的某部分 宽度  300px

物理像素-------逻辑像素-------rem

则：300/2/100 = 1.5rem

7. rem是相对于根元素的字体大小的单位，能等比例适配所有的屏幕，根据html的字体的大小来控制rem的大小

如果设计图为 640px

根元素font-size=31.25vw 相当于100px,相当于 1rem

如果设计图为750px

根元素font-size=26.67vw 相当于100px,相当于 1rem

一般，我们要在公共样式中根据设计图的大小，设置根元素字体的大小，单位为vm，

如果设计图为640px,html{font-size:31.25vw}

如果设计图为750px，html{font-size:26.67vw}

然后，我们量取得px/2/100即：物理像素/2/100