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

html-css010

html布局的常用的四种实现方式,第1张

需求 ：假设高度默认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、HTML布局主要有两种方式，一种是表格布局，一种是DIV布局。2、HTML表格布局是WEB1.0时代主要使用的布局方式，即使用TABLE标签进行布局，优点是布局比较简单。3、HTML DIV布局是WEB2.0时代主要使用的布局方式，优点是符合W3C标准，载入速度比较快，也比较便于做结构分离。4、现在一般都是提倡使用DIV布局，但也不是说就淘汰表格布局了，视具体的场景需要，在很多场景中都是两种混合使用的。5、希望对你有帮助。

html网页页面布局如何切换到设计视图 方法如下，1、首先，打开你常用的浏览器，就可以看见弹出的是当前浏览器默认的主页。

2、点击浏览器右上角的三点，在弹出来的方框里找到“设置”选项并点击。

3、然后在弹出来的页面中可见目的浏览器绑定的页面链接，我们点击链接后面的“×”号，把该链接删掉。

4、然后在输入框里输入我们想要修改的主页网址，再点击右侧的保存图标。

5、然后关闭浏览器，重新打开，就可以看见弹出来的主页已经变成我们想要的主页啦。