JavaWeb-CSS（层溢出，元素隐藏，层的叠放顺序调整，字体属性，背景属性，边框属性，间距，线条，段落，列表，动画）

本文链接：https://blog.youkuaiyun.com/weixin_62520626/article/details/122239591

1.层溢出

层溢出的处理 auto 会自动判断是否加上滚动条
hidden 隐藏溢出的内容
visible 显示溢出的内容默认值
scroll 始终加上滚动条

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				width: 100px;
				height: 100px;
				border: 1px black solid;
				background-color: aqua;
				/* 层溢出的处理  auto 会自动判断是否加上滚动条
				  hidden 隐藏溢出的内容
				  visible 显示溢出的内容 默认值
				  scroll 始终加上滚动条
				 */
				overflow:  scroll;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			啊发射点发射点
			啊发射点发射点
			啊发射点发射点
			啊发射点发射点
			啊发射点发射点
			啊发射点发射点
			啊发射点发射点
			啊发射点发射点
			啊发射点发射点
			啊发射点发射点
			啊发射点发射点
			啊发射点发射点
			啊发射点发射点
			啊发射点发射点
			啊发射点发射点
			啊发射点发射点
			啊发射点发射点
			啊发射点发射点
			啊发射点发射点
			啊发射点发射点
		</div>
	</body>
</html>

2.元素的隐藏

display: none;隐藏块元素，隐藏之后，所占的位置也就消失了

visible 显示元素
hidden;隐藏元素
visibility: hidden; 隐藏元素后，所占的位置还是在的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				border: 1px black solid;
				float: left;
			}
			#d1{
				background: red;
			}
			#d2{
				background: yellow;
				/* display: none;隐藏块元素，隐藏之后，所占的位置也就消失了 */
				/* display: none; */
				/* visible 显示元素
				 hidden;隐藏元素
				 visibility: hidden; 隐藏元素后，所占的位置还是在的
				 */
				visibility: hidden;
			}
			#d3{
				background: blue;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			
		</div>
		<div id="d2">
			
		</div>
		<div id="d3">
			
		</div>
	</body>
</html>

3.层的叠放顺序调整

z-index的值越大就在最上面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				border: 1px black solid;
				position: absolute;
			}
			#d1{
				background: red;
				top: 20px;
				left: 20px;
				/* 调整层的叠放顺序，值越大就在最上面 */
				z-index: 10;
			}
			#d2{
				background: yellow;
				top: 50px;
				left: 50px;
				z-index: 5;
			}
			#d3{
				background: blue;
				top: 80px;
				left: 80px;
				z-index: 100;
			}
		</style>
	</head>
	<body>
		
		<div id="d1">
			
		</div>
		<div id="d2">
			
		</div>
		<div id="d3">
			
		</div>
	</body>
</html>

4.字体的属性

font-family------设置字体
font-size:px，pt，mm，cm
font-style 设置字体的样式（设置字体是否为斜体字）
font-weight 设置字体的加粗
text-shadow设置字体的阴影
font-variant 设置字体的变体 small-caps 表示英文字母显示为小型的大写字母

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			span{
				/* 单位 px pt mm cm */
				font-size: 20mm;
				/* 颜色的取值：颜色的英文单词，可以取颜色的16进制值  #26DB6F
					rgb()
					rgba() a透明度 0---1
				*/
				color:rgba(255,0,0,0.8);
				/* 加粗 */
				font-weight: 900;
				/* 字体 */
				font-family: 楷体;
				/* 文字斜体 */
				font-style: italic;
				/* 文字阴影 左右位置 上下位置 发光范围 阴影颜色*/
				text-shadow: 5px 10px 5px gray;
			}
			b{
				font-size: 25px;
				font-variant: small-caps;
			}
		</style>
	</head>
	<body>
		<span>这是一行文本</span>
		<b>ABDEFasfasdfasfasdfasdfasdfasdfasdf</b>
	</body>
</html>

5.背景的设置

transparent 背景颜色透明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/* 设置页面的背景颜色 */
			body{
				background-color:rgba(255,0,0,0.3);
			}
			#d1{
				width: 300px;
				height: 300px;
				border: 2px black solid;
				/* transparent 背景颜色透明 */
				background-color: transparent;
			}
		</style>
	</head>
	<body>
		
		<div id="d1">
			
		</div>
	</body>
