display属性
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
div{
margin: 0 0 10px;
padding: 0;
background-color: pink;
}
.a{
display: inline;
}
.b{
display: block;
}
.c{
display: none;
}
.d{
display: table;
}
.e{
display: inline-block;
}
</style>
</head>
<body>
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
<div class="e">e</div>
</body>
</html>
display:none
css3：定义此元素不会被显示。
它和visibility:hidden的区别是：
当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。
而display设置为"none"的时候，元素同样隐藏，但是原本占据的位置同样不见了。
visibility属性是隐藏元素但保持元素的浮动位置，display实际上是设置元素的浮动特征。
.c{
/*display: none;*/
visibility: hidden;
}
display：inline
变为行内元素，它会直接贴上其相邻的盒子，就和我们正常的输出流一样
它对宽高属性值不生效，完全靠内容撑开宽高。
display：inline-block
变成行内块状元素，结合的行内和块级的优点，既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。
display：block
相当于给内容前后都加入换行符，变成一个独立的块元素。
它独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽
display：table | table-cell
以表格形式展示，现在用的少了。
有个拓展用法，让多行文字垂直居中
父元素设置table，子元素设置table-cell，再加上一个vertical-align：center即可垂直居中
<div class="parent">
<p class="son">系统一词来源于英文system的音译，即若干部分相互联系、相互作用，形成的具有某些功能的整体。中国著名学者钱学森认为：系统是由相互作用相互依赖的若干组成部分结合而成的，具有特定功能的有机整体，而且这个有机整体又是它从属的更大系统的组成部分。
</p>
</div>
.parent {
display: table;
width: 300px;
height: 300px;
text-align: center;
}
.son {
display: table-cell;
background-color: pink;
vertical-align: middle;
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
