文章目录
前言
在上篇文章对css盒子模型知识的总结中，对margin属性有遗漏，此篇将会做以补充，并对精灵技术和选择器的扩展进行总结
一、margin叠加情况
1.内容
情况一：上下叠加
情况二：左右叠加
情况三：空元素的margin叠加
补充：前两种情况是标签中有内容的情况，代码只展示情况一，情况二，三与一相似。
2.代码如下（只展示情况一）
<style>
/*
fixed的含义就是元素相对浏览器的位置是固定不变的。
*/
*{
padding:0 ;
margin: 0 ;
}
#p{
width: 200px;
height: 200px;
background-color: red;
margin-bottom:30px ;
}
#p1{
margin-top:50px ;
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<p id="p">林志玲</p>
<p id="p1">杨幂</p>
</body>
</html>
二、精灵技术（雪碧技术）
1.内容
1.定义：页面中的一些背景图整合到一张大图中,然而，各个网页元素通常只需要精灵图中不同位置的么某个小图，要精确定位到精灵图中的每个小图,这样当用户访问该页面时，只需向服务器发送一次请求，网页中的背景图像即可全部显示出来。
2.优点： 为了有效减少服务器接受和发送请求的次数,提高页面加载速度
2.代码如下(示例)
注：此代码是精灵技术的核心代码，(1)背景图为精灵图,(2)背景定位(3)背景图不重复，其他部分(css样式)与以前相似。
background-image:url(img/icon.png);
background-repeat: no-repeat;
background-position: -500px -100px;
3.结果如下（页面显示多个）
注：此图与上面代码无关，如果想展示多个时，此图为效果图。
三、css3的选择器扩展
1.基本选择器（回顾）
| 名称 | 示例 |
|---|---|
| 通配符选择器 | *{margin:0px;padding:0px;border:none;} |
| 元素选择器 | body{background-color:white;} |
| 类选择器选择器 | .list{list-style:square;} |
| ID选择器 | #p{background-color:green;width:100px;} |
| 后代选择器 | .list li{margin-left:50px; color:pink;} |
2.基本选择器的扩展
| 名称 | 示例 |
|---|---|
| 子元素选择器 | #p > .inner{color:hotpink;}只能匹配到直接后代，不能匹配到深层次的后代元素 |
| 相邻兄弟选择器 | #wrap #first + .inner{color:green;};只会匹配紧跟着的兄弟元素 |
| 通用兄弟选择器 | #wrap #first ~ .inner{border:1px;} ;它会匹配所有的兄弟元素(不需要紧跟) |
| 选择器分组 | h1,h2,h3{color:pink;};逗号为结合符 |
3.代码如下(示例)
<style>
#d > div{
color:red ;
font-size: 30px ;
}
</style>
</head>
<body>
<div id="d">
<div class = "one">林志玲</div>
<p><div class = "one">杨幂</div></p>
<h1><div class = "one">林心如</div></h1>
</div>
</body>
注：此代码只呈现子元素选择器的代码，如想进行其他选择器的测验，只需做出相应的修改。
481
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
