所谓的负边距就是 margin 取负值的情况,如 margin:-100px,margin:-100%。当一个元素与另一个元素 margin 取负值时将拉近距离。常见的功能如下:
当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为 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>
margin-left:-29% 时运行效果:
margin-left:-30% 时运行效果:
margin-left:-100% 时运行效果:
开发中常需要在页面中展示一些列表,如商品展示列表等,如果我们要实现如下布局:
示例代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- 负边距
- </title>
- <style type="text/css">
- * { margin: 0; padding: 0; } #div1 { width: 800px; margin: 0 auto; border:
- 3px solid lightblue; overflow: hidden; margin-top: 10px; } .box { width:
- 180px; height: 180px; margin: 0 20px 20px 0; background: lightgreen; float:
- left; }
- </style>
- </head>
- <body>
- <div id="div1">
- <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>
- </body>
- </html>
运行后的结果:
但是上面的效果中右边多出了 20px 的距离,底下多出 20px 空白,解决方法如下:
- <!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 lightblue; overflow: hidden; margin-top: 10px;
- } .box { width: 180px; height: 180px; margin: 0 20px 20px 0; background:
- lightgreen; 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>
方法是使用了边距折叠,,基本原理如下图所示:
具体请参考
方法一:
View Code
- <!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; } #news li{ height: 26px; line-height:
- 26px; border-bottom: 1px dashed lightblue; } .lastLi{ margin-bottom:-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;就可以解决这个问题。
练习:
经典三列布局,也叫做圣杯布局【Holy Grail of Layouts】是 Kevin Cornell 在 2006 年提出的一个布局模型概念,在国内最早是由淘宝 UED 的工程师传播开来,在中国也有叫法是双飞翼布局,它的布局要求有几点:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- 双飞翼
- </title>
- <style type="text/css">
- * { margin: 0; padding: 0; } body, html { height: 100%; font: 20px/40px
- "microsoft yahei"; color: white; } #container { width: 90%; margin: 0 auto;
- height: 100%; } #header, #footer { height: 12.5%; background: deepskyblue;
- } #main { height: 75%; } #center, #left, #right { height: 100%; float:
- left; } #center { width: 100%; background: lightgreen; } #right { background:
- lightblue; width: 20%; margin-left: -20%; } #left { background: lightcoral;
- width: 20%; margin-left: -100%; } #main-inner { padding-left: 20%; }
- </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>
运行效果:
示例中增加一个 main-inner 的目的是因为当 left 上移时与 center 重叠了,left 覆盖了 center,通过 main-inner 的 padding 将 left 占用的位置空出。
栏栅格系统就是利用浮动实现的多栏布局,在 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="col50">
- A
- </div>
- <div class="col50">
- B
- </div>
- <div class="col25">
- C
- </div>
- </div>
- </body>
- </html>
运行结果:
同样的原理可以轻易扩展到 8 列,10 列,16 列的栅格系统。
栅格系统并没有真正实现分栏效果(如 word 中的分栏),CSS3 为了满足这个要求增加了多列布局模块,如果需要实现多列布局模块先看看这几个 CSS3 属性:
column-count:<integer> | auto
功能:设置或检索对象的列数
适用于:除 table 外的非替换块级元素, table cells, inline-block 元素
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'>: 设置或检索对象的列数
示例代码:
View Code
- <!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>
运行结果:
假设在项目中有一个这样的需求:同一行有 3 个菜单,每个菜单占 1/3 的宽度,怎么实现?
可能你会这样实现:
View Code
- <!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; } #menu li{ width: 33.3%; float:
- left; }
- </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>
- </ul>
- </body>
- </html>
结果:
上面的办法有明显的不足就是可扩展性太差,因为如果再添加一项就会有一个菜单项会换行,解决方法是:CSS3 中提供了强大的弹性盒布局。示例:
- <!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>
运行结果:
display 属性值 flex: 将对象作为弹性伸缩盒显示
flex:none | <flex-grow> <flex-shrink> || <flex-basis>
功能:设置或检索弹性盒模型对象的子元素如何分配空间
适用于:flex 子项
none: none 关键字的计算值为: 0 0 auto
在「flex」属性中该值如果被省略则默认为「1」
在收缩的时候收缩比率会以伸缩基准值加权
在「flex」属性中该值如果被省略则默认为「1」
在「flex」属性中该值如果被省略则默认为「0%」
在「flex」属性中该值如果被指定为「auto」,则伸缩基准值的计算值是自身的
示例:如下情况每个元素的计算宽是多少
- <ul class="flex">
- <li>
- a
- </li>
- <li>
- b
- </li>
- <li>
- c
- </li>
- </ul>
- .flex {
- display: flex;
- width: 800px;
- margin: 0;
- padding: 0;
- list - style: none;
- }.flex: nth - child(1) {
- flex: 1 1 300px;
- }.flex: nth - child(2) {
- flex: 2 2 200px;
- }.flex: nth - child(3) {
- flex: 3 3 400px;
- }
本例定义了父容器宽(即主轴宽)为 800px,由于子元素设置了伸缩基准值 flex-basis,相加 300+200+400=900,那么子元素将会溢出 900-800=100px;
由于同时设置了收缩因子,所以加权综合可得 300*1+200*2+400*3=1900px;
于是我们可以计算 a,b,c 将被移除的溢出量是多少:
a 被移除溢出量:(300*1/1900)*100,即约等于 16px
b 被移除溢出量:(200*2/1900)*100,即约等于 21px
c 被移除溢出量:(400*3/1900)*100,即约等于 63px
最后 a,b,c 的实际宽度分别为:300-16=284px, 200-21=179px, 400-63=337px
可见算法比较麻烦,简单的做法如下:
- <!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 { 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; } .a { flex: 1; } .b { flex: 2; } .c { flex:
- 3; }
- </style>
- </head>
- <body>
- <ul id="menu">
- <li class="a">
- <a href="#" class="item">
- 公司简介
- </a>
- </li>
- <li class="b">
- <a href="#" class="item">
- 商品展示
- </a>
- </li>
- <li class="c">
- <a href="#" class="item">
- 后台管理
- </a>
- </li>
- </ul>
- </body>
- </html>
运行结果:
Flex 容器可以设置属性 flex-flow,取值为 row,row-reverse,column,column-reverse 四种值
row:显示在一行中
row-reverse:显示在一行中,反转
column:显示在一列中
column-reverse:显示在一列中 反转
View Code
- <!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%;
- padding-top :20px; } #menu { width: 980px; margin: 0 auto; display: flex;
- /*当前块为弹性盒*/ flex-flow: row-reverse; /*子项在一行中显示,反转*/ } #menu li { flex:
- auto; } #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 class="a">
- <a href="#" class="item">
- A公司简介
- </a>
- </li>
- <li class="b">
- <a href="#" class="item">
- B商品展示
- </a>
- </li>
- <li class="c">
- <a href="#" class="item">
- C后台管理
- </a>
- </li>
- </ul>
- </body>
- </html>
View Code
- <!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%;
- padding-top :20px; } #menu { margin: 0 auto; display: flex; /*当前块为弹性盒*/
- flex-flow: column-reverse; height: 200px; overflow: hidden; } #menu li{
- border: 1px solid cornflowerblue; margin-bottom: 5px; text-align: center;
- } #menu li a { text-decoration: none; vertical-align: middle; } .a{ flex:
- 1; } .b{ flex: 2; } .c{ flex: 3; }
- </style>
- </head>
- <body>
- <ul id="menu">
- <li class="a">
- <a href="#" class="item">
- A公司简介
- </a>
- </li>
- <li class="b">
- <a href="#" class="item">
- B商品展示
- </a>
- </li>
- <li class="c">
- <a href="#" class="item">
- C后台管理
- </a>
- </li>
- </ul>
- </body>
- </html>
固定布局和流式布局在网页设计中最常用的两种布局方式。固定布局能呈现网页的原始设计效果,流式布局则不受窗口宽度影响,流式布局使用百分比宽度来限定布局元素,这样可以根据客户端分辨率的大小来进行合理的显示。
固定布局效果:
流式布局效果:
利用前面的知识点可以实现这两种布局,这里就不去实现了
瀑布流布局是流式布局的一种。是当下比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是 Pinterest,逐渐在国内流行开来。
鼻祖:Pinterest
通用类:豆瓣市集,,我喜欢,读图知天下
美女图片:图丽网
时尚资讯类:看潮网
时尚购物类:蘑菇街,美丽说,人人逛街,卡当网
品牌推广类:凡客达人
家居 o2o 类:新巢网小猫家
微博社交类: 都爱看
搞笑图片类:道趣儿
艺术收藏类:微艺术
潮流图文分享:荷都分享网
优点
1、有效的降低了界面复杂度,节省了空间:我们不再需要臃肿复杂的页码导航链接或按钮了。
2、对触屏设备来说,交互方式更符合直觉:在移动应用的交互环境当中,通过向上滑动进行滚屏的操作已经成为最基本的用户习惯,而且所需要的操作精准程度远远低于点击链接或按钮。
3、更高的参与度:以上两点所带来的交互便捷性可以使用户将注意力更多的集中在内容而不是操作上,从而让他们更乐于沉浸在探索与浏览当中。
缺点
1. 有限的用例:
无限滚动的方式只适用于某些特定类型产品当中一部分特定类型的内容。
例如,在电商网站当中,用户时常需要在商品列表与详情页面之间切换,这种情况下,传统的、带有页码导航的方式可以帮助用户更稳妥和准确的回到某个特定的列表页面当中。
2. 额外的复杂度:
那些用来打造无限滚动的 JS 库虽然都自称很容易使用,但你总会需要在自己的产品中进行不同程度的定制化处理,以满足你们自己的需求; 另外这些 JS 库在浏览器和设备兼容性等方面的表现也参差不齐,你必须做好充分的测试与调整工作。
3. 再见了,页脚:
如果使用了比较典型的无限滚动加载模式,这就意味着你可以和页脚说拜拜了。
最好考虑一下页脚对于你的网站,特别是用户的重要性; 如果其中确实有比较重要的内容或链接,那么最好换一种更传统和稳妥的方式。
千万不要耍弄你的用户,当他们一次次的浏览到页面底部,看到页脚,却因为自动加载的内容突然出现而无论如何都无法点击页脚中的链接时,他们会变的越发愤怒。
5. SEO:
集中在一页当中动态加载数据,与一页一页的输出相比,究竟那种方式更利于 SEO,这是你必须考虑的问题。对于某些以类型网站来说,在这方面进行冒险是很不划算的。
6. 关于页面数量的印象:
其实站在用户的角度来看,这一点并非负面; 不过,如果对于你的网站来说,通过更多的内容页面展示更多的相关信息 (包括广告) 是很重要的策略,那么单页无限滚动的方式对你并不适用。
masonry 是一个响应式网格布局库(非 jQuery)。(Cascading grid layout library)
如果使用 CSS+JavaScript 当然可以实现瀑布流布局,但相对麻烦,masonry 是一个 javascript 插件,通过该插件可以轻松实现瀑布流布局,和 CSS 中 float 的效果不太一样的地方在 于,float 先水平排列,然后再垂直排列,使用 Masonry 则垂直排列元素,然后将下一个元素放置到网格中的下一个开发区域。这种效果可以最小化处理 不同高度的元素在垂直方向的间隙。
官网:
源码:
可以去官网或 github 下载 "masonry.pkgd.min.js",将下载到的插件添加到项目中,并在页面中添加引用,如下所示:
- <script src="js/masonry/masonry.pkgd.min.js" type="text/javascript" charset="utf-8">
- </script>
CDN:
- <script src="https://unpkg.com/masonry-layout@4.1/dist/masonry.pkgd.js">
- </script>
- <!-- or -->
- <script src="https://unpkg.com/masonry-layout@4.1/dist/masonry.pkgd.min.js">
- </script>
在页面中使用 HTML+CSS 准备需要使用瀑布流显示的内容,如下所示:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- 瀑布流布局
- </title>
- <style type="text/css">
- #grid { width: 1000px; margin: 0 auto; } .grid-item { width: 200px; float:
- left; } .a { background: lightblue; height: 200px; } .b { background: lightcoral;
- height: 300px; } .c { background: lightgreen; height: 500px; } .d { background:
- lightsalmon; height: 350px; } .e { background: lightseagreen; height: 150px;
- }
- </style>
- </head>
- <body>
- <div id="grid">
- <div class="grid-item a">
- </div>
- <div class="grid-item b">
- </div>
- <div class="grid-item a">
- </div>
- <div class="grid-item b">
- </div>
- <div class="grid-item a">
- </div>
- <div class="grid-item b">
- </div>
- <div class="grid-item a">
- </div>
- <div
来源: http://www.cnblogs.com/best/p/6136165.html