隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"，但是这两种方法会产生不同的结果。
display:none隐藏某个元素，且隐藏的元素不会占用任何空间，即该元素不但被隐藏了，而且原本占用的空间也会从页面布局中消失。
visibility:hidden隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间，即该元素虽然被隐藏了，但仍然会影响布局。
块元素：占用全部宽度，可设置高度和宽度，前后都是换行符，如<div>、<h1-h6>、<p>、<li>等
内联元素：只占用必要的宽度，设置高度和宽度不起作用，不强制换行，如<span>、<a>、<img>等
将块元素显示为内联元素：display:inline;例如li {display:inline;}会将列表横向显示
将内联元素显示为块元素：display:block;例如span {display:block;}会将多个span内容换行显示
使一个元素同时具有块元素和内联元素属性：display:inline-block，即可使元素具有块元素可设置长宽的属性，同时又具有内联标签不换行的属性。
position属性指定了元素的定位类型
1.static：静态定位即没有定位，按照文档流排布，静态定位的元素不会受到top、bottom、left、righ的影响
2.fixed：元素的位置相对于浏览器窗口固定，即使窗口滚动元素也不会移动
fixed定位的元素脱离文档流，不占据空间，因此可能与会其他元素重叠
例如p.pos_fixed{ position:fixed; top:30px; right:5px; }会使该段落显示在距离页面上端20px、右端5px的位置，且不随窗口滚动而滚动
3.relative：相对定位，会按照元素的原始位置对该元素进行移动，而其原本所占的空间不会变化，即如果向上移动了，其下面的元素并不会向上占据其原本的空间
例如h2.pos_right{position:relative;left:20px;}表示从元素的原始位置左侧增加20px，即向右移动20px
而h2.pos_right{position:relative;left:-20px;}表示从元素的原始位置左侧减去20px，即向左移动20px
4.absolute：绝对定位，相对于最近的已定位父元素，如果没有已定位的父元素，那么它的位置相对于<html>
absolute定位的元素脱离文档流，不占据空间，因此可能与会其他元素重叠
例如h2 { position:absolute; left:100px; top:150px; }
5.sticky：粘性定位，位置依赖于用户的滚动，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是top、right、bottom、left 之一，换言之指定top、right、bottom、left 四个阈值其中之一，才可使粘性定位生效，否则其行为与相对定位相同。
例如div.sticky {position: sticky;top: 0;background-color: #cae8ca;border: 2px solid #4CAF50;}会将div中sticky选择器的内容设置为粘性定位，在内容不超过上边距时，会随着鼠标的移动而位置上移，当移动到最上面时，则固定位置不变。
不占据空间的定位元素，即fixed和absolute定位的元素，由于可能与其他元素重合，可以通过z-index:n;表示重叠时的显示顺序，即哪个显示在前面哪个显示在后面，n为负值表示该定位元素显示在后面，正值则表示显示在前面。
如果两个定位元素重叠而没有指定z - index，那么最后定位的元素将被显示在前面。
水平&垂直对齐
1.元素居中对齐，指定margin为auto，同时需要指定width
.center { margin: auto; 50%; border: 3px solid green; padding: 10px; }
2.文本居中对齐，使用text-align:center
.center { text-align: center; border: 3px solid green; }
3.图片居中对齐，使用 margin: auto;，并将它放到块元素中
img { display: block; margin: auto; }
cursor修改光标移动到指定位置时的显示方式
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
当将光标移动到上述内容时，会按照指定的cursor方式进行显示
常用的有auto自动、default箭头、help带问号箭头、move可移动、pointer小手、progress转圈圈箭头、wait转圈圈