学习了层级、锚点、精灵图、高度宽度以及窗口自适应、伪元素这些知识点。
层级
在设置了兄弟相对定位时，如果两个盒子有相交的部分，将会遵循后来者居上的原则，后面的盒子会把前面盒子与之重合的部分覆盖上。在上面的盒子比下面的盒子层级高，这就是层级。如下图：红色盒子先进行设置，相对于自己的之前的位置进行向下和向右的偏移。然后再设置后面的绿色盒子，绿色盒子将会把红盒子盖住一部分，如果想要将红盒子显示在上面，需要用到z-index这个属性。设置数字值，越大表示层级越高，可以设置负值。两个盒子如果都设置了z-index层级值，哪个大哪个盒子就显示在上面。
但是在父子盒子的绝对定位中，如果想让父盒子显示在上面，需要对子盒子设置z-index的负值。对父盒子设置正值并且比子盒子值大也无济于事。
锚点
锚点相当于是页面内的跳转，比如一个导航侧边栏，鼠标点击哪个导航文字，页面内容就会跳到对应的导航内容。设置的时候用<a>标签。
<div id="锚点名字"></div>
<a href="#锚点名字"></a>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
position: fixed;
top: 100px;
right: 0;
}
li{
width: 100px;
height: 50px;
line-height: 50px;
text-align:center;
border: 1px solid black;
}
div{
height: 600px;
border: 1px solid black;
}
</style>
</head>
<body>
<ul>
<li><a href="#a">京东秒杀</a></li>
<li><a href="#b">双十一</a></li>
<li><a href="#c">频道优选</a></li>
<li><a href="#d">特色广场</a></li>
</ul>
<div id="a">
京东秒杀
</div>
<div id="b">
双十一
</div>
<div id="c">
频道优选
</div>
<div id="d">
特色广场
</div>
</body>
当我点击双十一时，页面会自动跳转到双十一内容。
精灵图
将导航背景图片，按钮背景图片等有规则的合成一张背景图，即将多张图片合为一张整图，然后用background-position来实现背景图片的定位技术。
比如下面是一张大图，我需要要右边的一列小图标，我不需要把每个图标都截下来，只需要导入这一张图，来设置不同的距离，就可以得到对应的小图。
<style>
div{
width: 103px;
height: 32px;
float: left;
background-image: url(img/精灵图.png);
margin-right: 10px;
background-color: yellow;
}
.box1{
background-position: -205px -111px;
}
.box2{
background-position: -205px -74px;
}
.box3{
background-position: -205px -37px;
}
.box4{
background-position: -205px 0px;
}
.box5{
background-position: -205px -148px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body> 
图片整合的优势： 1）通过图片整合来减少对服务器的请求次数，从而提高面的加载速度 2）通过整合图片来减小图片的体积
自适应
自适应有宽度自适应、高度自适应以及窗口自适应。
宽度自适应就是用width:auto或者不设置宽度。高度和宽度同理。有时我们希望根据内容的高度去自适应盒子的高度，但是内容不是固定的，自然高度也固定不了，我们可以设置min-height来设置一个 最小宽度，这样即使内容很少也不至于高度太小影响页面整体设计。对应的有max-height、min-width、max-width。
窗口自适应：
html,body{
height: 100%;
background-color: green;
}
伪元素
div::first-letter{ #开头第一个字母大写
font-size: 30px;
}
div::first-line{ #第一行填充背景颜色
background-color: yellow;
}
div::before{ #开头加内容aaaaaaa
content: "aaaaaaa";
}
div::after{ #结尾加内容bbbbbb
content: "bbbbbb";
}
记录一个万能浮动小案例：
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
margin:0 auto;
}
ul{
list-style-type: none;
}
.box .item{
float: left;
width: 148px;
text-align: center;
border: 1px solid blue;
background: blue;
color: white;
height:40px;
line-height: 40px;
}
.item:hover{
background-color: lightblue;
}
.item ul{
display: none;
background-color: white;
color: black;
}
.item:hover ul{
display: block;
}
.item li:hover{
color: blue;
}
.body{
background-color: yellow;
height: 200px;
}
</style>
没有设置万能浮动之前是这样的，黄色部分是内容，我希望内容在导航栏下面。且二级菜单显示的时候会覆盖一部分内容。 然后设置下万能浮动：
.box::after{
content: "aaaa";
clear: both;
display: block;
width: 0;
height: 0;
visibility: hidden;
}
内容和导航部分就可以完美分开，且显示二级导航的时候不影响内容。 visibility: hidden;和display：none；的区别是：
visibility: hidden 是占位隐藏，即使隐藏了，位置也会被空出来。
display：none；是不占位隐藏，隐藏后位置不会被空出，其他盒子会占领。
扫一扫
2573
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
