当前位置：首页 > Web前端 > HTML

css三栏布局的五种写法，居中自适应，左右固定宽度

时间：2023-04-02 21:39:35 HTML

假设已知高度，请写一个三栏布局，其中左右各300px，中间自适应1，左右浮动

这是一个浮动布局

2.绝对定位

这是绝对定位

3、flex布局

这是表布局

5、网格布Bureau

这是网格布局

优缺点：浮动布局：由于浮动布局脱离了文档流，在实际使用过程中它很好地处理了浮动（清除浮动）。如果处理不好，就会出现一些问题。这是它的缺点；优点是兼容性更好。它是从文档流中分离出来的，所以后面的子元素也是从文档流中分离出来的，导致实用性较差。flex布局：css3新的布局方式具有更好的兼容性，有效解决了以上两个问题。表格布局局：兼容性好，由于ie8不兼容flex布局，此时可以使用table布局；缺点：除了历史批判之外，只要三栏布局中的一栏超过规定高度，其他两栏也会效仿。随着高度变高，有些场景不适合网格布局：可以做很多事情，代码量会比较少。如果去掉已知高度，哪些不适用？效果图：

上一篇：使用ajax引入静态页面常用的页眉底部

下一篇：简单探索CSS3Resize

css三栏布局的五种写法，居中自适应，左右固定宽度相关文章