2.3.1 overflow和zom(CSS)

池布旁

已于 2022-02-22 15:56:55 修改

阅读量273

点赞数

分类专栏： CSS层叠样式表文章标签： css css3 html

于 2022-02-22 15:55:05 首次发布

本文链接：https://blog.csdn.net/m0_63692368/article/details/123070184

版权

CSS层叠样式表专栏收录该内容

11 篇文章 0 订阅

订阅专栏

2.3.1 overflow
overflow：
visible: 默认值。(不剪切内容也不添加滚动条);
auto: 在必需时对象内容才会被裁切或者显示滚动条;
hidden: 不显示超过对象的尺寸的内容;
scroll: 总是显示滚动条;
(常用为hidden)

Zoom
zoom: 缩放、扩大
normal：默认值(使用对象的实际尺寸);
number：百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的normal值;
zoom:1 解决ie6高度自适应问题;
对元素的扩大和缩小( 改变图片原有尺寸且不会变回来)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

	/* *{
		padding: 0;
		margin: 0;
	}  */

	#main{
		width: 1000px;
		height: 1000px;
		border: 1px solid black;
		background-color: yellow;
		overflow: scroll;/*overflow：  visible[默认值。不剪切内容也不添加滚动条];  auto[在必需时对象内容才会被裁切或者显示滚动条];
                 注:常用hidden          hidden[ 不显示超过对象的尺寸的内容];       scroll[总是显示滚动条]             常用hidden*/
	
	}

	#box{
		width: 100px;
		height: 100px;
		background-color: pink;
		zoom:0.5;/*zoom:缩放、扩大
		                       normal：默认值。使用对象的实际尺寸;   number：百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的normal值;
                               zoom:1 解决ie6高度自适应问           对元素的扩大和缩小(改变图片原有尺寸且不会变回来) */
	}



	</style>
</head>
<body>
	<div id="main">
		<div id="box">
			


		</div>

	</div>

</body>
</html>