2.3 css伪元素

最新推荐文章于 2022-06-15 15:08:04 发布

唧七歪鼓。

最新推荐文章于 2022-06-15 15:08:04 发布

阅读量178

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_45538956/article/details/109397305

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了CSS中的伪元素使用，如`::before`和`::after`，用于在元素前后添加内容。还讲解了如何处理文字溢出，包括单行和多行文本的解决方案。此外，详细阐述了背景图片的设置，包括大小、布局、重复和位置。同时提到了图片代替文字的实现方法以及一些CSS小知识，如行内元素和块级元素的嵌套规则、自适应布局等。

摘要由CSDN通过智能技术生成

「HTML+CSS」来源:渡一教育

伪元素

文字溢出处理

图片代替文字

小知识

伪元素

伪元素(可以被操作,但没有html结构)
说明:天生存在于每个html元素中,通过css把伪元素选出来操作
html:
<sapn></span>

css:
spam::before{content:""}(::before最前选出)
spam::after{content:""}(::after最后选出)
说明:
1.每个标签出现后,逻辑前后都会出现伪元素
2.content属性是必有属性,且只能用content,并且属于该伪元素标签
3.伪元素可以当做一个标签使用

之前讲的消除浮动流可以不用加父级,直接使用伪元素改变就可以了.
消除浮动三件套
content:""
clear:both;
display:black;

小知识:
设置了
position:absolute;
floot:left/right;
会打内部把元素转换成inline-black;

文字溢出处理

文字溢出处理
1.溢出容器,要打点显示
	1.单行文本
	
	使用三件套
	1.失去换行:white-space:nowrap;
	2.溢出隐藏:overflow:hidden;
	3.溢出打点:text-overflow:ellipsis;
	2.多行文本
	css3环境下好解决
	但css2的不好解决
	解决方法:多行只做 截断 溢出隐藏(别逼逼就这么做)

背景图片处理
div{
width:200px;
height:200px;
border:1px solid black;

(路径)
background-image:url(图片路径);
(大小)
background-size:100px 200px;
(图片布局)
background-repate:repeat;(铺不满,平均铺)
				  no-repeat;(就铺一张)
				  repeat-x;(x轴铺)
				  repeat-y;(y轴铺)
(出现位置)
background-position:100px 100px;
					左 上 中 下 也可以组合排列
					centent centent;(中)
					50% 50%;(中)
}

图片代替文字

图片代替文字(用css隐藏原文本)
1.文字溢出隐藏
text-indet:200px;
white-space:nowrap;
overflow:hidden;

2.paading撑到下面溢出隐藏
height:0px;
padding-top:90px;
overflow:hidden;

小知识

小知识
1.行级元素只能嵌套行级元素
2.块级元素可以嵌套任何元素
3.<p>元素不能嵌套div
4.<a>元素不能嵌套<a>

5.自适应
margin:0 auto;
说明:左右收缩淘宝会发现,内容最后收缩,
其实就是在内容中间

6.行文本对齐线 
vertical-align:middle(居中)
				正负px;