隐藏一个元素可以通过把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修改光标移动到指定位置时的显示方式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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转圈圈