【前端系列教程之CSS3】04_CSS定位和浮动详解
一、CSS 定位(重点)
1.1 CSS 定位属性
position 属性指定了元素的定位类型。
position 属性的五个值：
static 静态定位,无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。
relative 相对定位,对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
fixed 固定定位,对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。
absolute 绝对定位,对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
sticky 粘性定位
元素具备了定位属性之后，可以使用的顶部top，底部bottom，左侧left和右侧right属性定位。(static除外)。他们也有不同的工作方式，这取决于定位方法。
| 属性 | 说明 |
|---|---|
| position | 指定元素的定位类型。 |
| right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 |
| top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
| bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 |
| left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 |
什么是文档流？
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。
只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。
static 定位
static，无特殊定位，它是html元素默认的定位方式，即我们不设定元素的position属性时默认的position值就是static，它遵循正常的文档流对象，对象占用文档空间，该定位方式下，top、right、bottom、left、z-index等属性是无效的。
div.static {position: static;border: 3px solid #73AD21;
}fixed 定位
fixed 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动;
p.pos_fixed
{position:fixed;top:30px;right:5px;
}注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。
relative 定位
relative定位，又称为相对定位，从字面上来解析，我们就可以看出该属性的主要特性：相对。但是它相对的又是相对于什么地方而言的呢？这个是个重点，也是最让我迷糊的一个地方，现在让我们来做个测试，我想大家都会明白的：
(1) 初始未定位
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">#first {width: 200px;height: 100px;border: 1px solid red;}#second {width: 200px;height: 100px;border: 1px solid blue;}</style>
</head><body> <div id="first"> first</div> <div id="second">second</div>
</body></html>初始原图：
(2) 我们修改first元素的position属性：
<style type="text/css">
#first {width: 200px;height: 100px;border: 1px solid red;/*add position*/position: relative;top: 20px;left: 20px;
}#second {width: 200px;height: 100px;border: 1px solid blue;
}
</style> 偏移20px后：
-- 虚线是初始的位置空间
现在看明白了吧，相对定位相对的是它原本在文档流中的位置而进行的偏移，而我们也知道relative定位也是遵循正常的文档流，它没有脱离文档流，但是它的top/left/right/bottom属性是生效的，可以说它是static到absoult的一个中间过渡属性，最重要的是它还占有文档空间，而且占据的文档空间不会随 top / right / left / bottom 等属性的偏移而发生变动，也就是说它后面的元素是依据虚线位置( top / left / right / bottom 等属性生效之前)进行的定位，这点一定要理解。
那好，我们知道了top / right / left / bottom 属性是不会对relative定位的元素所占据的文档空间产生偏移，那么margin / padding会让该文档空间产生偏移吗？答案是肯定的，我们一起来做个试验吧：
(3) 添加margin属性：
<style type="text/css">
#first {width: 200px;height: 100px;border: 1px solid red;position: relative;top: 20px;left: 20px;/* add margin*/margin: 20px;
}#second {width: 200px;height: 100px;border: 1px solid blue;
}
</style> 设置margin：20px后：
对比一下，是不是就很清晰了，我们先将first元素外边距设为20px，那么second元素就得向下偏移40px，所以margin是占据文档空间！同理，大家可以自己动手测下padding的效果吧！
absolute 定位
absoulte定位，也称为绝对定位，虽然它的名字号曰“绝对”，但是它的功能却更接近于"相对"一词，为什么这么讲呢？原来，使用absoult定位的元素脱离文档流后，就只能根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以postion非static方式定位的， 举个例子，a元素使用absoulte定位，它会从父类开始找起，寻找以position非static方式定位的祖先类元素(注意，一定要是直系祖先才算哦~），直到<html>标签为止，这里还需要注意的是，relative和static方式在最外层时是以<body>标签为定位原点的，而absoulte方式在无父级是position非static定位时是以<html>作为原点定位。<html>和<body>元素相差9px左右。
我们来看下效果：
添加absoulte属性：
<html>
<style type="text/css">html {border: 1px dashed green;}body {border: 1px dashed purple;}#first {width: 200px;height: 100px;border: 1px solid red;position: relative;}#second {width: 200px;height: 100px;border: 1px solid blue;position: absolute;top: 0;left: 0;}
</style> <body> <div id="first">relative</div> <div id="second">absoult</div>
</body> </html> 效果图：
哈哈，看了上面的代码后，细心的朋友肯定要问了，为什么absoulte定位要加 top:0; left:0; 属性，这不是多此一举呢？
其实加上这两个属性是完全必要的，因为我们如果使用absoulte或fixed定位的话，必须指定 left、right、 top、 bottom 属性中的至少一个，否则left/right/top/bottom属性会使用它们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递，简单讲就是都变成relative，会占用文档空间，这点非常重要，很多人使用absolute定位后发现没有脱离文档流就是这个原因，这里要特别注意~~~
少了left/right/top/bottom属性不行，那如果我们多设了呢？例如，我们同时设置了top和bottom的属性值，那元素又该往哪偏移好呢？记住下面的规则：
如果top和bottom一同存在的话，那么只有top生效。
如果left和right一同存在的话，那么只有left生效。
既然absoulte是根据祖先类中的position非static元素进行定位的，那么祖先类中的margin/padding会不会对position产生影响呢？看个例子先：
在absoulte定位中添加margin / padding属性：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#first {width: 200px;height: 100px;border: 1px solid red;position: relative;margin: 40px;padding: 40px;}#second {width: 200px;height: 100px;border: 1px solid blue;position: absolute;top: 20px;left: 20px;}</style>
</head><body><div id="first">first <div id="second">second</div> </div>
</body></html>
看懂了，祖先类的margin会让子类的absoulte跟着偏移，而padding却不会让子类的absoulte发生偏移。总结一下，就是absoulte是根据祖先类的border进行的定位。
sticky 定位
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
粘性定位实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sticky 定位</title>
<style>
div.sticky {position: -webkit-sticky;position: sticky;top: 0;padding: 5px;background-color: #cae8ca;border: 2px solid #4CAF50;
}
</style>
</head><body><p>尝试滚动页面。</p><p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p><div class="sticky">我是粘性定位!</div><div style="padding-bottom:2000px"><p>滚动我</p><p>来回滚动我</p><p>滚动我</p><p>来回滚动我</p><p>滚动我</p><p>来回滚动我</p></div></body>
</html>绝对定位和相对定位的区别：
1、绝对定位不会占据原本的位置,相对定位会占据原来位置
2、绝对定位相对于父元素定位,相对定位是相对于原本的位置定位
1.2 CSS元素堆叠顺序
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序：
| 属性 | 说明 |
|---|---|
| z-index | 设置元素的堆叠顺序 |
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
z-index 仅能在定位元素上奏效(重点)
1.3 CSS溢出处理
CSS overflow 属性用于控制内容溢出元素框时显示的方式。
| 属性 | 说明 |
|---|---|
| overflow | 设置当元素的内容溢出其区域时发生的事情。 |
| overflow-y | 指定如何处理顶部/底部边缘的内容溢出元素的内容区域 |
| overflow-x | 指定如何处理右边/左边边缘的内容溢出元素的内容区域 |
如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。
这三个样式属性有四个共同的值:
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
设置不同 overflow 属性值：
div.ex1 {overflow: scroll;
}div.ex2 {overflow: hidden;
}div.ex3 {overflow: auto;
}div.ex4 {overflow: visible;
}1.4 CSS裁剪
如果图像大于包含它的元素，会发生什么？-clip属性，让你指定一个绝对定位的元素，该尺寸应该是可见的，该元素被剪裁成这种形状并显示。
注意：: 如果先有"overflow：visible"，clip属性不起作用。
属性值
| 值 | 描述 |
|---|---|
| shape | 设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left) |
| auto | 默认值。不应用任何剪裁。 |
裁剪一张图像：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;height: 200px;border: 1px solid black;/* overflow: hidden; */position: relative;}img{position: absolute;/* clip: rect(0,300px,200px,0); */clip: rect(75px,360px,275px,60px);left: -60px;top:-75px}</style>
</head>
<body><div><img src="data:images/paris.jpg" alt=""></div>
</body>
</html>二、CSS浮动(重点)
2.1 CSS元素浮动
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素怎样浮动：
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它（主要指的是图片）。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边：
img{float:right;
}浮动层：给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。
而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。内联元素：有空隙就插入。
彼此相邻的浮动元素：
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
在这里，我们对图片廊使用 float 属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片浮动</title>
<style>
.thumbnail
{float:left;width:110px;height:90px;margin:5px;
}
</style>
</head><body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="/images/klematis_small.jpg" >
<img class="thumbnail" src="/images/klematis2_small.jpg">
<img class="thumbnail" src="/images/klematis3_small.jpg" >
<img class="thumbnail" src="/images/klematis4_small.jpg" >
<img class="thumbnail" src="/images/klematis_small.jpg">
<img class="thumbnail" src="/images/klematis2_small.jpg">
<img class="thumbnail" src="/images/klematis3_small.jpg">
<img class="thumbnail" src="/images/klematis4_small.jpg">
</body>
</html>float案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动布局案例</title>
<style>
* {box-sizing: border-box;
}
body {margin: 0;
}
.header {background-color: #2196F3;color: white;text-align: center;padding: 15px;
}
.footer {background-color: #444;color: white;padding: 15px;
}
.topmenu {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #777;
}
.topmenu li {float: left;
}
.topmenu li a {display: inline-block;color: white;text-align: center;padding: 16px;text-decoration: none;
}
.topmenu li a:hover {background-color: #222;
}
.topmenu li a.active {color: white;background-color: #4CAF50;
}
.column {float: left;padding: 15px;
}
.clearfix::after {content: "";clear: both;display: table;
}
.sidemenu {width: 25%;
}
.content {width: 75%;
}
.sidemenu ul {list-style-type: none;margin: 0;padding: 0;
}
.sidemenu li a {margin-bottom: 4px;display: block;padding: 8px;background-color: #eee;text-decoration: none;color: #666;
}
.sidemenu li a:hover {background-color: #555;color: white;
}
.sidemenu li a.active {background-color: #008CBA;color: white;
}
</style>
</head>
<body><ul class="topmenu"><li><a href="#home" class="active">主页</a></li><li><a href="#news">新闻</a></li><li><a href="#contact">联系我们</a></li><li><a href="#about">关于我们</a></li>
</ul><div class="clearfix"><div class="column sidemenu"><ul><li><a href="#flight">The Flight</a></li><li><a href="#city" class="active">The City</a></li><li><a href="#island">The Island</a></li><li><a href="#food">The Food</a></li><li><a href="#people">The People</a></li><li><a href="#history">The History</a></li><li><a href="#oceans">The Oceans</a></li></ul></div><div class="column content"><div class="header"><h1>The City</h1></div><h1>Chania</h1><p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p><p>You will learn more about responsive web pages in a later chapter.</p></div>
</div><div class="footer"><p>底部文本</p>
</div></body>
</html>2.2 CSS清除浮动
clear属性指定元素的左侧或右侧不允许浮动的元素。
“float是魔鬼，会影响其他相邻元素；但是clear是小白，其只会影响自身，不会对其他相邻元素造成影响！”
元素盒子的边不能和前面的浮动元素相邻，那么就是自己下移。
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
2.3 CSS清除浮动影响的方式
清除浮动是每一个 web前端设计师必须掌握的技能。
浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。解决浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。
下面总结5种清除浮动的方法（测试已通过 ie chrome firefox opera，后面三种方法只做了解就可以了）：
给父级元素单独定义高度（height）
<style type="text/css">.div1 {background: #000080;border: 1px solid red;/*解决代码*/height: 200px;}.div2 {background: #800080;border: 1px solid red;height: 100px;margin-top: 10px}.left {float: left;width: 20%;height: 200px;background: #DDD}.right {float: right;width: 30%;height: 80px;background: #DDD}
</style>
<div class="div1"><div class="left">Left</div><div class="right">Right</div>
</div>
<div class="div2">div2
</div>原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用
在标签结尾处(前)加空div标签 clear:both
<style type="text/css">.div1 {background: #000080;border: 1px solid red}.div2 {background: #800080;border: 1px solid red;height: 100px;margin-top: 10px}.left {float: left;width: 20%;height: 200px;background: #DDD}.right {float: right;width: 30%;height: 80px;background: #DDD}/*清除浮动代码*/.clearfloat {clear: both}
</style>
<div class="div1"><div class="left">Left</div><div class="right">Right</div><div class="clearfloat"></div>
</div>
<div class="div2">div2
</div>原理：添加一个空div，利用css提供的clear:both清除浮动，让父级div能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法
父级div定义 伪元素:after 和 zoom
<style type="text/css">.div1 {background: #000080;border: 1px solid red;}.div2 {background: #800080;border: 1px solid red;height: 100px;margin-top: 10px}.left {float: left;width: 20%;height: 200px;background: #DDD}.right {float: right;width: 30%;height: 80px;background: #DDD}/*清除浮动代码*/.clearfloat:after {display: block;clear: both;content: "";visibility: hidden;height: 0}.clearfloat {zoom: 1}
</style>
<div class="div1 clearfloat"><div class="left">Left</div><div class="right">Right</div>
</div>
<div class="div2">div2
</div>原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE专有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。
建议：推荐使用，建议定义公共类，以减少CSS代码。
父级div定义 overflow:hidden
<style type="text/css">.div1 {background: #000080;border: 1px solid red;/*解决代码*/width: 98%;overflow: hidden}.div2 {background: #800080;border: 1px solid red;height: 100px;margin-top: 10px;width: 98%}.left {float: left;width: 20%;height: 200px;background: #DDD}.right {float: right;width: 30%;height: 80px;background: #DDD}
</style>
<div class="div1"><div class="left">Left</div><div class="right">Right</div>
</div>
<div class="div2">div2
</div>原理：使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。
父级div定义 overflow:auto
<style type="text/css">.div1 {background: #000080;border: 1px solid red;/*解决代码*/width: 98%;overflow: auto}.div2 {background: #800080;border: 1px solid red;height: 100px;margin-top: 10px;width: 98%}.left {float: left;width: 20%;height: 200px;background: #DDD}.right {float: right;width: 30%;height: 80px;background: #DDD}
</style>
<div class="div1"><div class="left">Left</div><div class="right">Right</div>
</div>
<div class="div2">div2
</div>原理：使用overflow:auto时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：内部宽高超过父级div时，会出现滚动条。
建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
三、CSS对齐方式
3.1 元素居中对齐
要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;或margin:0 auto。
设置到元素的宽度将防止它溢出到容器的边缘。
元素通过指定宽度，并将两边的空外边距平均分配：
.center {margin: auto;width: 50%;border: 3px solid green;padding: 10px;
}3.2 文本居中对齐
如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;
.center {text-align: center;border: 3px solid green;
}3.3 左右对齐 - 使用定位方式
我们可以使用 position: absolute; 属性来对齐元素:
.right {position: absolute;right: 0px;width: 300px;border: 3px solid #73AD21;padding: 10px;
}注释：绝对定位元素会被从正常流中删除，并且能够交叠元素。
3.4 左右对齐 - 使用 float 方式
我们也可以使用 float 属性来对齐元素:
.right {float: right;width: 300px;border: 3px solid #73AD21;padding: 10px;
}当像这样对齐元素时，对 <body> 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。
3.5 文本垂直居中对齐 - 使用 padding
CSS 中有很多方式可以实现垂直居中对齐。 一个简单的方式就是头部底部使用 padding:
.center {padding: 70px 0;border: 3px solid green;
}如果要水平和垂直都居中，可以使用 padding 和 text-align: center:
3.6 文本垂直居中 - 使用 line-height
line-height和height保持一致即可；
.center {line-height: 200px;height: 200px;border: 3px solid green;text-align: center;
}
/* 如果文本有多行，添加以下代码: */
.center p {line-height: 1.5;display: inline-block;vertical-align: middle;
}3.7 垂直居中 - 使用 position 和 transform
除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中:
<style>
.center { height: 200px;position: relative;border: 3px solid green;
}.center p {margin: 0;position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);
}
</style><h2>居中</h2>
<p>以下实例中，我们使用了 positioning 和 transform 属性来设置水平和垂直居中：</p><div class="center"><p>我是水平和垂直居中的。</p>
</div><p>注意: IE8 及更早版本不支持 transform 属性。</p>四、CSS精灵截图技术
4.1 什么是css sprites
css sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。
其实就是通过将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景。这样做的好处也是显而易见的，因为图片多的话，会增加http的请求，无疑促使了网站性能的减低，特别是图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升。
css sprites是什么通俗解释：
CSS Sprites其实就是把网页中一些背景图片整合拼合成一张图片中，再利用DIV CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片在布局盒子对象位置。
4.2 适用场合
1、适合：一般小图标素材:
小的图标ico类素材，一般图标很小十多像素几十像素的宽度高度，这种适合拼合成一张图实现sprites background背景定位布局。多小ico太多自然加载网页时瞬间会消耗些http iis链接数，但很快加载完又会释放。
ICO是Windows的图标文件格式，图标文件可以存储单个图案、多尺寸、多色板的图标文件。一个图标实际上是多张不同格式的图片的集合体，并且还包含了一定的透明区域。
2、不适合：大图大背景:
大背景一般用于网页背景，拼合时，设置为网页背景时所有背景都会显示出来。大图拼接拼合会增大图片大小，网络带宽不好的访问者访问时由于背景图大文件大会加载稍慢些，所以大图不推荐拼接拼合来使用css sprites背景定位布局。
3、sprites适合推荐小结:
一般此sprites拼合布局用于局部小盒子布局不适合大背景大布局背景使用。比如小局部布局小图标背景、小导航背景等DIVCSS布局。
4.3 css sprites优势与缺点劣势
1、sprites优势：
若干小图标拼合成一张图后布局，减少http请求数，对于大战大流量网站来说隐形优势很显然的，从而隐形地提升了网站性能。对于大流量网站来说本来http请求数比较宝贵，使用DIV+CSS Sprites这样可以大大的提高了页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因，同时也减少图片文件数目。
2、sprites缺点
在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好只够的空间，防止板块内不会出现不必要的背景，如果留空间或拼合位置不合适，在布局时容易出现布局这个盒子对象时，设置背景出现拼合相邻图片，干扰图片的情况;
CSS Sprites在开发的时候比较麻烦，你要通过photoshop(PS)或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐;
CSS Sprites在维护的时候比较麻烦，sprites是一般双刃剑，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，有只能（最好）往下加图片，这样图片的字节就增加了，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐，而且重新算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。
由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。
3、推荐小结
由于拼接图片需要一定经验技巧（做实践即可快速掌握）、测量定位数值、修改不是那么灵活等原因，一般小网站站、小流量网站、一般企业网站不是很推荐使用CSS Sprites，因为使用CSS Sprites会比普通单个背景图片布局要耗费时间和精力，所以不是很推荐小站。
但这个布局技巧也必须要学会掌握灵活布局才是目的。小站HTTP请求数丰富这点拼接其实也起不来什么优势反而会浪费宝贵时间。相反大网站大流量网站推荐使用，这样比较值得。
4.4 实例教程
素材与要实现效果截图(拼合ico图标素材实现列表不同图标效果截图)
sprites实例教程解释介绍
首先这些图标素材是放在同一张图片上（PS拼合），然后实现成列表类布局，列表每个前图标不同。使用div css sprites实现此布局（其实使用background样式实现）。
首先此列表布局我们使用ul li列表布局，每个li站一行排版，对ul设置padding实现四周内容与边框一定间距效果，因为每个li前面图标不同，但此背景图片是拼合在一张图片上，所以这里做li里开始使用span标签实现这个不同图标效果，每个图标不同为了区别span所以对span设置不同class，不同class对应设置定位相应的图标。
实例教程
sprites案例图片素材:
实例代码：
<!DOCTYPE html>
<html>
<head><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1,minimal-ui, user-scalable=no"/><style>.sprites div {margin: 5px;}.sprites span {float: left;width: 20px;height: 20px;background-image: url(sprite.png);background-size: 60px 40px;}.sprites1{background-position: 0 0;}.sprites2{background-position: -20px 0;}.sprites3{background-position: 0 -20px;}.sprites4{background-position: -20px -20px;}.sprites5{background-position: -40px 0;}.sprites6{background-position: -40px -20px;}</style>
</head>
<body>
<div class="sprites"><div><span class="sprites1"></span>付款图标</div><div><span class="sprites2"></span>删除图标</div><div><span class="sprites3"></span>存款图标</div><div><span class="sprites4"></span>粘贴图标</div><div><span class="sprites5"></span>笑脸图标</div><div><span class="sprites6"></span>编辑图标</div>
</div>
</body>
</html>sprites实例效果：
说明：背景background-position有两个数值，前一个代表靠左距离值（可为正可为负），第二个数值代表靠上距离值（可为正可为负）。当为正数时，代表背景图片作为对象盒子背景图片时靠左和靠上多少距离多少开始显示背景图片；当为负数时代表背景图片作为盒子对象背景图片，将背景图片拖动超出盒子对象左边多远，拖动超出盒子对象上边多远开始显示此背景图片。
【前端系列教程之CSS3】04_CSS定位和浮动详解相关推荐
- 【前端系列教程之CSS3】06_CSS3边框、渐变、文本效果等
一.CSS3边框(重要) 用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop. 1.1 CSS3边框圆角 在 CSS2 中添加圆角棘手.我们不得不在 ...
- 【前端系列教程之CSS3】01_CSS概述、引入规则和三大机制
前言 最准确的网页设计思路是把网页分成三个层次,即:结构层.表示层.行为层. HTML:结构层,Hyper Text Markup Language,超文本标记语言 CSS:表现层,Cascading ...
- jquery在html实现遍历,jQuery教程之jQuery遍历、HTML操作详解
本篇文章探讨了jQuery教程之jQuery遍历.HTML操作详解,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. < 什么是遍历? jQuery 遍历,意为"移 ...
- CSS3定位和浮动详解
本文为大家分享CSS3定位和浮动的基础概念,与使用方法,供大家参考,具体内容如下 一.定位 1. css定位: 改变元素在页面上的位置 2. css定位机制: 普通流: 浮动: 绝对布局: 3. cs ...
- 【前端系列教程之HTML5】01_HTML概述
一.Web前端开发工具 1.1.常用前端开发工具介绍 软件开发工具是用于辅助软件生命周期过程的基于计算机的工具.通常可以设计并实现工具来支持特定的软件工程方法,减少手工方式管理的负担. 作为一个前端开 ...
- 【前端系列教程之JavaScript】08_BOM编程
一.BOM概述 1.1.Web API API的概念 API(Application Programming Interface,应用程序接口)是一些预先定义的函数,或指软件系统不同组成部分衔接的约定 ...
- 【前端系列教程之HTML5】06_HTML5新标签
一.HTML5新布局标签 许多现有网站都包含以下HTML代码: <div id="nav">, <div class="header"> ...
- 【前端系列教程之JavaScript】01_JavaScript概述和引入方式
JavaScript概述 JavaScript可以做什么 页面的各种动画效果 页面的点击/移入响应 对客户端数据进行验证 各种页面小游戏 用途总结 嵌入动态文本于HTML页面. 对浏览器事件做出响应( ...
- 【前端系列教程之jQuery】06_jQuery CSS样式操作
一.CSS样式操作 CSS css(name|pro|[,val|fn]) 访问匹配元素的样式属性. jQuery 1.8中,当你使用CSS属性在css()或animate()中,我们将根据浏览器自动 ...
最新文章
- 浅谈 EHT 黑洞照片拍摄原理
- 浅谈Activiti Modeler 的扩展
- ZooKeeper配置中出现Error contacting service. It is probably not running
- C#操作XML小结_转载
- [云炬创业学笔记]第二章决定成为创业者测试3
- linux ubuntu安装 mono,在 Ubuntu Server 上安装配置 Mono 生产环境
- nginx php7 fastcgi,[Mac php7 nginx]解决nginx FastCGI sent in stderr: “Primary script unknown”
- RocketMQ在Windows环境下部署（亲测有效）
- 952开头的电话一天响两三次，不是诈骗就是推销，请问该怎么屏蔽呢？
- 使用阿里云发送短信验证码教程（简单易学）
- 骇客基础知识：第3部分
- apache kafka 简介
- 台式计算机为什么数字输入不了,电脑数字键盘打不出数字怎么回事
- Visual Studio Code 配置C/C++编译环境流程及问题解决（Win10环境）
- 如何排查计算机联网故障,电脑莫名连不上网？佰佰教你如何排除网络连接故障！...
- 通过爬虫爬取四川省公共资源交易平台上最近的招标信息 --- URLConnection
- 服务器被打了之后怎么办？
- 阿里云服务器ECS搭建EMQ快速实现MQTT通信
- 臭鱼的产品交互设计分享
- js 天花板 playcanvas