CSS学习10

最新推荐文章于 2024-07-18 20:18:47 发布

aneyal

最新推荐文章于 2024-07-18 20:18:47 发布

阅读量367

点赞数 2

分类专栏：前端学习文章标签： css 学习 css3 前端

本文链接：https://blog.csdn.net/aneyal/article/details/123589227

版权

前端学习专栏收录该内容

47 篇文章 2 订阅

订阅专栏

固定定位、绝对定位模式转换

固定定位和绝对定位会将块级元素转换为行内块元素，相对定位不会

同时，行内元素如果添加了绝对定位或固定定位或浮动之后，变为行内块模式，不用再进行模式转换

元素的显示与隐藏

使用display:none来隐藏元素，隐藏后不保留元素的位置，但元素还在网页之中

display：block除了有将元素转为块级元素的作用之外，还有显示元素的作用

也可以使用visibility：hidden来隐藏元素，但隐藏之后仍然保留元素位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
				background-color: pink;
				text-align: center;
				line-height: 100px;
				position: relative;
			}
			img{
				width: 100px;
				height: 100px;
				position: absolute;
				left: 100px;
				top: 0;
				/* 隐藏图片 */
				display:none;
				
			}
			/* 鼠标经过div时，图片显示出来 */
			div:hover img{
				display:block;
			}
		</style>
	</head>
	<body>
		<div>
			扫二维码
			<img src="img/i1.jpg" />
		</div>
	</body>
</html>

效果（图1为鼠标未经过粉红区域时，图二为鼠标经过粉红区域时）：

overflow溢出

检索或设置当前对象的内容超过其指定高度及宽度时如何管理内容。

可选值：

visible:不剪切内容也不添加滚动条（默认）

auto：超出自动显示滚动条，不超出不显示滚动条

hidden：不显示超过对象尺寸的内容，超出的部分将被隐藏掉

scroll：不管超出内容与否，都会显示滚动条

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 80px;
				height: 100px;
				float: left;
			}
			div:first-child{
				background-color: red;
				overflow:visible ;
			}
			div:nth-child(2){
				background-color: orange;
				overflow: auto;
			}
			div:nth-child(3){
				background-color: yellow;;
				overflow: hidden;
			}
			div:nth-child(4){
				background-color: green;
				overflow: scroll;
			}
		</style>
	</head>
	<body>
		<div>检索或设置当前对象的内容超过其指定高度及宽度时如何管理内容。</div>
		<div>检索或设置当前对象的内容超过其指定高度及宽度时如何管理内容。</div>
		<div>检索或设置当前对象的内容超过其指定高度及宽度时如何管理内容。</div>
		<div>检索</div>
	</body>
</html>

效果：