前端入门-day2（常见css问题及解答）

tuantuan 发布于2019-08-29 17:02 / 2415人阅读

摘要：写在前面今天是入门前端的小伙伴们应该已经看了一些的基础和的基础了，是不是遇到了很多关于的问题呢。因为很少有太复杂的问题，所以直接写一篇关于的常见问题及解答啦和的区别简单来说不会再占据空间，就跟不存在一样。

写在前面

今天是入门前端的day2, 小伙伴们应该已经看了一些HTML的基础和CSS的基础了，是不是遇到了很多关于CSS的问题呢。因为HTML很少有太复杂的问题，所以直接写一篇关于CSS的常见问题及解答啦~

display: none;和visibility:hidden;的区别

简单来说：

display: none;不会再占据空间，就跟不存在一样。

visibility:hidden;则只是将透明度变成0，仍然占据其空间。

inline、inline-block、block的区别

首先要明确，每一个标签都有其默认的display的属性值。例如：

标签默认为display: block;

标签默认为display: inline;

但是，默认值可以被重写。即你可以对

标签设置display: inline;，对标签设置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上，但是却没有拉开和下方元素的距离。
代码如下：

block1
block2
block3

.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%;的正确理解。

先看代码：

block1
block2

.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


  son1
  son2


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

最后

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

云服务器 GPU云服务器 idcisp业务申请常见问题解答问题解答 java继承问题求解答 Linux常见故障及解决方案

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114062.html

刷题日记Day2 | 构造二叉树

摘要：代码实现构建二叉树节点对应的值就是后序遍历数组的最后一个元素在中序遍历数组中的索引左子树的节点个数递归构造左右子树把题目的要求细化，搞清楚根节点应该做什么，然...

Hwg 2021-11-17 09:33 评论0 收藏0
【重温基础】7.时间对象

摘要：本文是重温基础系列文章的第七篇。系列目录复习资料资料整理个人整理重温基础语法和数据类型重温基础流程控制和错误处理重温基础循环和迭代重温基础函数重温基础表达式和运算符重温基础数字本章节复习的是中的时间对象，一些处理的方法。本文是重温基础系列文章的第七篇。今日感受：做好自律。系列目录：【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理) 【重温基础】1.语法和数据类型...

YuboonaZhang 2019-08-23 14:12 评论0 收藏0
前端架构师亲述：前端工程师成长之路的 N 问及回答

摘要：问题回答者黄轶，目前就职于公司担任前端架构师，曾就职于滴滴和百度，毕业于北京科技大学。最后附上链接问题我目前是一名后端工程师，工作快五年了。 showImg(https://segmentfault.com/img/bVbuaiP?w=1240&h=620); 问题回答者：黄轶，目前就职于 Zoom 公司担任前端架构师，曾就职于滴滴和百度，毕业于北京科技大学。 1. 前端开发问题大...

crossoverJie 2019-08-23 18:14 评论0 收藏0
【进阶1-5期】JavaScript深入之4类常见内存泄漏及如何避免

摘要：本期推荐文章类内存泄漏及如何避免，由于微信不能访问外链，点击阅读原文就可以啦。四种常见的内存泄漏划重点这是个考点意外的全局变量未定义的变量会在全局对象创建一个新变量，如下。因为老版本的是无法检测节点与代码之间的循环引用，会导致内存泄漏。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第一期，本周的主题...

red_bricks 2019-08-23 13:47 评论0 收藏0
前端进阶系列-目录

摘要：然而在最近的面试中通过学习和思考，找到了前进的方向，也得到一些大公司的录用机会。算是从初级前端毕业，进阶了吧。在这里先写个目录。赶时间的同学可以按照我的目录先自行准备提升，希望推荐文章和交流。背景之前我分享了文章大厂前端面试考什么?,你们一定很想看答案吧？说实话，答案我是有，在准备面试的时候会时不时翻看，但内容比较多，比较凌乱，不能指望我在一篇文章中写完。我是从非计算机专业自学前...

cod7ce 2019-08-22 16:12 评论0 收藏0