</html>

6.背景图片

fixed---表示背景图片固定在页面上不动，不随滚动条移动而移动
no-repeat 背景图片不平铺

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				background-image:url(img/girl1.jpg);
				/* 背景图片不要重复 */
				background-repeat:no-repeat ;
				/* 设置背景图片的尺寸 左右 上下 */
				background-size: 100% 800px;
				/* 固定背景图片 不要随滚动条进行滚动*/
				background-attachment: fixed;
			}
		</style>
	</head>
	<body>
		
		<div id="" style="height: 5000px;">
			asfasdfasdfadsfadsfsf
			asfasdfasdfadsfadsfsf
			asfasdfasdfadsfadsfsf
			asfasdfasdfadsfadsfsf
			asfasdfasdfadsfadsfsf
			asfasdfasdfadsfadsfsf
			asfasdfasdfadsfadsfsf
			
			asfasdfasdfadsfadsfsf
			asfasdfasdfadsfadsfsf
			asfasdfasdfadsfadsfsf
			asfasdfasdfadsfadsfsf
			asfasdfasdfadsfadsfsf
			asfasdfasdfadsfadsfsf
		</div>
	</body>
</html>

块标签背景图片：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				width: 400px;
				height: 600px;
				border: 1px black solid;
				background-image: url(img/girl2.jpg);
				background-size: 100% 100%;
			}
				
			#d2{
				width: 400px;
				height: 600px;
				border: 1px black solid;
				background-image: url(img/xinzic.png);
				/*背景图片不要重复 */
				background-repeat: no-repeat;
				/* 背景图片尺寸，左右 上下 */
				background-size: 100% 100%;
			}
		</style>
	</head>
	<body>
		
		<div id="d1">
			
		</div>
		
		<div id="d2">
			
		</div>
	</body>
</html>

7.背景图片的位置

background-position
关键字百分比位置说明
top left 0% 0% 左上位置
top center 50% 0% 靠上居中
top right 100% 0% 右上位置
left center 0% 50% 靠左居中
center center 50% 50% 正中位置
right center 100% 50% 靠右居中
bottom left 0% 100% 左下位置
bottom center 50% 100% 靠下居中
bottom right 100% 100% 右下位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
				
			#d1{
				
				width: 800px;
				height: 600px;
				border: 1px black solid;
				background-image: url(img/xinzic.png);
				/*背景图片不要重复 */
				background-repeat: no-repeat;
				/* 背景图片的位置 */
				background-position: center center;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			
		</div>
	</body>
</html>

8.边框的设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1 {
				width: 400px;
				height: 400px;
				/* border: 5px black solid; */
				border-color: red;
				border-style: solid;
				border-width: 5px;
				border-top-color: #0000FF;
				border-bottom-width: 10px;
				border-left-style: dashed;
			}
		</style>
	</head>
	<body>
		<div id="d1">

		</div>
	</body>
</html>

9.相册的设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				background-color: plum;
			}
			div{
				height: 350px;
				width: 200px;
				border: 12px white solid;
				border-bottom-width: 15px;
				float: left;
				margin-left: 100px;
				background-size: 100% 100%;
				margin-top: 20px;
				box-shadow: 8px 8px 10px gray;
			}
			#d1{
				background-image: url(img/girl1.jpg);
				transform: rotate(15deg);
				transition: transform 0.5s;
			}
			#d2{
				background-image: url(img/girl2.jpg);
				transform: rotate(-35deg);
				transition: transform 0.5s;
			}
			#d3{
				background-image: url(img/girl3.jpg);
				transform: rotate(45deg);
			}
			#d4{
				background-image: url(img/girl4.jpg);
				transition: background-size 0.5s;
			}
			#d5{
				background-image: url(img/girl5.jpg);
			}
			#d6{
				background-image: url(img/girl3.jpg);
				transform: rotate(-45deg);
				transition: transform 1s;
			}
			#d1:hover{
				transform: rotate(0deg);
				transition: transform 0.5s;
			}
			#d2:hover{
				transform: scale(1.2);
				transition: transform 0.5s;
			}
			#d4:hover{
				background-size: 105% 105%;
				transition: background-size 0.5s;
			}
			#d6:hover{
				transform: rotate(360deg);
				transition: transform 1s;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			
		</div>
		<div id="d2">
			
		</div>
		<div id="d3">
			
		</div>
		<div id="d4">
			
		</div>
		<div id="d5">
			
		</div>
		<div id="d6">
			
		</div>
		
	</body>
