目录
一、Display
元素的默认display值是block或inline。
block
block层级的元素总是新起一行，占全宽度。下面的元素默认为block：
<div>
<h1> – <h6>
<p>
<form>
<header>
<footer>
<section>
如果不想让block元素占据全宽度，可以使用width属性设置宽度，同时，如果想让内容适应不同大小的屏幕，使用max-width。
inline
inline元素不新起一行，而且只占用需要的宽度。inline元素有：<span>、<a>、<img>
可以重写元素的display默认值来获得特殊效果。
inline-block
inline-block元素和inline元素差不多，但是它可以设置固定的高宽。
none
如果元素的display的属性值为none，那么这个元素将不会显示。<script>元素的display值就是none。这经常被用来控制一个元素的显示的隐藏（使用JavaScript）：
document.getElementById("mask").style.display ='none';
display:none or visibility:hidden?
display:none是隐藏一个元素，像是这个元素不存在一样。而visibility:hidden只是使元素不可见，元素仍然占据原有的空间。
二、Position
有四种值（默认为static）：
static relative fixed absolute
static
position属性为static的元素的位置没有特殊效果。
relative
相对定位。这里的relative是指相对于正常的位置进行定位。可以设置top，right，bottom和left来偏移位置。
fixed
固定定位。相对于浏览器窗口来说是固定的，无论你怎么缩放窗口大小，或是滚动内容。可以设置top，right，bottom和left来偏移位置。
absolute
绝对定位。相对于最近的父元素（position值为static的元素除外）进行定位。可以设置top，right，bottom和left来偏移位置。
z-index
z-index属性用来指定一个元素在z轴上的位置，利用这个属性可以实现元素的重叠。如果不指定，在HTML文件里，代码位置靠后的元素会在上面。主要使用场景有： 1. 在图片上添加一个按钮，这时把按钮的z-index设置比图片大，就可以点击到按钮而不是图片。 2. 在图片上显示文字，只要把图片的z-index设为-1就可以了。
三、Overflow
Overflow用来定义当元素的内容超过限定的范围后的显示方式。有四种值：
visible
默认值。超出的内容仍然显示。
hidden
超出的内容将被隐藏。
scroll
添加一个滑动条。（将同时添加水平方向和竖直方向的滚动条，即使不需要。）
auto
类似于scroll，不过只在需要的时候添加滑动条。
overflow-x overflow-y
这两个值用来分别定义两个方向的overflow值。
div {
overflow-x: hidden; /* 隐藏超出内容 */
overflow-y: scroll; /* 添加垂直滑动条 */
}
四、Float
float用来设置元素的滚动，像这样float: left;。一般的用法有：让文字包裹图片；制作navbar，让li元素向左浮动。
浮动的元素下面的元素会包裹住浮动的元素，这时可以用clear用来控制元素的滚动，下面这行让左边的元素不滚动：
div {
clear: left;
}
五、Align
- 水平居中：使用
margin: auto;（在IE8里需要声明!DOCTYPE）。这时要给元素限定宽度，比如width: 50%;，限定的宽度之外的空间会被一分为二。 - 垂直居中：使用padding属性可以让元素在父容器里垂直居中
padding: 50px 0;。 - 文本居中：
text-align: center;。 -
图片居中：
display: block; margin: auto;
-
居左或右：使用float。
-
水平+垂直居中：使用padding加上
text-align: center;。或是使用position和transform：
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}