©2020-2024 ioDraw All rights reserved,
Privacy Policy
<>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>