</html>

10.边框圆角

border-radius设置边框圆角
border-radius:50px; 先把边框设置后再设置圆角
div {
border:2px solid;
border-radius:25px;
}

边框的阴影：
box-shadow: 10px 10px 5px #888888;//添加阴影
X方向的偏移像素
Y方向的偏移像素
模糊的像素值
阴影颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#btn {
				height: 40px;
				width: 100px;
				border: 0px black solid;
				/* 边框圆角 */
				/* border-radius: 5px; */
				/* 设置四个方向的圆角 */
				border-top-right-radius: 20px;
				border-bottom-left-radius: 20px;
				/* 文本居中 */
				text-align: center;
				/* 设置行高，跟外框高度一样，可以让文字上下居中 */
				line-height: 40px;
				background-color: goldenrod;
				font-weight: 500;
				font-size: 18px;
				color: white;

			}

			#photo {
				height: 300px;
				width: 300px;
				border: 0px black solid;
				/* 把弧度设置为宽高的一半 */
				border-radius: 150px;
				background-image: url(img/xingye.jpg);
				background-size: 100% 100%;
				/* 阴影 左右 上下 发光范围 阴影颜色*/
				box-shadow: 0px 0px 50px yellow;
				

			}

			button {
				height: 40px;
				width: 100px;
				border: 0px black solid;
				background-color: goldenrod;
				font-weight: 500;
				font-size: 18px;
				color: white;
				/* 设置四个方向的圆角 */
				border-top-right-radius: 20px;
				border-bottom-left-radius: 20px;
			}
		</style>
	</head>
	<body>
		<div id="btn">
			一个按钮
		</div>
		<hr>
		<hr>
		<br>
		<div id="photo">

		</div>
		<br>
		<br>
		<br>

		<button type="button">一个按钮</button>
	</body>
</html>

11.内间距

用来设置边框和其内部的元素之间的空白距离
上边距 padding-top
下边距 padding-bottom
左边距 padding-left
右边距 padding-right
复合设置 padding

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#wai {
				height: 200px;
				width: 400px;
				border: 1px black solid;
				/* 站在外框的角度设置内间距 */
				padding-left: 150px;
				padding-top: 80px;
				/* 设置内间距时，防止把外框撑大 */
				box-sizing: border-box;
			}

			#nei {
				height: 100px;
				width: 200px;
				border: 1px black solid;
				background: yellowgreen;
			}
		</style>
	</head>
	<body>
		<div id="wai">
			<div id="nei">

			</div>
		</div>
	</body>
</html>

12.字符间距

调整字符间距
letter-spacing
用来控制字符之间的间距，这个间距实际上就是在浏览器中所显示的字符间的空格距离。
取值：
normal ---表示正常显示（默认）
长度--可以使用负数，带上单位
单位px(像素)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				/* 字符间距 */
				letter-spacing: 10px;
			}
			button{
				height:50px;
				font-size: 15px;
				width: 200px;
				letter-spacing: 10px;
				
			}
		</style>
	</head>
	<body>
		<button type="button">按钮按钮按阿牛</button>
		<p>
			
			计算机信息（数字、文字、图片）在电子中是以二进制 1 和 0（01000101）进行存储的。
			
			为了规范字母数字字符的存储，创建了 ASCII（全称 American Standard Code for Information Interchange）。它为每个存储字符定义了一个独特的二元 7 位数字，支持 0-9 数字，大/小写英文字母（a-z、A-Z）和一些特殊的字符，比如 ! $ + - ( ) @ < > 。
			
			由于 ASCII 使用一个字节（7 位表示字符，1 位表示传输奇偶控制），所以它只能表示 128 个不同的字符。这些字符中有 32 个被保留作为其他控制目的使用。
			
			ASCII 的最大的缺点是，它排除了非英文字母。
			
			ASCII 今天仍然在广泛使用，尤其是在大型计算机系统中。
			
			如需深入了解 ASCII，请查看完整的 ASCII 参考手册。
		</p>
	</body>
