【前端中css基础——系列4】css实现固定宽高比；css中伪元素

最新推荐文章于 2024-06-25 00:02:13 发布

让子弹飞一会儿=>

最新推荐文章于 2024-06-25 00:02:13 发布

阅读量949

点赞数 3

分类专栏：前端文章标签： css html css3 js javascript

本文链接：https://blog.csdn.net/yangyaning123/article/details/117400422

版权

前端专栏收录该内容

39 篇文章 2 订阅

订阅专栏

系列文章总结

【前端中css基础——系列1】盒模型与flex布局
 【前端中css基础——系列2】css中浮动与垂直居中显示
 【前端中css基础——系列3】css中模块化；css动画；css单位
 【前端中css基础——系列4】css实现固定宽高比；css中伪元素
 【前端中css基础——系列5】BFC与IFC；绝对定位与相对定位和固定位置
 【前端中css基础——系列6】单行多行文本截断；实现三角形圆形

一、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可替换元素，因为其外观和尺寸由外部资源决定，那么外部资源正确加载，就会替换掉其内部内容，这时伪元素也会被替换掉，但是当外部资源加载失败时，设置的伪元素就可以起作用。

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

让子弹飞一会儿=>

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
2
评论
【前端中css基础——系列4】css实现固定宽高比；css中伪元素

文章目录一、css实现固定宽高比，随屏幕自适应1.1 方案一：宽高设置为vw，vh1.2 方案二：padding-bottom实现普通元素固定宽高比1.3 方案三：指定宽度或者高度值，另一边自动计算就可以了1.4 方案四：aspect-ratio属性指定元素宽高比二、伪元素2.1伪元素是什么2.2 before：：和after：：的特点2.3 伪元素的特点一、css实现固定宽高比，随屏幕自适应在最近做项目时，因为使用了两个屏幕，一个分屏的屏幕尺寸要比笔记本电脑屏幕大一些，就造成了使用固定值设置宽高
复制链接

扫一扫