本文就来为大家介绍3种常见的css页面布局：双飞翼布局、粘连布局、左右两列布局，希望对大家有一定的帮助。
（推荐教程：CSS视频教程）
一、左右两列布局
1、代码如下
立即学习“前端免费学习笔记（深入）”；
两列布局 *{padding: 0;margin: 0;}body{min-width: 600px;}.lef{width: 100px;height: 400px;background: hotpink;float: left;}.rig{height: 400px;background: yellowgreen;margin-left: 50px;/*给right开启BFC利用BFC的特性：bfc的区域不会与浮动的box重叠*//* 溢出内容部分被切割,所以使用省略号表示 */overflow: hidden;/*出现省略号需要四个设置：* display: block;* overflow: hidden;* white-space: nowrap;* text-overflow: ellipsis* *//* white-space: nowrap; *//* text-overflow: ellipsis; */}.con{width: 300px;margin: 0 auto;}leftlzprightrightrightrightrightrightrightrightrightrightrightrightrightright
rightrightrightrightrightrightrightrightrightrightrightrightrightright
rightrightrightrightrightrightrightrightrightrightrightrightrightright
rightrightrightrightrightrightrightrightrightrightrightrightrightright
效果如下：
2、必要说明
外层容器con如果为固定宽度，right元素的overflow: hidden;是必须的，否则会出现rig中的字体不在rig里面。
外层容器con宽度如果是100%，或者默认，此时right元素的overflow: hidden;可有可无，页面不会因此受到影响。
二、粘连布局
1、代码如下：
粘连布局 *{padding: 0;margin: 0;}html, body{height: 100%;}.wrap{/* 设置wrap的最小高度,当main元素中的内容较少或者为空时，也能保持100%高度 */min-height: 100%;background: yellowgreen;text-align: center;}.main{/*main的height值由内容决定*//*当内容不足一屏时，下面的设置不会撑开父元素wrap，此时wrap的min-height设置生效，* 当内容刚好一屏时，下面的设置开始撑开父容器，其height值为100%+50px。* 拉开这50px的原因是防止footer遮盖住main内容，这个值不是固定死的，由footer的高度值决定* 为footer向上填充margin-top: -50px;做准备* */padding-bottom: 50px;}.footer{height: 50px;line-height: 50px;background: deeppink;text-align: center;margin-top: -50px;}main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
main
mlzpain
三、双飞翼布局
双飞翼三列布局 /*清除浏览器默认样式*/*{padding: 0;margin: 0;}/*设置body的最小宽度*/body{min-width: 600px;}/*左浮动*/.fl{float: left;}/*双飞翼三列布局*/.mid{width: 100%;}.lef{width: 200px;background: mediumpurple;margin-left: -100%;}.rig{width: 200px;background: orangered;margin-left: -200px;}.inn_mid{margin: 0 200px;background: pink;}/*等高布局*//* 先使子元素溢出父盒子范围，然后在父盒子中设置overflow:hidden;清除溢出部分，从而由原来的不等高达到等高效果 */.mid, .lef, .rig{padding-bottom: 10000px;margin-bottom: -10000px;}.con{border: 5px solid deepskyblue;overflow: hidden;}middle
middle
middle
leftright
效果如下：
更多编程相关知识，请访问：编程教学！！
以上就是CSS中3种常见页面布局：双飞翼布局、粘连布局、左右两列布局的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1616651.html
微信扫一扫 
支付宝扫一扫 
