马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2020-8-12 18:51 编辑
哈哈，废话不多说了， #敲黑板时刻！ 
课程思维导图
关于浏览器的工作和渲染原理，大家请看：浏览器如何渲染 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
但如果将行内元素设置为块级元素，上面的不可以就可以啦。
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（ 传送门）（ 不喜欢更要订阅 ） | 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2020-7-5 08:14:59
置顶卡
千斤顶
显身卡
发表于 2020-7-5 08:41:20
沙发
楼主
发表于 2021-8-25 20:53:12
