<>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>

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信