元素可见性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
background-color: pink;
}
.box2 {
width: 300px;
height: 300px;
background-color: skyblue;
/* 元素的显示模式 */
/* display: inline; 把元素转换成行内元素*/
/* display: inline-block; 元素转换成行内块*/
/* display: block; 元素转换成块 让元素显示*/
/* 让元素隐藏,并且隐藏之后不再占用原来的位置 */
/* display: none; */
/* display: block; */
/* visibility元素可见度 能够使元素隐藏但是还占用自己原来的位置 */
/* visible : 对象可视 */
/* hidden : 对象隐藏 */
visibility: visible;
visibility: hidden;
}
.box3 {
width: 300px;
height: 300px;
background-color: springgreen;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
鼠标样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
background-color: pink;
}
.box:hover {
/* 鼠标样式 */
/* default 小白 | pointer 小手 | move 移动 | text 文本 | not-allowed 禁用 */
cursor: pointer;
cursor: move;
cursor: text;
cursor: not-allowed;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
阻止用户点击
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active{
/* 阻止用户点击 */
pointer-events: none;
}
</style>
</head>
<body>
<a href="" class="acitve">点击一下</a>
</body>
</html>
表单轮廓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* outline */
/* outline : outline-color ||outline-style || outline-width */
/* border */
.input{
outline: none;
outline: skyblue solid 1px;
border: 0px;
text-align: center;
border-radius: 10px;
}
</style>
</head>
<body>
<!-- 普通文本输入框 -->
<input type="text">
<input type="text" class="input">
</body>
</html>
图片与文字对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
border: 1px solid red;
}
.box img{
width: 100px;
height: 80px;
/* vertical-align */
/* baseline 图片文字基线对齐|top 顶部对齐 |middle中间对齐 |bottom底部对齐 */
vertical-align: baseline;
vertical-align: top;
vertical-align: bottom;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">
<img src="https://img13.360buyimg.com/n1/jfs/t1/156675/13/36956/94051/649f7c15F88b61b3b/2356f871c9a6dfdf.jpg.avif"
alt="">
这是一个显卡
</div>
</body>
</html>
文字换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid red;
/* 文字换行 */
/* word-break: normal;
word-break: break-all;
word-break: keep-all; */
/* break-all 允许在单词内换行。 */
/* keep-all 只能在半角空格或连字符处换行。 */
/* 将文字强制显示在一行 */
/* white-space */
white-space: nowrap;
}
</style>
</head>
<body>
<div class="box">
<!-- 11111111111111111111111111111111111111111111111 -->
<!-- 官方回应网传28.8万彩礼男生被退婚热官方回应网传28.8万彩礼男生被退婚热 -->
Official response online 288,000 betrothal price male students are getting divorced Official response
online 288,000 betrothal price male students are getting divorced hot
</div>
</body>
</html>
文字溢出隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid red;
/* 先让文本强制显示在一行 */
white-space: nowrap;
/* 2.需要写一个overflow:hidden */
overflow: hidden;
/* 3.text-overflow:ellipsis */
text-overflow: clip;
text-overflow: ellipsis;
/* clip : 不显示省略标记(...),而是简单的裁切 */
/* ellipsis : 当对象内文本溢出时显示省略标记(...) */
}
.box2{
width: 200px;
height: 300px;
/* position: relative;
background-image: url();
text-align: center;
line-height: 10px;
top: 10px;
left: 10px; */
}
.box2 ul li{
width: ;
}
</style>
</head>
<body>
<div class="box">
官方回应网传28.8万彩礼男生被退婚热官方回应网传28.8万彩礼男生被退婚热
</div>
<div class="box2">
<ul>
<li>
</li>
</ul>
</div>
</body>
</html>