HTML5教程

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

本文主要是介绍【前端中css相关知识总结】css实现固定宽高比；css中伪元素，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

文章目录

  • 一、css实现固定宽高比，随屏幕自适应
    • 1.1 方案一：宽高设置为vw，vh
    • 1.2 方案二：padding-bottom实现普通元素固定宽高比
    • 1.3 方案三：指定宽度或者高度值，另一边自动计算就可以了
    • 1.4 方案四：aspect-ratio属性指定元素宽高比
  • 二、伪元素
    • 2.1伪元素是什么
    • 2.2 before：：和after：：的特点
    • 2.3 伪元素的特点

一、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属性值的内容如下：

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

2.3 伪元素的特点

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

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

这篇关于【前端中css相关知识总结】css实现固定宽高比；css中伪元素的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航