display
Web Basics — HTML & CSS Lesson 18 2:16 English narration · English + 中文 subtitles burned in
Chapters
Transcript
You have been watching this since lesson three without a name for it.
从第 3 课起你就一直在看这件事，只是它还没有名字。
Some elements take a whole line to themselves and stretch across the page: a div, a paragraph, a heading.
有些元素会独占一整行，横向铺满页面：div、段落、标题。
Those are called block.
这些叫做块级（block）。
Others sit side by side inside a line of text, taking only the room they need: a span, a link, a strong.
另一些则并排待在一行文字里面，只占它们需要的那点宽度： span、链接、strong。
Those are inline.
这些叫做行内（inline）。
That is why wrapping a word in strong did not push it onto its own line, and wrapping it in a div would have.
这就是为什么用 strong 包住一个词，它不会被挤到单独一行， 而用 div 包住就会。
A tag's behaviour is only its default, and display can change it.
一个标签的表现只是它的默认值，而 display 可以改变它。
Labels are inline, so two of them run together on the same line, which usually looks wrong on a form.
label 是行内的，所以两个 label 会挤在同一行里， 在表单上通常看着不对。
Set display block on them and each one takes its own line, with its input underneath.
给它们设上 display: block，每一个就会独占一行， 下面跟着它自己的输入框。
That is the second task, and it is one declaration.
这就是第二道题，而它只有一条声明。
And then there is none, which does something different from the other two: it takes the element off the page entirely.
然后是 none，它做的事和前两个都不一样：它把元素整个从页面上拿掉。
Not faded, not blank — gone, and its space goes too, so the paragraphs around it close up as if it were never there.
不是变淡，也不是留白——是没有了， 连它占的空间也一起没了， 所以它上下的段落会合拢，就像它从来没存在过一样。
One caution, the same one as with comments: the element is still in the HTML, and anyone can read it.
有一个提醒，和注释那次一样： 这个元素仍然在 HTML 里，谁都能读到。
Hiding is for tidiness, never for secrecy.
隐藏是为了整洁，绝不是为了保密。
This is not a party trick — it is how most interactive pages work.
这不是什么小把戏——大多数可交互的页面就是这么做的。
A drop-down menu is on the page all along, set to none.
下拉菜单一直都在页面上，只是被设成了 none。
A read-more section is written, then hidden.
"阅读更多"的那一段是写好的，然后被隐藏起来。
When you click, a line of JavaScript flips it back to block, and it appears instantly, because it was already there.
当你点击时，一行 JavaScript 把它改回 block，它就立刻出现， 因为它本来就在那里。
Now the tasks: hide the secret message with none, then make each label take its own line with block.
现在做那两道题： 用 none 把那条秘密信息藏起来， 再用 block 让每个 label 独占一行。
Four things to take with you.
带走四点。
One: block elements take their own line and the full width.
第一：块级元素独占一行，并占满整个宽度。
Two: inline elements sit side by side in the text.
第二：行内元素在文字里并排排列。
Three: display changes which way an element behaves.
第三：display 改变一个元素的表现方式。
Four: display none removes it, and its space, from the page.
第四：display: none 把它连同它占的空间一起从页面上移除。
Now do both tasks.
现在把两道题都做一下。