重生之CSS属性的列举

xxxx7xxxx
77 阅读1分钟

vertical-align：行块级元素的垂直方式

top middle bottom {上 中 下}
【注】对其的元素互相之间都要设置

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/css1.css">
	</head>
	<body>
		<div class="Box">
			<div class="b-Box1"></div>
			<span></span>
		</div>
	</body>
</html>

css1.css

.Box {
	width: 400px;
	height: 200px;
	border: 5px solid red;
}

.b-Box1 {
	display: inline-block; /* 行块级元素 */
	width: 100px;
	height: 100px;
	border: 2px dashed pink;
	vertical-align: middle; /* 垂直居中 */
}

span {
	display: inline-block;
	width: 80px;
	height: 50px;
	background: pink;
	vertical-align: middle; /* 垂直居中 */
}

image.png

line-height行高：内容在元素的垂直对齐方式

行高值 < 高度值 偏上
行高值 = 高度值 垂直居中
行高值 > 高度值 偏下
【注】只针对单行文本设置，不能为负数，可已超出元素

hover：鼠标移入

<div class="con">
			父元素
			<div class="c-Con1">子元素</div>
		</div>

.con:hover{}鼠标移入，改变自己

.con:hover{
	background: pink;
}

.con:hover .c-Con1{}鼠标移入，改变子元素

.con:hover .c-Con1{
	font-size: 40px;
}

PS：元素类型分类

块级元素：div p h1~h6 ul ol li dl dt dd

1:独占一行

2:能设置宽高

3：能正常设置内外边距

4：通过用来搭建页面结构

5：矩形显示

行级元素：span a i em b strong u ...

1：在一行显示

2：不能设置宽高

3：不能正常设置垂直方向的内外边距

4：通常配合CSS展示视觉效果

5：非矩形显示，最小单位可能出现矩形

行块级元素：img input select textarea

1：在一行显示

2：能设置宽高

3:

avatar
文章
阅读
粉丝