首页 > 代码库 > CSS3与页面布局学习总结（四）——页面布局的多种方法
CSS3与页面布局学习总结（四）——页面布局的多种方法
一、负边距与浮动布局
1.1、负边距
所谓的负边距就是margin取负值的情况，如margin:-100px，margin:-100%。当一个元素与另一个元素margin取负值时将拉近距离。常见的功能如下：
1.1.1、向上移动
当多个元素同时从标准流中脱离开来时，如果前一个元素的宽度为100%宽度，后面的元素通过负边距可以实现上移。当负的边距超过自身的宽度将上移，只要没有超过自身宽度就不会上移，示例如下：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>负边距</title> <style type="text/css"> * { margin: 0; padding: 0; } #div1 { height: 100px; background: lightblue; width: 100%; float: left; } #div2 { height: 100px; background: lightgreen; width: 30%; float: left; margin-left: -100%; } </style> </head> <body> <div id="div1">div1 </div> <div id="div2">div2 </div> </body></html>
运行效果：
1.1.2、去除列表右边框
开发中常需要在页面中展示一些列表，如商品展示列表等，如果我们要实现如下布局：
实现代码
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>负边距</title> <style type="text/css"> * { margin: 0; padding: 0; } #div1 { width: 780px; height: 380px; margin: 0 auto; border: 3px solid dodgerblue; overflow: hidden; margin-top: 10px; } .box { width: 180px; height: 180px; margin: 0 20px 20px 0; background: orangered; float: left; } #div2{ margin-right: -20px; } </style></head><body><div id="div1"> <div id="div2"> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> </div></div></body></html>
1.1.3、负边距+定位，实现水平垂直居中
1.1.4、去除列表最后一个li元素的border-bottom
代码如下：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>负边距</title> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; } #news { width: 200px; border: 2px solid lightblue; margin: 20px 0 0 20px; font-family: ‘Heiti SC‘, ‘Microsoft YaHei‘; color: brown; } #news li{ height: 26px; line-height: 26px; border-bottom: 1px dashed lightblue; } .lastLi{ margin-bottom:-1px ;/*意思是向上移回1px 跟框框重合了*/ } </style></head><body><div id="news"> <ul> <li>Item A</li> <li>Item B</li> <li>Item C</li> <li>Item D</li> <li class="lastLi">Item E</li> </ul></div></body></html>
运行效果：
方法二：
使用CSS3中的新增加选择器，选择最后一个li，不使用类样式，好处是当li的个数不确定时更加方便。
如果li的border-bottom颜色与ul的border颜色是一样的时候，在视觉上是被隐藏了。如果其颜色不一致的时候还是有问题，给ul写个overflow：hidden；就可以解决这个问题。
练习：
要求效果：
实现代码：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>负边距</title> <style type="text/css"> * { margin: 0; padding: 0; } #div1 { width: 780px; margin: 0 auto; border: 3px solid dodgerblue; overflow: hidden; margin-top: 10px; } .box { width: 180px; height: 180px; margin: 0 20px 30px 0; float: left; position: relative; background: url(img/2.jpg) no-repeat; overflow: hidden; position: relative; } #div2{ margin-right: -20px; } .footer { position: absolute; bottom: 0; height: 40px; line-height: 40px; transition: height 0.5s; font-family: ‘Heiti SC‘, ‘Microsoft YaHei‘; font-size: 14px; color: white; } .footer:hover{ transition: height 0.5s; height: 60px; cursor: pointer; } .span1{ width: 110px; height: 100%; background: #3c3c3c; opacity: 0.8; float: left; } .span2{ width: 70px; height: 100%; float: left; background: deeppink; text-align: center; opacity: 0.8; } </style></head><body><div id="div1"> <div id="div2"> <div class="box" > <div class="footer"> <div class="span1">安踏体育运动</div> <div class="span2">$139元</div> </div> </div> <div class="box" > <div class="footer"> <div class="span1">安踏体育运动</div> <div class="span2">$139元</div> </div> </div> <div class="box" > <div class="footer"> <div class="span1">安踏体育运动</div> <div class="span2">$139元</div> </div> </div> <div class="box" > <div class="footer"> <div class="span1">安踏体育运动</div> <div class="span2">$139元</div> </div> </div> <div class="box" > <div class="footer"> <div class="span1">安踏体育运动</div> <div class="span2">$139元</div> </div> </div> <div class="box" > <div class="footer"> <div class="span1">安踏体育运动</div> <div class="span2">$139元</div> </div> </div> <div class="box" > <div class="footer"> <div class="span1">安踏体育运动</div> <div class="span2">$139元</div> </div> </div> <div class="box" > <div class="footer"> <div class="span1">安踏体育运动</div> <div class="span2">$139元</div> </div> </div> <div class="box" > <div class="footer"> <div class="span1">安踏体育运动</div> <div class="span2">$139元</div> </div> </div> <div class="box" > <div class="footer"> <div class="span1">安踏体育运动</div> <div class="span2">$139元</div> </div> </div> <div class="box" > <div class="footer"> <div class="span1">安踏体育运动</div> <div class="span2">$139元</div> </div> </div> <div class="box" > <div class="footer"> <div class="span1">安踏体育运动</div> <div class="span2">$139元</div> </div> </div> </div> </div></div></body></html>
1.2、双飞翼布局
经典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点：
1、三列布局，中间宽度自适应，两边定宽；
2、中间栏要在浏览器中优先展示渲染；
3、允许任意列的高度最高；
4、要求只用一个额外的DIV标签；
5、要求用最简单的CSS、最少的HACK语句；
在不增加额外标签的情况下，圣杯布局已经非常完美，圣杯布局使用了相对定位，以后布局是有局限性的，而且宽度控制要改的地方也多。在淘宝UED（User Experience Design）探讨下，增加多一个div就可以不用相对布局了，只用到了浮动和负边距，这就是我们所说的双飞翼布局，实现的代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>双飞翼页面布局</title> <style type="text/css"> *{ padding: 0; margin: 0; } body,html{ height: 100%; font: 20px/40px"microsoft yahei"; color: black; } #container{ width: 100%; margin: 0 auto; height: 100%; } #header,#footer{ height: 12.5%; width: 100%; background: deeppink; } #main{ height: 75%; } #center,#left,#right{ height: 100%; float: left; } #center{ width: 100%;/*这里center已经占满了中间这一栏 left right都是在它的上面*/ background: #1fc195; } #left{ background: lightgrey; width: 15%; margin-left: -100%;/*向左偏移自己的100% 回到上一行的开头*/ } #right{ background: #2e6da4; width: 15%; margin-left: -15%;/*向左偏移自己本身的长度 回到了上一行的末尾*/ } #main-inner{ padding-left: 15%;/*回到自己的开头*/ } </style></head><body> <div id="container"> <div id="header"> header </div> <div id="main"> <div id="center"> <div id="main-inner"> center </div> </div> <div id="left"> left </div> <div id="right"> right </div> </div> <div id="footer"> footer </div> </div></body></html>
运行效果：
1.3、多栏布局
1.3.1、栅格系统
栏栅格系统就是利用浮动实现的多栏布局，在bootstrap中用的非常多，这里以一个980像素的宽实现4列的栅格系统，示例代码如下：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>栅格系统</title> <style type="text/css"> * { padding: 0; margin: 0; } html, body { height: 100%; } #container { width: 980px; margin: 0 auto; height: 10%; } #container div { height: 100%; } .col25 { width: 25%; background: lightgreen; float: left; } .col50 { width: 50%; background: lightblue; float: left; } .col75 { width: 75%; background: lightcoral; float: left; } </style></head><body><div id="container"> <div class="col25"> A </div> <div class="col50"> B </div> <div class="col25"> D </div></div></body></html>
运行效果：
1.3.2、多列布局
栅格系统并没有真正实现分栏效果（如word中的分栏），CSS3为了满足这个要求增加了多列布局模块，如果需要实现多列布局模块先看看这几个CSS3属性：
column-count：<integer> | auto
功能：设置或检索对象的列数
适用于：除table外的非替换块级元素, table cells, inline-block元素
<integer>： 用整数值来定义列数。不允许负值
auto： 根据 <‘ column-width ‘> 自定分配宽度
column-gap：<length> | normal
功能：设置或检索对象的列与列之间的间隙
适用于：定义了多列的元素
计算值：绝对长度值或者normal
column-rule：<‘ column-rule-width ‘> || <‘ column-rule-style ‘> || <‘ column-rule-color ‘>
功能：设置或检索对象的列与列之间的边框。与border属性类似。
适用于：定义了多列的元素
columns：<‘ column-width ‘> || <‘ column-count ‘>
功能：设置或检索对象的列数和每列的宽度
适用于：除table外的非替换块级元素, table cells, inline-block元素
<‘ column-width ‘>： 设置或检索对象每列的宽度
<‘ column-count ‘>： 设置或检索对象的列数
示例代码：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>多列布局</title> <style type="text/css"> #div1{ column-count: 3; /*分3栏*/ column-gap: 40px; /*栏间距*/ column-rule: 2px solid lightgreen; /*栏间分隔线，与border设置类似*/ line-height: 26px; font-size: 14px; height: 500px; background: lightcyan; } </style> </head> <body> <div id="div1"> CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。 </div> </body></html>
运行效果：
二、弹性布局（Flexbox）
假设在项目中有一个这样的需求：同一行有3个菜单，每个菜单占1/3的宽度，怎么实现？
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>flex</title> <style type="text/css"> * { padding: 0; margin: 0; list-style: none; } html, body { height: 100%; } #menu { width: 980px; margin: 0 auto; display: flex; /*当前块为弹性盒*/ } #menu li{ flex: auto; /*弹性盒中的单项*/ float: left; } #menu li a{ display:block; height: 26px; line-height: 26px; border:1px solid cornflowerblue; margin-right: 2px; text-decoration: none; text-align: center; } </style> </head> <body> <ul id="menu"> <li><a href="#" class="item">公司简介</a></li> <li><a href="#" class="item">商品展示</a></li> <li><a href="#" class="item">后台管理</a></li> <li><a href="#" class="item">企业文化</a></li> <li><a href="#" class="item">在线咨询</a></li> </ul> </body></html>
运行效果：
CSS3与页面布局学习总结（四）——页面布局的多种方法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。