CSS三栏布局——圣杯布局、双飞翼布局和flex布局

时间：2023-04-02 13:13:00 HTML

三栏布局是一种两边固定宽度，中间自适应布局的布局。改变浏览器的宽度不会改变两侧的宽度，只是中间区域的宽度会变长变短。三栏布局的实现方法有圣杯布局和双飞翼布局和flex布局圣杯布局效果：html代码：

header

玩亚索

睡觉

吃饭

bottom这里先放中心区域，让浏览器先加载中心区域。css代码:*{color:#fff;}header{background-color:blue;}.main{background-color:橙子;填充：0100px；/*左右填充放置左右区域*/}.left,.center,.right{float:left;}.center{background-color:purple;宽度：100%；/*这将向左和向右推送到下一行*/}。左{背景色：红色；宽度：100px；左边距：-100%；/*向左移动到与中心在同一行并向左对齐*/position:relative;左：-100px；/*向左移动到main的padding区域，中心不会被遮挡*/}.right{background-color:gray;宽度：100px；左边距：-100px；/*将左边移动到与中心在同一行并向右对齐*/positive关于：亲戚；左：100px；/*移动到右侧填充区域*/}footer{background-color:pink;}/*clearfloating*/.clear-fix::after{content:"";显示：块；clear:both;}负边距margin-left:只在你周围的父元素内移动position结合left:以元素原来的位置为基准移动，可能移动到浏览器显示区域外。双飞翼布局效果：html代码：

header

玩亚索sleepingeatingbottomcss代码：.first,.second,.third{float:left;}/*用这个div包住主要内容后，主要内容可以用margin把两边的区域都空出来*/.first{width:100%;背景颜色：紫色；}.content{边距：0100px；}.second{宽度：100px;背景色：红色；左边距：-100%；/*像圣杯一样工作*/}.third{width:100px;背景色：灰色；左边距：-100px；/*效果同圣杯*/}.footer{background-color:pink;明确：两者；/*清除footer上方元素的浮动*/}flex（推荐）flex布局学习可参考：https://www.ruanyifeng.com/bl...效果：html代码：

header

打亚索睡觉吃