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

049 - 看山不是山（上）

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

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



哈哈，废话不多说了，#敲黑板时刻！{:10_281:}



在线视频：传送门



课程思维导图


猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清



关于浏览器的工作和渲染原理，大家请看：浏览器如何渲染 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

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



课后作业，完成了吗？

传送门



http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif

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



如果有收获，别忘了评分{:10_281:} ：

http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif

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

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

{:10_311:}沙发

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

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

厉害！

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

{:7_146:}

QBR 发表于 2024-11-25 14:51:50

学习了{:10_333:}
页: [1]
查看完整版本: 049 - 看山不是山（上）