css基础——border，display，visibility
2020-05-11 本文已影响0人
LeslieFind
一、border：边框
1、效果：
border
2、代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
height: 100px;
width: 100px;
border: 4px solid red;
}
.c2 {
height: 100px;
width: 100px;
border: 4px dotted fuchsia;
}
.c3 {
height: 100px;
width: 100px;
border: 4px dashed chartreuse;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
3、总结：
1、border主要有3点：线条粗度，线条类型，颜色
2、实心：solid，虚线：dotted，再虚：dashed
二、display
2.1：[desplay:none]，使标签完全隐藏
效果：
image.png
使用display:none之后
另一个隐藏：[visibility:hidden]
效果:
使用visibility:hedden之后
总结：
隐藏有两种：
1、完全隐藏：display:none;
2、位置还在，内容隐藏：visibility:hedden;
2.2：[display:inline]，块级变行内标签
效果：
image.png
使用display:inline之后
说明：
display:inline把div这种块级标签变成行内标签
2.2：[display:block]，块级变行内标签
2.2：[display:inline-block]，纯行内使用块级的样式（比如span纯行内的，对height和width不生效）
三、cursor：鼠标样式
pointer | help | wait | move | crosshair
