049 - 看山不是山（上）

不二如是 · 发表于 2020-7-5 08:14:59

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2020-8-12 18:51 编辑

上一集：048 - 世界这么大还是遇见你

哈哈，废话不多说了，#敲黑板时刻！

在线视频：传送门

课程思维导图

猛戳

登录/注册后可看大图

超清

关于浏览器的工作和渲染原理，大家请看：浏览器如何渲染 CSS 从而产生效果？ |【白话版】

理解浏览器渲染是有优先级滴：

从上到下就是从高到低。

接下来说 display 属性。

每一个 HTML 元素都有一个默认的 display 属性值。

它决定了这个元素应该以怎么样的形态展示在我们面前。

而记录所有元素的 display 默认属性值的，就是最底层的这个浏览器默认样式表。

当更高级的样式表中不存在某个元素的样式时，浏览器就会去找最底层的默认样式表。

到现在为止就不用解释“块级元素”和“行内元素”啦。

我们通过 display 属性，可以改变默认的值：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box-shadow</title>
<style type="text/css">
div {
display: inline;
}
span {
display: block;
width: 100px;
height: 100px;
margin: 20px;
color: white;
background-color: black;
}
</style>
</head>
<body>
<div>我是div1，默认为块级元素，但现在变为行内元素啦</div>
<div>我是div2，默认为块级元素，但现在变为行内元素啦</div>
<span>我是span1，默认是行内元素，但现在变为块级元素啦</span>
<span>我是span1，默认是行内元素，但现在变为块级元素啦</span>
</body>
</html>

复制代码

效果：

div 元素默认是块级元素，通过设置 display 属性将其改为了行内元素。

变为行内元素后，就要遵守约定：

不可以设置宽高度
不可以设置上下 margin
可以设置左右 margin

但如果将行内元素设置为块级元素，上面的不可以就可以啦。

课后作业，完成了吗？

传送门

登录/注册后可看大图

下一集：50 - 看山不是山（下）

如果有收获，别忘了评分

：

登录/注册后可看大图

这位鱼油，如果喜欢本系列学习笔记，请订阅淘专辑（传送门）（不喜欢更要订阅

）

Twilight6 · 发表于 2020-7-5 08:41:20

沙发

不二如是 · 发表于 2020-7-5 08:51:35

Twilight6 发表于 2020-7-5 08:41
沙发

厉害！

hanyuncanying · 发表于 2021-8-25 20:53:12

账号		自动登录	找回密码
密码			立即注册

[学习笔记] 049 - 看山不是山（上）

马上注册，结交更多好友，享用更多功能^_^

本帖被以下淘专辑推荐: