【前端中css相关知识总结】css实现固定宽高比；css中伪元素

2021-05-30 17:31:50 阅读：162 来源： 互联网

文章目录

一、css实现固定宽高比，随屏幕自适应
二、伪元素

一、css实现固定宽高比，随屏幕自适应

在最近做项目时，因为使用了两个屏幕，一个分屏的屏幕尺寸要比笔记本电脑屏幕大一些，就造成了使用固定值设置宽高的元素在两边屏幕呈现出不一样的布局与大小。于是查了点资料进行了一些修改就完成了，下面是一些总结：

1.1 方案一：宽高设置为vw，vh

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.container {
				width: 100%;
				/*只是为了证明宽高不等而已*/
				height: calc(100vw + 100px);
				background: skyblue;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.box {
				width: 40vw;
				height: 40vw;
				background: red;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box">
			</div>
		</div>
	</body>
</html>

1.2 方案二：padding-bottom实现普通元素固定宽高比

.wrapper {
width: 40vw;
}
.intrinsic-aspect-ratio-container {
width: 100%;
height: 0;
padding: 0;
padding-bottom: 75%;
margin: 50px;
background-color: lightsalmon;
}

1.3 方案三：指定宽度或者高度值，另一边自动计算就可以了

.img-wrapper {
width: 50vw;
margin: 100px auto;
padding: 10px;
border: 5px solid lightsalmon;
font-size: 0;
}

img {
width: 100%;
height: auto;
}

1.4 方案四：aspect-ratio属性指定元素宽高比

/* 高度随动 */
.box1 {
width: 100%;
height: auto;
aspect-ratio: 16/9;
}

/* 宽度随动 */
.box2 {
height: 100%;
width: auto;
aspect-ratio: 16/9;
}

二、伪元素

2.1伪元素是什么

在这里插入图片描述

伪元素是他们不是真正的页面元素，html没有对应的元素，但是其用法和行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。

伪元素可以在真正的页面元素内部之前后之后添加新的内容：

<p>hello world</p>
 
    <style>
 
        p:before{content: "this is inserted before hello world! "}
 
        p:after{content: "this is inserted after hello world"}
 
    </style>

这个效果就相当于这个html结构：

<p>
 
        <span>this is inserted before hello world!</span>
 
        hello world
 
        <span> this is inserted after hello world</span>
 
    </p>

2.2 before：：和after：：的特点

伪元素：before和：after添加的内容默认是inline元素；这个两个伪元素的content属性，表示伪元素的内容，设置：before和：after时必须设置其content属性，否者伪元素就不起作用。

content属性值的内容如下：

字符串，原样输出
属性，属性名
url，引用外部资源
counter （）

2.3 伪元素的特点

伪元素不属于文档，js不能操作它。
伪元素属于主元素的一部分，因此点击为元素触发的时主元素的click事件
大部分块级元素也可以设置伪元素，但是像img可替换元素，因为其外观和尺寸由外部资源决定，那么外部资源正确加载，就会替换掉其内部内容，这时伪元素也会被替换掉，但是当外部资源加载失败时，设置的伪元素就可以起作用。

码字不易~，各位看官要是看爽了，可不可以三连走一波，点赞皆有好运！，不点赞也有哈哈哈~~~

标签：after,元素,中伪,width,宽高比,css,before
来源： https://blog.csdn.net/yangyaning123/article/details/117400422

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9