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)

1、首先打开网页制作应用程序后，通过打开现有编辑区内容进行说明。

2、然后在菜单栏选择查看，其中点击放大和缩小对编辑区进行页面缩放。

3、通过使用快捷命令ctrl+=放大编辑区页面。

4、然后通过使用快捷命令ctrl+-缩小编辑区页面。

5、或者在菜单栏中点击查看>缩放比率选择百分比来放大缩小编辑区。

可以用flex,float,table等方式实现。

flex设置方式相对比较简单，只要根据需要，对内部的两部分内容分开就可以了。

float设置方式要考虑左右两部分的内容，并且要记得清除浮动，以免影响显示。

table方式可以设置两边的内容都是单元格。

还有其他的实现方式，可以根据实际项目进行选择。

---