css知识总结和补充

TKOP_

已于 2023-03-03 09:07:10 修改

阅读量182

点赞数

分类专栏： Html+Css 文章标签： css html5 html css3

于 2020-12-22 13:45:49 首次发布

本文链接：https://blog.csdn.net/TKOP_/article/details/111396464

版权

Html+Css 专栏收录该内容

11 篇文章 5 订阅

订阅专栏

元素的显示与隐藏

涉及元素的显示或者隐藏的属性主要有 display、visibility 和 overflow（元素的溢出部分的显示与隐藏）。

display 属性用于建立布局时元素生成的显示框类型。对于 HTML 等文档类型，需要谨慎使用 display 属性。因为可能违反 HTML 中已经定义的显示层次结构。这里主要是讲该属性的另一个作用，可用于设置元素的显示和隐藏。display : none; 隐藏元素，display : block; 显示元素。在使用 display 属性隐藏元素之后，元素不再占据原来的空间。
visibility 这个属性用于指定是否显示一个元素生成的元素框。visibility : visible; 默认值，元素是可见的。visibility : hidden; 元素是不可见的。使用 visibility 属性隐藏元素之后，元素依旧会占据页面上的空间。这个属性可以用来实现遮罩层样式的设置。
overflow 属性规定当内容溢出元素框时发生的事情。以下是设置不同属性值的描述。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

scroll 值无论元素内容是否有溢出都会添加水平和垂直两个方向的滚动条。而 auto 则是在该方向上出现溢出时才添加相应的滚动条。

单行文本溢出省略号显示样式设置

1、先强制一行内显示文本white-space:nowrap;
2、超出部分隐藏overflow:hidden;
3、文字使用省略号代替超出部分text-overflow:ellipsis;

<style>
	div{
		float: left;
		width: 100px;
		height: 40px;
		margin: 200px 100px;
		border: solid 2px;
	}
	div:first-child{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
<body>
	<div>
		<span>我这里写了很多很多字，我要让它在一行内显示不下</span>
	</div>
	<div>
		<span>我这里写了很多很多字，我要让它在一行内显示不下</span>
	</div>
</body>

没有设置第一个盒子的样式时：
在这里插入图片描述

强制一行显示后：
在这里插入图片描述

隐藏并替代：
在这里插入图片描述

多行文本溢出省略号显示样式

多行文本溢出省略号显示样式（有较大的兼容性问题，适用于webkit浏览器或移动端。不建议直接使用 css 来完成。）

弹性伸缩盒子模型显示display:-webkit-box;
设置或检索伸缩盒子对象的子元素的排列方式-webkit-box-orient:vertial;
限制在一个块级元素显示的文本行数-webkit-line-clamp:2;
overflow:hidden; text-overflow:ellipsis;

div:first-child{
		display:-webkit-box;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

在 chrome 和 firefox 中的结果如图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kg9rLoWi-1594736415150)(https://s1.ax1x.com/2020/07/14/UaJoxe.png)]

CSS背景样式背景样式补充

1、background-image 设置多重背景图像。
2、background-size 可用于调整背景图像的尺寸。可以使用的值有像素值、百分比或者使用 contain 或 cover 两个关键字（具体样式表现略）。
3、background-origin 规定背景图像的放置位置（了解）。
4、background-clip 规定背景的绘制区域（了解）。