爱站程序员基地1：css三角形的制作
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title><style>.span1{display: block;width: 0;height: 0;border-top: 40px solid red;border-bottom: 40px solid rgba(0,0,0,0);border-left: 40px solid rgba(0,0,0,0);border-right: 40px solid rgba(0,0,0,0);margin-top: 50px;}.span2{display: block;width: 0;height: 0;border-top: 40px solid red;border-bottom: 40px solid salmon;border-left: 40px solid mediumorchid;border-right: 40px solid saddlebrown;margin-top: 50px;}</style></head><body><span class=\"span1\"></span><span class=\"span2\"></span></body></html>
2.css定位类型有哪些
1.static（静态定位）： 这是页面元素position属性的默认值，元素将按照浏览器对网页中元素的排列规则排列。
2.relative（相对定位）：相对自身原来位置的定位！如果以前没有设置position或者position值为static，那么设置relative后，元素的left，right，top，bottom的位置参照自身原来的位置进行移动。
3.absolute（绝对定位）：这个大家应该都很了解，即脱离文档流的定位。定位参照物为自己的父级，但是自己的父级必须拥有position属性（父级position属性为static也不行，必须为absolute，relative，fixed中的一个）。如果自己的父级没有设置position属性，会一直向上寻找有position属性且不为static的的祖先元素，直到body元素。
4.absolute（绝对定位）：这个大家应该都很了解，即脱离文档流的定位。定位参照物为自己的父级，但是自己的父级必须拥有position属性（父级position属性为static也不行，必须为absolute，relative，fixed中的一个）。如果自己的父级没有设置position属性，会一直向上寻找有position属性且不为static的的祖先元素，直到body元素。
5.fixed（固定定位）：这个属性是元素以相对浏览器窗口为基准进行定位的，无论怎样移动你的滑动条，它都会固定在相对于浏览器窗口的固定位置，另外要注意，它的兄弟元素将会在位置排布上忽视它的存在。这个时候用的top，bottom，left，right也是相对于浏览器窗口而言的。
6.position:sticky粘性定位
position: sticky是CSS3新增的一处属性，可以说是相对定位relative与固定定位fixed的结合，它主要用在对scroll事件的监听上，简单来说，在滚动过程中，某个元素距离父元素的距离达到sticky粘性定位的要求时(比如：top: 40px;)position: sticky这时的效果相当于fixed定位，固定到适当的位置（比如：固定在距离屏幕上方40px处）
3.css定位的三种方式
/* 第一种
父级元素：position: relative;
子元素：
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
*/
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title><style>*{margin:0;padding:0;}/* 第一种 */.box{width: 400px;height: 400px;background-color: blanchedalmond;margin-top: 50px;margin-left: 50px;position: relative;}.box .center{width: 150px;height: 150px;background-color: blueviolet;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}/* 第一种 */</style></head><body><!-- 第一种 --><div class=\"box\"><div class=\"center\"></div></div></body></html>
/* 第二种 */
父级元素：position: relative;
子元素：position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title><style>*{margin:0;padding:0;}/* 第二种 */.box2{width: 400px;height: 400px;background-color: coral;margin-top: 50px;margin-left: 50px;position: relative;}.center2{width: 150px;height: 150px;background-color: #FFEBCD;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}/* 第二种 */</style></head><body><!-- 第一种 --><div class=\"box\"><div class=\"center\"></div></div><!-- 第二种 --><div class=\"box2\"><div class=\"center2\"></div></div></body></html>
第三种
父级元素：弹性盒子
display: flex;
justify-content: center;
align-items: center;
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title><style>*{margin:0;padding:0;}/* 第三种 */.box3{width: 400px;height: 400px;background-color: skyblue;margin-top: 50px;margin-left: 50px;display: flex;justify-content: center;align-items: center;}.center3{width: 150px;height: 150px;background-color: orangered;}/* 第三种 */</style></head><body><!-- 第三种 --><div class=\"box3\"><div class=\"center3\"></div></div><!-- 第三种 --></body></html>
