时间:2023-08-30 01:30:01 | 来源:网站运营
时间:2023-08-30 01:30:01 来源:网站运营
css常见布局实战:一、使用flex实现头部,脚部定高;中部高度自适应,左右两列定宽不可伸缩,中间内容区自适应布局6个容器属性:1.flex-direction:row/column 横轴为主轴/纵轴为主轴2.flex-wrap:nowarp/warp 换行/不换行3.flex-flow:direction|| warp缩写4.justify-content:定义子项在主轴上的对齐方式 flex-start左对齐 flex-end右对齐 center水平居中 space-between每项间隔相等不循环 space-around每项间隔相等循环5.align-items:交叉轴对齐方式flex-start上对齐 flex-end下对齐 center垂直居中 baseline: 项目的第一行文字的基线对齐stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度6.align-content:多根轴线的对齐方式2个项目属性1.order:数值越小,排列越靠前,默认为02.align-self:允许容器中某个项目有与其他项目不一样的对齐方式,auto,flex-start,flex-end,center,baseline,stretch
2.元素尺寸或自适应能力:由4个项目属性控制flex-grow:剩余空间放大比例flex-shrink:空间不足缩小比例flex-basis:分配多余空间之前项目占据的主轴空间flex:flex-grow flex-shrink flex-basis
代码:<!DOCTYPE html><html> <style> body{ display: flex; flex-direction: column; } #header,#footer{ flex:0 0 30px; background-color: hotpink; } #center { display: flex; /* flex:1 == 1 1 auto auto指的是项目本来大小,因未给center设置高度,center高度由子元素最高者决定 flex-direction默认为row */ flex:1; } #dyleft, #dyright { flex: 0 0 100px; height: 300px; background-color: pink; } #dyleft{ order: -1; } #dycenter { flex: 1; height: 600px; background-color: yellow; } </style> <body> <div id="header">头部</div> <div id="center"> <div id="dycenter">dycenter</div> <div id="dyleft">左栏div</div> <div id="dyright">右栏divx</div> </div> <div id="footer">尾部</div> </body></html>
二、使用float实现此布局<!DOCTYPE html><html> <style> #header{ height: 50px; background-color: hotpink; } #center { padding:0 200px 0 180px; height:100px; } #dyleft{ float:left; margin-left:-100%; /*中间栏的位置摆正之后,左栏的位置也相应右移,通过相对定位的left恢复到正确位置*/ position:relative; left:-180px; width:180px; height:100px; background-color: #0c9; } #dyright { float:left; margin-left:-200px; position: relative; /*中间栏的位置摆正之后,右栏的位置也相应左移,通过相对定位的right恢复到正确位置*/ right:-200px; width:200px; height:100px; background-color: #0c9; } #dycenter { float:left; width:100%;/*左栏上去到第一行*/ height:100px; background-color: yellow; } #footer{ clear: both; height:50px; background-color: hotpink; } </style> <body> <div id="header">头部</div> <div id="center"> <div id="dycenter">dycenter</div> <div id="dyleft">左栏div</div> <div id="dyright">右栏divx</div> </div> <div id="footer">尾部</div> </body></html>
双飞翼布局:为了中间div内容不被遮挡,直接在中间div内部创建子div用于放置内容,在该子div里用margin-left和margin-right为左右两栏div留出位置。<!DOCTYPE html><html> <style> #header{ height: 50px; background-color: hotpink; } #center { height:100px; } #dyleft{ float:left; margin-left:-100%; width:180px; height:100px; background-color: #0c9; } #dyright { float:left; margin-left:-200px; position: relative; width:200px; height:100px; background-color: #0c9; } #dycenter { float:left; width:100%; height:100px; background-color: yellow; } #inside { margin:0 200px 0 180px; } #footer{ clear: both; height:50px; background-color: hotpink; } </style> <body> <div id="header">头部</div> <div id="center"> <div id="dycenter"> <div id="inside">dycenter</div> </div> <div id="dyleft">左栏div</div> <div id="dyright">右栏divx</div> </div> <div id="footer">尾部</div> </body></html>
[css] 第1天 圣杯布局和双飞翼布局的理解和区别,并用代码实现 · Issue #2 · haizlin/fe-interview关键词:实战,布局