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>