小白CSS知识点

最新推荐文章于 2024-05-07 16:21:31 发布

然陈

最新推荐文章于 2024-05-07 16:21:31 发布

阅读量7.1k

点赞数 21

本文链接：https://blog.csdn.net/cj521zhihui/article/details/107997908

版权

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>

然陈

关注

21
点赞
踩
2

收藏

觉得还不错? 一键收藏
21
评论
小白CSS知识点

一：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 so
复制链接

扫一扫