布局那件事

时间：2023-03-31 13:19:45 CSS

1.左边固定宽度右边自适应的两列

left

右

1.float+margin.left{float:left;宽度：100px；高度：100%；}.right{高度：100%；margin-left:100px;}2.float+overflow.left{float:left;宽度：100px；背景：红色；}.right{溢出：隐藏；背景：黄色；}3.flex.parent{显示：flex；}.left{背景：红色；宽度：100px;}.right{背景：黄色;flex-grow:1;}2.左右固定三列，中间自适应

1.Flow.left{浮动：左；背景：红色；宽度：100px；高度：100px；}.right{浮动：右；背景：黑色；宽度：100px；高度：100px；}.center{背景：黄色；左边距：100px；右边距：100px；高度：100px；}2.BFC.center{背景：黄色；高度：100px；溢出：隐藏；}3.Flex.container{宽度：100%；高度：100px；显示：flex；}.left{背景：红色；宽度：100px;}.right{背景：黑色;宽度：100px；order:2;}.center{背景：黄色;弹性增长：1；order:1;}4.absolute.container{宽度：100%;位置：相对；}.left{背景：红色；宽度：100px；高度：100px；位置：绝对；左：0；顶部：0;}.right{背景：黑色;宽度：100px；高度：100px；位置：绝对；右：0；顶部：0;}.center{背景：黄色;边距：0100px；高度：100px；}

上一篇：重温css(4)——样式来源与层叠规则

下一篇：Web前端就业待遇如何？高薪需要哪些技能？

布局那件事相关文章