CSS中3种常见页面布局：双飞翼布局、粘连布局、

时间：2020-12-16 19:47:39

　　本文就来为大家介绍3种常见的CSS页面布局：双飞翼布局、粘连布局、左右两列布局，希望对大家有一定的帮助。

　　（CSS视频教程）

　　一、左右两列布局

　　1、代码如下

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>两列布局</title>  <style type="text/css"> *{ 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; /*出现省略号需要四个设置：{ width: 300px; margin: 0 auto; } </style> </head> <body> <div class="con"> <div class="lef">left</div> <div class="rig"> lzprightrightrightrightrightrightrightrightrightrightrightrightrightright <br /> rightrightrightrightrightrightrightrightrightrightrightrightrightright <br /> rightrightrightrightrightrightrightrightrightrightrightrightrightright <br /> rightrightrightrightrightrightrightrightrightrightrightrightrightright <br /> </div> </div> </body> </html>

　　效果如下：

　　2、必要说明

　　外层容器con如果为固定宽度，right元素的overflow: hidden;是必须的，否则会出现rig中的字体不在rig里面。

　　外层容器con宽度如果是100%，或者默认，此时right元素的overflow: hidden;可有可无，页面不会因此受到影响。

　　二、粘连布局

　　1、代码如下：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"/> <title>粘连布局</title>  <style type="text/css"> *{ 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; } </style> </head> <body> <div class="wrap"> <div class="main"> main<br />main<br />main<br />main<br /> main<br />main<br />main<br />main<br /> main<br />main<br />main<br />main<br /> main<br />main<br />main<br />main<br /> main<br />main<br />main<br />main<br /> main<br />main<br />main<br />main<br /> main<br />main<br />main<br />main<br /> main<br />main<br />main<br />main<br /> main<br />main<br />main<br />main<br /> main<br />main<br />main<br />main<br /> main<br />main<br />main<br />main<br /> mlzpain<br /> </div> </div>  <div class="footer"> footer </div> </body> </html>

　　三、双飞翼布局

　　<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>双飞翼三列布局</title> <style type="text/css"> /*清除浏览器默认样式*/ *{ padding: 0; margin: 0; } /*设置body的最小宽度*/ body{ min-width: 600px; } /*左浮动*/ .fl{ float: left; } /*双飞翼三列布局_mid{ margin: 0 200px; background: pink; } /*等高布局*/ /* 先使子元素溢出父盒子范围，然后在父盒子中设置overflow:hidden; 清除溢出部分，从而由原来的不等高达到等高效果 */ .mid, .lef, .rig{ padding-bottom: 10000px; margin-bottom: -10000px; } .con{ border: 5px solid deepskyblue; overflow: hidden; } </style> </head> <body> <div class="con"> <div class="mid fl"> <div class="inn_mid"> <h4>middle</h4> <h4>middle</h4> <h4>middle</h4> </div> </div> <div class="lef fl">left</div> <div class="rig fl">right</div> </div> </body> </html>

　　效果如下：

　　编程教学！！

上一篇：已知和未知高度下进行垂直水平居中的方法返回首页

下一篇：详解JavaScript中的回调函数

热点推荐

1 韩国国税厅提议修订《刑事诉讼法》强化

韩国国税厅官员提议修订《刑事诉讼法》，以强化对个人自持虚拟资产的扣押执行规则。今年...

2 韩国股市与纳斯达克100指数相关系数升至

消息，据彭博社披露，韩国综合股价指数与纳斯达克100指数的60日相关系数升至0.46，接近过去...

3 Polymarket：美联储7月29日维持利率不变概率

消息，Polymarket交易者目前预计美联储在7月29日的决策中维持利率不变的概率为93.5%。...

4 长鑫存储巨鲸挂出832万美元卖单，挂单规