Display - 金鱼都能懂的CSS必学属性

display 这个属性实在是一个太重要的属性了，要在一个篇幅中讲完其实是不可能的事情，它可以说是目前金鱼都能懂的 CSS 必学属性中，排版类属性内最重要的一个属性，本文会带大家将几个最基础的值先有个观念，後续各位就能依此自行 google 了， display 的值基本上仅需填写一个值，撰写方式如同下面这样

display: block;

display 可以使用的值有非常多，简单列举一些常见的值於下

none
inline
block
inline-block
table
table-caption
table-row
table-cell
inline-table
flex
inline-flex
grid
inline-grid

Display 到底在做甚麽

display 的作用，简单的说就是改变物件的基本特性，感觉听起来似乎很难理解阿，说真的要讲完是颇辛苦的，我们用比较简单的理解方式来说好了，display 可以改变一个物件的基本特性，就如同把水变成冰块一般，水原本是软性可流动的，变成冰块後它就变成硬性不能流动了(请不要拿冰川来战)，display 有如炼金术一般，可以把一个物件的特性转换成另外一个截然不同的特性，简直就跟炼金术一样神奇无误阿！

为何要改变物件的特性

在网页当中，我们经常会为了排版的需求，导致需要因应版面来改变一个物件的基本特性，举个例子，往常我们在排多栏版面的时候会使用到 <div> 这个标签，而这个标签在display 中预设的属性是 block，因为 block 的特性所致，所以 <div> 本身在不加诸其它特殊设定前，预设是无法横排的，此时我们可以对 <div> 设定 display: inline-block; 就能让该物件呈现横排的状况了。另外一个例子则是为了垂直居中，早期有些人会在 <div> 添加 display: table-cell; 来改变该 <div> 的预设属性，让该 <div> 的特性转变成表格的储存格特性，就能使用 CSS 中的 vertical-align: middle; 来对内容作垂直居中了。

有没有简单一点的学习方式

有啊！叫旁边那个去学，你出一张嘴叫他做就好，这样的学习方式是最快的(被打！)，基本上 Amos 会把所有的属性先暂时的删除，只从最原始纯粹的两大特性去看，也就是 inline 与 block，如果想要加速了解这两个特性的话，可以看免费的「金鱼都能懂网页设计入门 : 网页两大主角」教学影片，大约 20分钟开加速看，可以有个快速的理解。此外目前大家最爱的 Flex 排版方式，需要了解的则会更多，建议也可以从 Amos 免费的教学「金鱼都能懂网页设计入门 : 排版的圣品」快速的体验，再利用免费的直播「玩转 CSS FLEX」了解详细的内容，大约两小时的直播有详细的说明 Flex 的相关属性与设定，并且可了解运用在排版上可如何使用，对 Flex 运用若有实务一点的排版需求的话，可看免费的「金鱼都能懂的网页切版教学」里头有高达33个不同版面区块的教学，实用度爆表了！

物件预设的属性是怎麽来的？

网页中每个物件都有其自身预设的属性，像是以下这样的预设属性

<div> 是 block
<p> 是 block
<h1> 是 block
<h2> 是 block
<h3> 是 block
<h4> 是 block
<h5> 是 block
<h6> 是 block
<section> 是 block
<article> 是 block

还有

<span> 是 inline
<img> 是 inline
<em> 是 inline
<strong> 是 inline
<a> 是 inline

除了以上这些简单列举的标签与属性外，其实还有「表格」类、「清单」类的属性，只是我们目前一般较常使用到的没有这麽全面就是了。标签的预设属性基本上是由 W3C这个单位制定，而浏览器遵照其制定的规范来套用，其中也有可能出现浏览器自己内建的样式制定的状况，按照现今网路世界已越来越遵照规范开发的状况下，多数浏览器主要都是依据规范为主就是了。

想要快速知道一个物件是什麽属性，最简单的方式就是打开你的 Chrome 浏览器，使用开发者工具来检查是最快的，使用方式如下：

在网页内你想要查看属性的物件上按滑鼠右键
在快显选单上选择「检查」
在出现的开发者工具中，找到「Styles」标签页
点击「Styles」右侧的「Computed」标签
在「Computed」标签的内容中往下卷动，找到「display」这个栏位
完成 (可见下图)

属性不要乱更改

display 虽然可以让我们轻松的修改物件的特性，但也不是毫无目的的随意更改，在网页的世界中，基本上是利用 HTML 对文件建构良好的语意架构，接着使用 CSS 来建构舒服且适当的视觉外观。在对一个物件设定 display 的特性时，要注意是否会影响到整个页面的物件，白话一点的说，就是你如果对一个 <div> 设定，请使用 class 或 id 来设定，切忌使用「CSS 元素选取器」来设定，这样对整个页面的影响太可观了，反倒会让你出现难以控制的状况！当然...新手如你可以尝试看看，只要痛过就会知道影响有多大了(笑)。

这个属性应该可以说是所有属性中较为复杂的了，是众多新手最容易混乱的，如果没搞懂就乱设定的话可会让版面混乱到不行阿，几个小小的免费教学影片就请金鱼们认真注意的看了，金鱼都能懂的 CSS 必学属性，我们下篇见！

「金鱼都能懂的CSS选取器」已集结成书，并於书中添加一些新篇章及细节补充，有兴趣的朋友可至天珑书局选购，感谢各位支持
购书连结 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw

让我们好好善用CSS选取器吧