display none 隐藏后怎么显示_第12天：打破常规之 display

前面的课程讲解了盒子模型第10天：撑起CSS布局的半壁江山---盒子模型，盒子的表现形式可以通过 display 这个属性控制，比如让 p 元素变成行内元素，让 span 元素变成块级元素。display 能做的事情不止这些，它还有很多其它属性。

1.display：inline

使用 inline 告诉浏览器这是一个行内元素，布局的时候要按照行内元素的方式布局，比如 span 标签默认的就是这种布局方式。在有足够空间的时候，它不会换行。不能使用 width 和 height 属性。从图中可知 width 和 height 并没有起作用，margin 只会在水平方向起作用。

<html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Documenttitle>    <style>        body {            background-color: #2A3950;        }        .des {            color: white;            font-size: 20px;            margin: 10px;        }        .strong {            color: red;            border: 1px solid yellow;            padding: 10px;            margin: 20px;            background-color: antiquewhite;            width: 150px;            height: 80px;        }style>head><body>    <p class="des">《前端小课》是一本关于前端入门到进阶的    <span class="strong">多媒体电子书span>，通过公众号的形式呈现内容，    并与粉丝形成互动，推动读者自我驱动，利用业余时间学习前端，    迎合大前端的浪潮。    p>body>html>

2.display：block

使用 block 告诉浏览器这是一个块级元素，布局的时候要按照块级元素的方式布局，比如 p 、div 标签默认就是这种布局方式。把上面的选择器 strong 添加 display：block，使 span 标签变为块级标签，效果如下：

.strong {    display: block;    color: red;    border: 1px solid yellow;    padding: 10px;    margin: 20px;    background-color: antiquewhite;    width: 150px;    height: 80px;}

3.display：inline-block

这种布局方式结合了 inline 和 block 这两种元素的特性，它与块级元素不同的是：元素不会单独占用一行；相同的是：可以使用 width 和 height，可以通过 padding、margin 和 border 来控制元素的显示位置。说白了就是除了不会单独占一行，其余的与块级元素一致。

.strong {    display: inline-block;    color: red;    border: 1px solid yellow;    padding: 10px;    margin: 20px;    background-color: antiquewhite;    width: 150px;    height: 80px;}

4.display：none

这种布局方式会隐藏元素，下面的代码隐藏了 span 标签。在第11天：说好不哭这节课程中使用了元素的显示与隐藏。

.strong {    display: none;    color: red;    border: 1px solid yellow;    padding: 10px;    margin: 20px;    background-color: antiquewhite;    width: 150px;    height: 80px;}

5.display：flex

这是一种 flexbox 布局，它是一维的。在布局内容中，会详细讲解这种布局，可以通过 Web 和移动端需要掌握的布局方式 - Flexbox 提前了解这种布局方式。

6.display：grid
这是一种网格布局，它是二维的。在布局内容中，会详细讲解这种布局，可以通过开创新时代之 grid 布局提前了解这种布局方式。

总结

本节内容讲了 display 相关属性，其中 inline、block、inline-block、none 需要重点掌握，flex 和 grid 在后续内容中会详细讲解。

今天打卡指令(任选一个)：

1.聊一聊你学前端的原因；

2.你是从哪里知道《前端小课》的；

推荐阅读：第11天：说好不哭前端小课开课啦「免费加入」

display none 隐藏后怎么显示_第12天：打破常规之 display相关推荐

display none 隐藏后怎么显示_web前端入门到实战：元素显示隐藏的9种思路
我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴 ...
display none 隐藏后怎么显示_Web 隐藏技术：几中隐藏 Web 中的元素方法及优缺点
在 Web 开发中出于多种原因,我们需要隐藏元素.例如,一个按钮应该在移动中可见,而在桌面视口中隐藏.或者,在移动设备上隐藏但要在桌面上显示的导航元素.隐藏元素时有三种不同的状态: 元素完全隐藏并从文 ...
display none 隐藏后怎么显示_display:none与visibility：hidden的区别？
" 因为平时总是觉得自己不停的修改bug,好记性不如烂笔头,所以把自己每天遇到问题记录下来." 要想知道两者的区别,就要知道他们代表的是什么意思, 其实两者都是对内容进行隐藏的的声 ...
threejs 模型隐藏后不显示_教师资格证面试报名后显示“待审核”？不做这一步报名白费！...
19下教师资格证面试报名正在进行中,小可爱们都成功报名了吗? 这两天派派为大家回答问题的时候发现很多小可爱被卡在了"待审核"这一步,今天派派就跟大家聊聊"现场审核&quo ...
[WPF疑难] 模式窗口被隐藏后重新显示时变成了非模式窗口
原文:[WPF疑难] 模式窗口被隐藏后重新显示时变成了非模式窗口 [WPF疑难] 模式窗口被隐藏后重新显示时变成了非模式窗口周银辉现象: 大家可以试试下面这个很有趣但会带来Defect的现象:当我 ...
linux输入ls后不显示_零基础学习之Linux基础命令小结
安装完重启后,没有像sery所说在图形界面崩溃了,由于我没有安装X-WINDOWS而是直接进入了文本界面.如果你想做linux管理的话,最好在文本界面下工作,这样会适应如下图: 第一行显示的是我们所安 ...
页面转发后文本显示???_使用Divi的滑动动画显示过程的进度
欢迎来到这个由6章组成的系列的第3章,它将教你如何使用Divi的新"动画"选项设计出色的页面板块.我将向你介绍如何构建实时演示页面的不同部分,以向你展示向网站添加动画的技术.动画功 ...
pb的webserver增加的方法发布后没有显示_震惊！！！Diboot 2.0.5 发布，让开发工作又快又爽...
一.前言 Diboot 2.0.5版本已于近日发布,在此次发布中,我们新增了file-starter组件,完善了iam-starter组件,对core核心进行了相关优化,让devtools也支持对IA ...
setactive隐藏之后无法显示_和平精英：玩家发现两个隐藏英文“成就”，低难度却无法完成！...
基本上每个游戏都存在成就系统,<和平精英>自然也不例外.当我们点开自己的头像,就可以发现里面有个功勋墙,功勋墙就是游戏中的成就系统.很多玩家游戏的目的不是"吃鸡",而是 ...

display none 隐藏后怎么显示_第12天：打破常规之 display

display none 隐藏后怎么显示_第12天：打破常规之 display相关推荐

最新文章

热门文章