马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2020-8-24 11:24 编辑
哈哈，废话不多说了， #敲黑板时刻！ 
课程思维导图
使用 inline-block 来布局，有一些事情需要牢记：
抛开面试挖坑的东西，行内块存在意义的就是为了方便布局！
最常用的就是快速来创建菜单栏：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简约而不简单的菜单栏</title>
<style>
#nav a {
display: inline-block;
width: 200px;
height: 50px;
color: white;
background: #429296;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div id="nav">
<a href="#" target="_blank">首页</a>
<a href="#" target="_blank">论坛</a>
<a href="#" target="_blank">宝典</a>
<a href="#" target="_blank">起飞</a>
</div>
</body>
</html>
接下来我们说 display:none 和 visibility:hidden 。
它们都可以让元素不可见，但是是有区别的：
- none 元素消失，在页面中不占据空间
- hidden 元素消失，在页面中仍占据空间
光说不行，上代码：
<div>
<strong>给元素设置display:none样式</strong>
<p>A元素</p>
<p style='display:none;'>B元素</p>
<p>C元素</p>
</div>
<div>
<strong>给元素设置visibility:hidden样式</strong>
<p>A元素</p>
<p style='visibility:hidden;'>B元素</p>
<p>C元素</p>
</div>
效果一目了，都是消失的 B 元素，但是页面效果是不一样滴。
display 属性还有很多值，重点就是 flex 和 grid，前者启动弹性布局，后者启动栅格布局。
以后肯定会讲到，有兴趣可以先看这 3 个视频：
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（ 传送门）（ 不喜欢更要订阅 ） | 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2020-8-11 08:43:01
置顶卡
千斤顶
显身卡
发表于 2020-8-11 18:47:56
发表于 2021-8-25 21:19:05
