CSS中，可以使用display属性来改变元素的类型。常用的一些display属性如下表。
| 属性值 | 说明 |
| inline | 行内元素 |
| block | 块元素 |
| inline-block | 行内块元素 |
| table | 以表格形式显示 |
| table-row | 以表格行形式显示 |
| table-cell | 以表格单元格形式显示 |
| none | 隐藏元素 |
下面，我们一起看看这些属性的说明和用法
inline
行内元素一般具有以下几个特点
(1)可以与其他行内元素位于同一行。
(2)行内内部可以容纳其他行内元素，但不可以容纳块元素。
(3)无法定义height，也无法定义width。
(4)可以定义margin-left和margin-right,无法定义margin-top和margin-bottom。
block
块元素一般具有以下几个特点
(1)独占一行，排斥其他元素。
(2)块元素内部可以容纳其他块元素或行元素。
(3)可以定义width，也可以定义height。
(4)四个方向的margin都可以定义。
inline-block
inline-block是inline和block一些特点的结合。
(1)可以定义width和height。
(2)可以与其他行内元素位于同一行。
(3)HTML中，常见的inline-block元素有两个：img元素和input元素。
举例：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>inline-block属性title>
<style type="text/css">
span{
display: inline-block;
width: 60px;
height: 100px;
background-color: blue;
}
style>
<body>
<span>span>
<span>span>
<span>span>
body>
html>
根据上面的例子可以看出，inline-block可以在同一行，同时可以定义宽和高。不过每个元素中间有一个空格，这对布局有很大的影响，需要消除这些空格。
可以在父元素中使用“font-size:0”来去除inline-block元素的间距。上面的例子中，元素的父元素是body，就需要在元素中定义。
body{
font-size: 0;
}
none
可以用“display:none”隐藏元素。对“display:none”，需要注意以下两点。
(1)“display:none”一般用于JavaScript动态隐藏元素，被隐藏的元素不占据原来的位置空间。
(2)“display:none”不推荐用来隐藏一些对SEO关键的部分。因为对于搜索引擎来说，它会直接忽略“display:none”隐藏的内容，不把“display:none”隐藏的内容加入权重考虑。
第二点在后面将会详细介绍。
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>none属性title>
<style type="text/css">
div{
display: inline-block;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
border: 1px solid red;
font-size: 33px;
}
style>
<body>
<div id="one">刘德华div>
<div id="two">张学友div>
<div id="three">郭富城div>
<div id="four">黎明div>
body>
html>
如果给第二个元素添加"display:none; "
在CSS中，如果想要隐藏某一个元素，不仅可以使用“display:none”也能用“visibility:hidden”来实现， 不过这两个有一些区别。
(1)“display:none”的元素被隐藏之后，不占据原来的位置。
(2)“visibility:hidden”的元素被隐藏之后，依然占据原来的位置。
对上面的第二个例子使用“visibility:hidden”。
#two{
visibility: hidden;
}
table-cell
table-cell可以结合table和table-row一起使用。
display:table-cell可以实现以下三种功能。
(1)图片垂直居中于元素。
(2)等高布局。
(3)自动平均划分元素，并且在一行显示。
图片垂直居中于元素图片的水平居中可以使用“text-align:center”来实现，而图片的垂直居中效果可以使用“display:table-cell” 和“vertical-align:center”配合来实现。
语法：
父元素
{
display：table-cell;
vertical-align：middle;
}
子元素
{
vertical-align：middle;
}
举例如下：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>table-cell属性title>
<style type="text/css">
div{
display: table-cell;
width: 150px;
height: 150px;
text-align: center;
border: 1px solid red;
vertical-align: middle;
}
img{
width: 100px;
height: 100px;
vertical-align: middle;
}
style>
<body>
<div><img src="E://安妮海瑟薇.jpg" alt="" />div>
<div><img src="E://lion.png" alt="" />div>
body>
html>
同一行的单元格td元素高度是相等的。因此，table-cell元素也具备这个特点。
举例：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>table-cell属性title>
<style type="text/css">
#wrapper{
display: table-row;
}
#img-box{
display: table-cell;
width: 120px;
text-align: center;
vertical-align: middle;
border: 1px solid red;
}
#text-box{
display: table-cell;
width: 300px;
border: 1px solid red;
padding: 10px;
}
style>
<body>
<div id="wrapper">
<div id="img-box">
<img src="E://lion.png" alt="" />
div>
<div id="text-box">
<span>狮子(学名：Panthera leo；英文名：Lion)：简称狮，中国古称狻猊。是一种生存在非洲与亚洲的大型猫科动物，是现存平均体重最大的猫科动物，也是在世界上唯一一种雌雄两态的猫科动物。狮子被誉为 “百兽之王”，勇不可当，威震四方，往往象征威猛、力量和勇气。span>
div>
div>
body>
html>
在这个例子中，左右两个盒子都没有加上高度，而是由盒子内容撑开。左右两个盒子高度相等，并且高度由两者高度最大值决定。这就是自适应的等高布局。
自动平均划分元素当父元素定义“display:table”而子元素定义“display:table-cell”时，如果给父元素一定的宽度，父元素宽度就会根据子元素的个数进行自动平均划分。
举例：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>table-cell属性title>
<style type="text/css">
*{padding: 0; margin: 0;}
ul{
list-style-type: none;
display: table;
width: 300px;
}
li{
display: table-cell;
height: 60px;
line-height: 60px;
text-align: center;
color: white;
}
.one{
background-color: tomato;
}
.two{
background-color: turquoise;
}
.three{
background-color: wheat;
}
.four{
background-color: yellow;
}
style>
<body>
<ul>
<li class="one">刘德华li>
<li class="two">张学友li>
<li class="three">郭富城li>
<li class="four">黎明li>
ul>
body>
html>
自动平均划分需要根据
中的内容来进行。本节主要学习了display相关属性，最后对其总结。
inline
block
inline-block
table、table-row、table-cell
none
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