</html>

13.线条

为文字添加如下划线，删除线等修饰
text-decoration
属性的取值：
underline----添加下划线
overline---添加上划线
line-through--添加删除线
blink---添加闪烁效果（只能在Netscape的浏览器中正常显示）
none--没有任何的修饰

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h1{
				text-decoration: underline;
			}
			h2{
				text-decoration: line-through;
			}
			h3{
				text-decoration: overline;
			}
			a{
				text-decoration: none;
			}
			h4{
				text-transform: lowercase;
			}
			h5{
				text-transform: uppercase;
			}
			h1:hover{
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<h1>啊发撒沙发沙发</h1>
		<h2>啊发撒沙发沙发</h2>
		<h3>啊发撒沙发沙发</h3>
		<a href="#">asfasdfsadfd</a>
		
		<h4>ABCDEF</h4>
		<h5>asdfasdfasdfasdfasf</h5>
	</body>
</html>

14.段落的缩进

text-indent
用来控制每个段落的首行缩进的距离。
属性取值：
长度（数字）带上单位
百分比相对于上一级元素的宽度
em 倍数
对p标签中的文本进行首行缩进

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				/* 首行缩进 2倍 */
				text-indent: 2em; 
				/* 行高 */
				line-height: 2em;
			}
		</style>
	</head>
	<body>
		<p>
			JavaScript是一门面向对象的编程语言，与其它面向编程的语言不同的是，JavaScript的面向是基于原型的。即使在ES6中有了类的概念，但也只是语法糖而已。所有JS对象都会从它的原型对象中继承属性和方法，从而实现面向对象编程。
			构造器函数

			回顾前面学过的构造函数，我们可以通过构造函数的new方法实例化对象

			作者：微语博客
			链接：https://www.jianshu.com/p/6e5b58859b91
			来源：简书
			著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。JavaScript是一门面向对象的编程语言，与其它面向编程的语言不同的是，JavaScript的面向是基于原型的。即使在ES6中有了类的概念，但也只是语法糖而已。所有JS对象都会从它的原型对象中继承属性和方法，从而实现面向对象编程。
			构造器函数

			回顾前面学过的构造函数，我们可以通过构造函数的new方法实例化对象

			作者：微语博客
			链接：https://www.jianshu.com/p/6e5b58859b91
			来源：简书
			著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。JavaScript是一门面向对象的编程语言，与其它面向编程的语言不同的是，JavaScript的面向是基于原型的。即使在ES6中有了类的概念，但也只是语法糖而已。所有JS对象都会从它的原型对象中继承属性和方法，从而实现面向对象编程。
			构造器函数

			回顾前面学过的构造函数，我们可以通过构造函数的new方法实例化对象

			作者：微语博客
			链接：https://www.jianshu.com/p/6e5b58859b91
			来源：简书
			著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。JavaScript是一门面向对象的编程语言，与其它面向编程的语言不同的是，JavaScript的面向是基于原型的。即使在ES6中有了类的概念，但也只是语法糖而已。所有JS对象都会从它的原型对象中继承属性和方法，从而实现面向对象编程。
			构造器函数

			回顾前面学过的构造函数，我们可以通过构造函数的new方法实例化对象

			作者：微语博客
			链接：https://www.jianshu.com/p/6e5b58859b91
			来源：简书
			著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。JavaScript是一门面向对象的编程语言，与其它面向编程的语言不同的是，JavaScript的面向是基于原型的。即使在ES6中有了类的概念，但也只是语法糖而已。所有JS对象都会从它的原型对象中继承属性和方法，从而实现面向对象编程。
			构造器函数

			回顾前面学过的构造函数，我们可以通过构造函数的new方法实例化对象

			作者：微语博客
			链接：https://www.jianshu.com/p/6e5b58859b91
			来源：简书
			著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
		</p>
	</body>
</html>

15.列表属性

