前言
持续总结输出中,今天分享的是Web前端,CSS中的伪元素、标准流,能够使用伪元素在网页中创建内容
伪元素
一般页面中的非主体内容可以使用伪元素
元素和伪元素的区别:
- 元素:HTML 设置的标签
- 伪元素:由 CSS 模拟出的标签效果
伪元素的种类:
伪元素 | 作用 |
---|---|
::before | 在父元素内容的最前添加一个伪元素 |
::after | 在父元素的最后天添加一个伪元素 |
注意点:
案例参考
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 300px;
height: 300px;
background-color: pink;
}
.father::before {
/* 内容 */
/* content属性必须添加, 否则伪元素不生效 */
content: '';
color: green;
width: 100px;
height: 100px;
background-color: blue;
/* 默认是行内元素, 宽高不生效 */
display: block;
}
.father::after {
content: '理生活';
}
</style>
</head>
<body>
<!-- 伪元素 通过css创建标签, 装饰性的不重要的小图 -->
<!-- 找父级, 在这个父级里面创建子级标签 -->
<div class="father">理财就是</div>
<!-- 理财就是理生活 -->
</body>
</html>
运行结果:
标准流
标准流又称文档流,是浏览器在渲染显示网页内容时默认采用的一套排版规则,规定了应该以何种方式排列元素
常见标准流排版规则:
总结
十分感谢你可以耐心看完,最后分享一句话:
本次的分享就到这里了!!!如果觉得还不错,请不要忘记点赞✌,收藏✌,加关注✌哦 ❤️ ❤️ ❤️