前端入门-day2(常见css问题及解答)

42次阅读

共计 2581 个字符,预计需要花费 7 分钟才能阅读完成。

写在前面
今天是入门前端的 day2, 小伙伴们应该已经看了一些 HTML 的基础和 CSS 的基础了,是不是遇到了很多关于 CSS 的问题呢。因为 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%;
}

首先要注意,设置 border: 999px; 只是表示设置一个很大的值,事实上不用设置 999px,只要理解了原理,就能找到那个临界值。
其次,设置 border-radius: 999px; 其实是设置了 x 和 Y 方向上的两个值,等价于 border-radius: 999px/999px;

当我们设置 border-raidus: 999px; 时,你可以先想象在一个矩形内部画了两个巨大无比的圆,这两个圆因为太大了,所以产生了交叠的部分,于是根据文档里的这一段:

意思是:L 是边长,S 是 border-radius 设置的两个方向的值的和,如果 f = min(L / s) 小于 1,则 border-radius 都要乘以 f 来缩小。拿上面的代码来说,因为最小边是 100px,s 为 999px + 999px,所以 f = 100 / (999 + 999) 是小于 1 的,所以,border-radius 都要乘以 f,得出来 border-radius:999px; 等价于 border-radius: 50px; 因此变成了 block1 中的跑道形状。

当我们设置 border-raidus: 50%; 的时候,下面这张图就足够解释了:

总结:

border-radius: 50px; 等价于 border-radius: 50px/50px; 有两个方向。

通常,50% 的 radius 用的比较多,常用来设置圆形的头像,对一个正方形元素设置 border-radius: 50%; 即可实现。
当 border-radius 非常大时,会产生交叠,导致要一起缩小,缩小至最短边的一半。

margin 和 padding 的区别,何时用哪个?
区别:
首先,以 border 为界,margin 在 border 之外,padding 在 border 里。

其次,背景色会作用在 padding 上,不会作用到 margin 上。
margin 在垂直方向上可能会出现合并的问题(具体可搜索 margin 坍塌或者外边距合并)

我的用法:通常情况下,我会这样用:

在需要拉开内部元素与父元素的距离时,在父元素上加 padding
在需要拉开元素和元素之间的距离时,用 margin

<div class=”container”>
<div class=”son1″>son1</div>
<div class=”son2″>son2</div>
</div>

.container {
background-color: lightblue;
padding: 10px;
}
.son1 {
margin-bottom: 10px;
background-color: orange;
}
.son2 {
background-color: lightgray;
}

最后
这一篇先到此为止,太长了不适合阅读,因此会拆到下一篇里边。下一篇仍然是讲一些 CSS 的问题~

正文完
 0