css两列布局，圣杯布局，双飞翼布局

时间：2023-04-02 17:54:53 HTML

最近几个月一直在用Vue在手机上写项目，主要是写业务逻辑，在js上投入的时间和精力比较多。这两天写页面明显感觉css布局知识不够，于是复习一下布局方式。两栏布局1、浮动.box1.left{float:left;宽度：100px；高度：100px；背景色：红色；}.box1.right{margin-left:100px;高度：100px；背景色：绿色；}

两列自适应

2、定位.box1{position:relative;宽度：100%；高度：100px；}.box1.left{位置：绝对；宽度：100px；高度：100%；背景色：红色；}.box1.right{左边距：100px；宽度：100%；高度：100%；背景色：绿色；}

3、flex.box1{display:flex;高度：100px；}.box1.left{宽度：100px；高度：100%；背景色：红色；}.box1.right{flex:1;高度：100%；背景色：绿色；圣杯布局和双飞翼布局的目的是我们希望先加载中间部分，然后再开始加载左右。重要的事情HolyGrailLayoutHolyGrailLayout在最外层加上padding，让padding-left和padding-right的值等于左右的宽度，然后利用相对定位在两边移动..box{padding:0100px;/*离开左边的距离*/height:100px;}.box.middle{浮动：左；宽度：100%；高度：100%；背景色：黄色；}.box.left{浮动：左；宽度：100px；左边距：-100%；背景色：红色；位置：相对；left:-100px;/*向左拉*/height:100%;}.box.right{浮动：左；宽度：100px；左边距：-100px；背景色：绿色；位置：相对；右：-100px；高度：100%；middleleftright双飞翼布局.box{position:relative;高度：100px；}.middle-wrap{位置：相对；向左飘浮;宽度：100%；高度：100%；}.middle-wrap.middle{高度：100%；边距：0100px；/*离开距离*/background-color:yellow;}.left{浮动：左；宽度：100px；左边距：-100%；高度：100%；背景色：红色；}.right{浮动：左；宽度：100px；高度：100%；左边距：-100px；背景色：绿色；

上一篇：解决输入中占位符的坑

下一篇：单步调试Angular内容投影的一个问题

css两列布局，圣杯布局，双飞翼布局相关文章