display基本属性
display:none 将元素与其子元素从普通文档流中移除。这时文档的渲染就像元素从来没有存在过一样，也就是说它所占据的空间消失了。元素的内容也会消失。
visibility:hidden 隐藏元素而不更改文档的布局，相当于此元素变成透明。要注意若将其子元素设为 visibility: visible，则该子元素依然可见。
visibility: collapse 用于 < table > 行、列、列组和行组，隐藏表格的行或列，并且不占用任何空间（与将 display: none 用于表格的行/列上的效果相 当）。但是，仍会计算其他行和列的大小，就好像折叠的行或列中的单元格一样。此值允许从表中快速删除行或列，而不强制重新计算整个表的宽度和高度。
display:inline 内联元素
-
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化；
-
inline元素设置width、height属性无效；同时text-align属性设置也无效，但是设置了line-height会让inline元素居中.
-
inline元素的margin和padding属性，水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果；但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom不会产生边距效果。
-
常见的内联元素有
<a>、<span>、<br>、<i>、<em>、<strong>、
<label>、<q>、<var>、<cite>、<code>
display:block 块级元素
- block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度
- block元素可以设置margin和padding属性/width、height属性
- 块级元素在设置宽度的情况下，是通过自定义margin-right来自动填满一行，这个时候你设置margin-right是无效的（设置了width，通过margin填充一行）；块级元素在没有设置宽度的时候，margin-right会生效，块级元素的width通过自定义在自动填满一行（未设置了width，通过margin填充一行）
- 设置块级元素高度时注意：a) 默认值为0； b)由元素内部的文档流中的元素的高度的总和决定的（里面元素的height+padding+margin有合并的可能），当元素脱离文档流时，不能用于父元素高度的计算；c) 当块级元素里面是文字时，文字只有一行，高度由line-height决定
在设计的过程中有时需要设计一个div宽高都是整个屏幕
整个时候宽度很好设置，可是高度一般很难设置
因为页面一般都是可以滚动的，所以高度一般可变
所以这个时候可以使用
html{
height: 100%;
}
body{
height: 100%;
padding: 0;
margin:0;
}
.main{
background: red;
width: 100%;
height: 100%;
}
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="main">
</div>
</body>
</html>
div继承的是父元素body的高度
body是继承html的高度
html是继承的浏览器屏幕的高度。
常见的块级元素
<div> <p> <h1> <form> <ul> <li>
display:inline-block 行内块元素
- 将对象呈现为inline对象，但是对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内
- width、height、margin、padding设置都会生效。
display:list-item 列表显示
- 要完全模仿列表的话还需要加上 list-style-position，list-style-type
其他表格属性
上一篇： 12本最具影响力的程序员书籍（上）