css中display属性与border属性常遇问题讲解
因为HTML很少有太复杂的问题，所以直接写一篇关于CSS的常见问题及解答啦~
display: none;和visibility:hidden;的区别
简单来说：
display: none;不会再占据空间，就跟不存在一样。
visibility:hidden;则只是将透明度变成0，仍然占据其空间。
inline、inline-block、block的区别
首先要明确，每一个标签都有其默认的display的属性值。例如：
<div>标签默认为display: block;
<span>标签默认为display: inline;
但是，默认值可以被重写。即你可以对<div>标签设置display: inline;，对<span>标签设置display: block;
接下来讲区别：
对于display: block;
它独占一行，即不允许有其他元素在其左右。
可设置宽度和高度。
在未设置宽度时，其宽度会撑满。
上下左右的padding和margin都会起作用（这里的起作用是指可以拉开和其他元素的距离）。
对于display: inline;
它不会独占一行，可以允许其他元素在其左右。
宽度和高度由内容撑开，设置width和height是无效的。
左右的margin和padding可以拉开距离，但是上下的margin和padding不能拉开距离。
更多需要注意的点看这里。
对于display: inline-block;
它像inline和block的合体。
允许其他元素在其左右。
可设置宽度和高度。
重点解释一下inline的padding-top或者padding-bottom。当给inline的元素设置这两个值时，实际上是加上了padding的，在设置背景色的时候可以清楚的看到背景色作用在了padding上，但是却没有拉开和下方元素的距离。
代码如下：
<span class="block1">block1</span>
<span class="block2">block2</span>
<div class="block3">block3</div>
.block1 {
background-color: lightblue;
width: 100px; // 无效
height: 500px; //无效
margin-right: 20px;
margin-bottom: 20px; // 无法拉开距离
padding-left: 10px;
padding-bottom: 10px; // 无法拉开距离
}
.block2 {
display: inline-block;
width: 300px; // 可以起作用
background-color: lightgray;
}
.block3 {
background-color: red;
}图片如下：
border-radius: 999px;和border-radius: 50%;的正确理解。
先看代码：
<div class="block1">block1</div>
<div class="block2">block2</div>
.block1 {
width: 200px;
height: 100px;
background-color: lightblue;
border-radius: 999px;
}
.block2 {
width: 200px;
height: 100px;
background-color: lightgray;
border-radius: 50%;
}
