圣杯布局

时间：2023-03-30 15:19:37 CSS

1、float浮动会脱离文档流，处理不当会出现布局问题，但兼容性好div{height:300px;}.left{background:red;宽度：300px；浮动：左；}。右{背景：绿色；宽度：300px；float:right;}.center{background:yellow;

2.flex比浮动和定位更完美。div{高度：300px;}.left{背景：红色;宽度：300px;}.right{背景：绿色;宽度：300px；}.center{背景：黄色；flex:1;}.out{display:flex;

3.定位快捷方便，但是定位脱离文档流后，会影响以后的布局，类似浮动div的问题{height:300px;}.left{background:red;width:300px;位置：绝对；左：0；}。右{背景：绿色；宽度：300px；位置：绝对；右：0；}.center{背景：黄色；:300px;}.out{pos条件：相对；/div>4。table兼容性好.left{background:red;宽度：300px;}.right{背景：绿色;宽度：300px；}.center{背景：黄色；}.out{宽度：100%；高度：300px；显示：表格；}.outdiv{显示：表格单元格；5.网格新特性，包容性差异.left{background:red;}.right{background:green;}.center{background:yellow;}.out{display:grid;网格模板行：300px；网格模板列：300??px自动300px；宽度：100%；6.inline-block+calc注意inline-block产生的空间div{height:300px;}.left{背景：红色；宽度：300px;}.right{背景：绿色;宽度：300px；}.center{背景：黄色；width:calc(100%-600px);}.out{font-size:0;}.outdiv{display:inline-block;7.inline-block+margin+paddingdiv{height:300px;}.left{background:red;左边距：-300px；宽度：300px;}.right{背景：绿色;右边距：-300px；宽度：300px；}.center{背景：黄色；宽度：100%；}.out{填充：0300px；font-size:0;}.outdiv{display:inline-block;

上一篇：再学前端JavaScript（二）JavaScript语句

下一篇：HTML概要

圣杯布局相关文章