去掉列表自带的小圆点
list-style-type: none;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#wai {
				border: 1px black solid;
				height: 30px;
				padding: 0;
				display: flex;

			}

			#wai .neili {
				/* 去掉列表自带的小圆点 */
				list-style-type: none;
				border: 0px black solid;
				width: 100px;
				height: 30px;
				/* 只要是块标签，都可以浮动 */
				float: left;
				text-align: center;
				line-height: 30px;
				margin: auto;
				border-radius: 6px;
				background: goldenrod;
				color: white;
			}

			.neili:hover>#nei {
				display: block;
			}

			#nei {
				padding: 0;
				display: none;
			}

			#nei .item {
				list-style-type: none;
				border-bottom: 1px black solid;
				width: 100px;
				height: 30px;
				background: red;
			}
		</style>
	</head>
	<body>
		<ul id="wai">
			<li class="neili">关于本站
				<ul id="nei">
					<li class="item">关于本站</li>
					<li class="item">联系我们</li>
					<li class="item">进入首页</li>
					<li class="item">关于本站</li>
					<li class="item">联系我们</li>
					<li class="item">进入首页</li>
				</ul>
			</li>
			<li class="neili">联系我们</li>
			<li class="neili">进入首页</li>
			<li class="neili">关于本站</li>
			<li class="neili">联系我们</li>
			<li class="neili">进入首页</li>
		</ul>
	</body>
</html>

16.彩色图片变黑白

filter: grayscale(100%);
filter: gray;

浏览器兼容问题：
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				height: 400px;
				width: 230px;
				background-image: url(img/girl2.jpg);
				background-size: 100% 100%;
				transition: filter 2s;
			}
			#d1:hover{
				-webkit-filter: grayscale(100%);
				-moz-filter: grayscale(100%);
				-ms-filter: grayscale(100%);
				-o-filter: grayscale(100%);
				filter: grayscale(100%);
				filter: gray;
				transition: filter 2s;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			
		</div>
	</body>
</html>

17.Transform动画

Transform
transform:rotate(30deg);//旋转30度
transform:translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素 transform:scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。 transform:skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				height: 200px;
				width: 200px;
				background-color: red;
				transition: transform 1s;
				
			}
			#d1:hover{
				/* 位移动画，左右 上下 */
				transform: translate(200px,0px);
				transition: transform 1s;
			}
			
			#d2{
				height: 200px;
				width: 200px;
				background-color:yellow;
				
				transition: transform 1s;
				
			}
			 #d2:hover{
				
				/* 旋转动画 负数值，逆时针旋转，正值 顺时针 旋转*/
				transform: rotate(-45deg);
				
				transition: transform 1s;
			} 
			
			#d3{
				height: 200px;
				width: 200px;
				background-color:goldenrod;
				
				transition: transform 1s;
				
			}
			#d3:hover{
				/* 缩放动画 */
				transform: scale(2);
				transition: transform 1s;
			} 
			#d4{
				height: 200px;
				width: 200px;
				background-color:blue;
				
				transition: transform 1s;
				
			}
			#d4:hover{
				transform: skew(-45deg);
				transition: transform 1s;
			} 
		</style>
	</head>
	<body>
		
		<div id="d1">
			
		</div>
		
		<div id="d2">
			
		</div>
		
		<div id="d3">
			
		</div>
		
		<div id="d4">
			
		</div>
	</body>
</html>

18.过度动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#wai {
				height: 100px;
				width: 250px;
				border: 1px black solid;
				display: flex;
			}

			#nei {
				height: 80px;
				width: 230px;
				background-image: url(img/mi.png);
				box-sizing: 100% 100%;
				margin: auto;
				/* 过渡动画的复合写法 */
				transition: transform 0.5s 0s linear;
			}

			#wai:hover>#nei {
				transform: rotate(15deg);
				/* 过渡的属性，过渡时长  延时过渡 过渡速率 */
				/* transition:transform 0.5s 0s linear; */
				/* 过渡的属性  all 代表所有属性 */
				transition-property:transform ;
				/* 过渡时长 */
				transition-duration: 0.5s;
				/*延时过渡  */
				transition-delay: 2s;
				/* 过渡速率 */
				transition-timing-function: linear;
			}
		</style>
	</head>
	<body>

		<div id="wai">
			<div id="nei">

			</div>
		</div>
	</body>
</html>