基础知识 | htmlcss在逃知识收录-CSDN博客

控制文字不被选中 user-select:none

-moz-user-select:none;/*火狐*/

-webkit-user-select:none;/*webkit浏览器*/

-ms-user-select:none;/*IE10*/

-khtml-user-select:none;/*早期浏览器*/

值为text就可以选中文字复制

input

函数外 focusout

按键 keyup

span与button对齐

span设置line-height与vertical-align: middle;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{
			padding: 0;
			margin: 0;
		}
		div{
			height:30px;
		}
		button{
			display: block;
			float: left;
			height: 30px;
		}
		span{
			float: left;
			line-height: 30px;
			text-align: center;
			vertical-align: middle;
			display: block;
		}
		</style>
	</head>
	<body>
		<div>
			<span>1111</span><button>2222</button>
		</div>
	</body>
</html>

div input button 高度一致

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div,input,button{
			margin: 0;
			padding: 0;
			height: 23px;
			vertical-align:middle;
		}
		div{
			display: inline-block;
			border:1px solid gray;
		}
		input{
		 box-sizing: border-box;
		}
		div{
			 box-sizing: border-box;
		}
		</style>
	</head>
	<body>
		<div>11</div><input type="text"><button>11</button>
	</body>
</html>

input我常搞混的东西

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			input[type="submit"]{
				width:180px;
				height:30px;
				background-color: deepskyblue;
				/* 去掉边框 */ 
				border:0;
				margin-bottom: 10px;
			}
            input[type="text"]{
				width:180px;
				height:30px;
				/* 去掉点进去出现的黑框 */
				outline:none;
			}
			
		</style>
	</head>
	<body>
		<input type="submit" value="登录"><br/>
		<input type="text">
	</body>
</html>

line-height：1 能清掉文字自带的距离

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p{
				background-color: deepskyblue;
			}
			.a2{
				line-height: 1;
			}
		</style>
	</head>
	<body>
		<p class="a1">你好啊，2023年新年快乐啊</p>
		<p class="a2">你好啊，2023年新年快乐啊</p>
	</body>
</html>