接上篇文章
上篇讲到了4个知识点，今天讲后面的6个。
——————————————————————————————
5、定位
position常规属性有四个
①默认属性static
元素在页面流中正常出现，并作为页面流的一部分。会忽略top、left等边偏移。
②相对定位relative
偏移的参照物为自己原来的位置，会保留它定位前的位置
③绝对定位absolute
偏移的参照物为父级元素或祖先元素（如果没有父级元素或者父级元素没有定位，则以浏览器窗口为参照物）。不保留原来位置。当滑动页面滚动条时，该元素会随着页面一起滚动。
④固定定位fixed
偏移的参照物为浏览器窗口。不保留原来位置。当滑动页面滚动条时，该元素不会随之滚动。
6、元素显示与隐藏的办法
①、display
display属性有none和block属性值，设为none时，则元素会隐藏。并释放该元素所占空间。block则是显示元素。
②visibility
有visible和hidden属性值，设为hidden会隐藏元素。这时被隐藏的元素仍然占有原来的空间
③overflow
有visible，auto，scroll，hidden属性值。visible为默认值，显示超出部分；设为auto时，会给超出部分设置滚动条，如果没有内容超出，则不会有滚动条；设为scroll时，不管内容有没有超出，都会设置滚动条；设为hidden时，会隐藏超出部分的内容。
7、精灵图（雪碧图）技术
该技术作用：网站中常常用到很多图片（针对背景图片），为了避免服务器频繁的接收发送请求，通常把很多小图片合成一张，一次发送，降低服务器压力。
具体可查看下面链接
精灵图详解
8、用CSS画一个三角形
原理：把一个盒子的宽高都设为0时，该盒子就相当于一个点。此时设置它的边框就可以看到四个三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画三角形</title>
<style type="text/css">
.box {
width: 0;
height: 0;
border-bottom: 30px solid red;
border-top: 30px solid blue;
border-right: 30px solid yellow;
border-left: 30px solid black;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
结果如下图
此时如果让其他三边透明，则就剩一个三角形了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画三角形</title>
<style type="text/css">
.box {
width: 0;
height: 0;
border-bottom: 30px solid red;
border-top: 30px solid transparent;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
结果如下：
需要哪一边的三角形就让其他三边的边框透明。
（PS：做三角形还有其他方法，这个是最简单的，CSS3中有别的方法）
9、图片下部有一个小缝隙的问题
原因：因为图片默认是与文字基线对齐的
解决方法：给图片的vertical-align属性设为top、middle。让它不与基线对齐即可解决。
10、单行文本超出时隐藏并显示省略号
①第一步，强制单行显示：white-space ：nowrap
②设置overflow ：hidden
③设置text-overflow: ellipsis
2218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
