CSS新手入门笔记整理：元素类型相互转换

元素类型

块元素（block）	独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素。 块元素内部可以容纳其他块元素和行内元素。 可以定义 width，也可以定义 height。 可以定义 4 个方向的 margin。
行内元素（inline）	可以与其他行内元素位于同一行。 行内元素内部可以容纳其他行内元素，但不可以容纳块元素。 无法定义 height，也无法定义 width。 可以定义 margin-left 和 margin-right，无法定义 margin-top 和 margin-bottom。
行内块元素（ inline-block）	可以定义 width 和 height。 可以与其他行内元素位于同一行。
表格（table）	以表格形式显示，类似于 table 元素
表格行（table-row）	以表格行形式显示，类似于 tr 元素
表格单元格（table-cell）	以表格单元格形式显示，类似于 td 元素

元素类型转换

在 CSS 中，我们可以使用 display 属性来改变元素的类型。

语法

元素{dispiay:取值；}

属性值	说明
inline	转换为行内元素
block	转换为块元素
inline-block	转换为行内块元素
table	以表格形式显示，类似于 table 元素
table-row	以表格行形式显示，类似于 tr 元素
table-cell	以表格单元格形式显示，类似于 td 元素
none	隐藏元素

---

拓展：display:none 简介

• 在 CSS 中，我们可以使用 display:none 来隐藏一个元素，并且被隐藏的元素不再占据原来位置的空间。
• display:none 一般用来配合 JavaScript 动态隐藏元素，被隐藏的元素不占据原来位置的空间。
• display:none 不推荐用来隐藏一些对 SEO（Search Engine Optimization，搜索引擎优化）关键的部分。因为对于搜索引擎来说，它会直接忽略 display:none 隐藏的内容，不会把display:none 隐藏的内容加入权重考虑。

display:none 和 visibility:hidden 的区别

在 CSS 中，如果想要隐藏某一个元素，可以使用 display:none 或者 visibility:hidden 来实现。虽然两种方式都可以隐藏元素，但是它们之间有着本质的区别。

display:none	元素被隐藏之后，不占据原来的位置，也就是说元素“彻底地消失了，看不见也摸不着。”
visibility:hidden	元素被隐藏之后，依然占据原来的位置，也就是说元素“并没有彻底消失，看不见但摸得着”。

---

拓展：display:table-cell功能用途

图片垂直居中于元素

配合使用 display:table-cell 和 vertical-align:middle 来实现大小不固定的图片的垂直居中效果。

语法

父元素
{
 display:table-cell;
 vertical-align:middle;
}
子元素{vertical-align:middle;}

---

等高布局

语法

盒子1{display:table-cell;}
盒子2{display:table-cell;}

两个盒子都不定义高度时，大小而是由盒子的内容撑开。分别给两个元素都转换成“table-cell”，这时两个盒子高度相等，并且高度由两者高度的最大值决定。这就是 “自适应等高布局。”

---

自动平均划分元素

当有多个元素横向排列时，可以为每一个元素定义 display:table-cell，它会自动平均划分元素，并且使得它们在同一行显示。

语法

父元素{display:table;}
子元素1{display:table-cell;}
······
子元素n{display:table-cell;}

• 如果为父元素定义 display:table，为子元素定义 display:table-cell，然后为父元素定义一定的宽度，那么此时子元素的宽度就会根据子元素的个数自动平均划分。

---

拓展： 去除 inline-block 元素间距

• inline-block 元素之间会有一定的间距，这种间距有时会对布局产生影响。大多数时候为了不影响布局，需要去除 inline-block 元素的间距。
• 在 CSS 中，可以为父元素定义一个“font-size:0;”来去除 inline-block 元素的间距。

语法

父元素{font-size:0;}
子元素{display:inline-block}

---