元素类型
块元素(block) |
|
行内元素(inline) |
|
行内块元素( inline-block) |
|
表格(table) |
|
表格行(table-row) |
|
表格单元格(table-cell) |
|
元素类型转换
在 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}