关于前端:零基础教你学前端78布局之显示属性

22次阅读

共计 2204 个字符，预计需要花费 6 分钟才能阅读完成。

从这节课开始，咱们将陆续学习一些重要的 CSS 布局属性。这一节，咱们学习显示属性。

咱们先来看一个简略的例子。当单击这个按钮时，面板就显示进去了。这里的面板由暗藏到显示，是通过 JavaScript 管制 CSS display 属性的值来实现的。

display，是管制布局最重要的 CSS 属性，它指定了一个元素是否显示，以及如何显示。每个 HTML 元素都有一个默认的显示值。元素类型不同，默认的显示值也不同，大多数元素的默认显示值是 block 或 inline。

咱们相熟的元素类型有两类：块元素与行内元素。

块级元素总是从一个新行开始，并占据可用的全副宽度，尽可能向左和向右舒展。典型的元素有这些。他们 display 的默认值为 block。

内联元素不从新的一行开始，只占用必要的宽度。典型的元素有这些。他们 display 的默认值为 inline。

咱们来试验一下。

创立 display.html 和 display-style.css 文件。

关上 display.html 文件，构建根本代码，引入内部款式。ul>li*3，增加一个无序列表，填入三个文本。div>span>a，创立三个嵌套的元素，给 a 元素定义链接和文本。

HTML
<body>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
  <div>
    <span>
      <a href="https://item.jd.com/10026529185125.html">HTML5 从入门到精通 </a>
    </span>
  </div>
</body>

在浏览器上预览成果，咱们看：三个 li 元素、div 元素默认独占一行，span 元素和 a 元素宽度为链接文本的长度。这是块元素和行内元素默认显示的基本特征。

关上 css 文件，定义选择器 ul li, div，申明款式 display: block。定义选择器 span, a，申明款式 display: inline。

CSS
ul li, div {display: block;}

span, a {display: inline;}

在浏览器里再次察看，发现每个元素的类型没有什么变动。

这里，你可能会问：难道元素类型能够扭转吗？是的，通过款式能够扭转元素的默认显示类型。

批改两组款式的 display 属性值，block 改为 inline，inline 改为 block。这样，li、div 两个块元素，span、a 两个行内元素，显示方式就会发生变化。

看一下成果：三个 li 在一行上显示，span 和 a 元素独占了一行。这里的 div 看上去还是独占一行，实际上宽度是被 span 和 a 元素撑开了。

display 款式属性，除了通过 block 和 inline 两个值，来设置元素的显示类型外，还能够通过 none 这个值来暗藏元素。咱们来看个例子。

在 body 里再增加一个 div 元素，在外面输出 emmet 命令：(div.imgbox#imgbox$>{Box $}+br+img)*3，回车，生成三个盒子。给三个 img 引入本地的图片。

HTML
  <div>
    <div class="imgbox" id="imgbox1">Box 1<br>
      <img src="./html.png">
    </div>

    <div class="imgbox" id="imgbox2">Box 2<br>
      <img src="./css.png">
    </div>

    <div class="imgbox" id="imgbox3">Box 3<br>
      <img src="js.png">
    </div>
  </div>

在款式里定义选择器 .imgbox，申明款式 float: left，text-align: center，width: 240px，border: 1px solid gray，margin: 4px，padding: 6px。

再定义选择器 .imgbox img，申明款式 width: 200px。

CSS
.imgbox {
  float: left;
  text-align: center;
  width: 240px;
  border: 1px solid gray;
  margin: 4px;
  padding: 6px;
}

.imgbox img {width: 200px;}

在浏览器里查看成果，三个盒子程度参差排列好了。接下来，咱们把第二个盒子暗藏掉。

回到款式，定义选择器 #imgbox2，申明款式 display: none。