一 display属性
网页上的每个元素都是一个盒模型.display属性决定了盒模型的行为方式.block(块元素)是占用最大可用宽度的元素,前后都有换行符.
以下示例中的样式规则将内联<span>元素显示为块级元素.
html代码:
<span>改变源自爱,要么源自痛.</span>
<span>最困难的事情就是认识自己.</span>
<span>有勇气承担命运这才是英雄好汉</span>
<span>自知之明是最难得的知识</span>
css代码:
span{ display:block; }
效果如下:
原本<span>内联元素会显示在一个段落内,但是现在css样式display属性设置为了block,所以显示为块级元素.
inline元素(内联元素)只占用尽可能多的宽度,并不强制换行.
css代码:
p{ display:inline; }
设置元素的display属性只会改变元素的显示方式,而不会改变元素的类型.所以,带有display:block的内联元素不允许在其中包含其他块元素.
display:none隐藏一个元素,所以它不占用任何空间.该元素将被隐藏,在页面显示时不会展现出来,就好像该元素不存在一样.
html代码:
<h1>因为display:none,你们看不到我.</h1>
<p>有时候读书是一种巧妙地避开思考的方法</p>
css代码:
h1{display:none;}
display还有很多其他的参数值,比如list-item,table,table-cell,table-column,grid等等
二 visibility属性
visibility属性用于指定元素是可见的还是隐藏的.最常见的值是visible和hidden.
可以通过将display属性设置为"none"或者将visibility属性设置为"hidden"来隐藏元素.但是请注意,这两种方法会产生不同的结果:
visibility:hidden隐藏一个元素,但是它仍然占据与之前相同的空间.该元素将被隐藏,但仍然会影响布局.
html代码:
<h1>越是没有本领的就越是自命不凡</h1>
<div class="hidden">我被设置了visibility:hidden</div>
<p>上方div的位置变成了空行,因为div元素被设置了visibility:hidden</p>
css代码:
div.hidden{ visibility:hidden; }
display:none隐藏一个元素,不会为该元素保留一个位置.
三 css position定位
css position定位属性允许你定位一个元素.它也可以将元素放在另一个元素之后,并指定元素的内容太大时应该发生的情况.
可以使用top,bottom,left,和right属性来定位元素.但是,除非position属性有进行初始化设置参数值,这些属性才能起效果.
html元素默认为静态定位.静态定位元素总是按照页面的正常流动进行定位.(使页面在默认顺序中展示)
html代码:
<p>没有定位</p>
<p>没有定位</p>
<p>没有定位</p>
<p>没有定位</p>
<p class="position_static">我用了静态定位</p>
css代码:
p.position_static{position:static; top:30px;right:5px; color:red; }
效果如下:
静态定位元素不受top,bottom,left,right属性的影响.
position:fixed属性能使具有固定位置的元素相对于浏览器窗口被定位,并且即使窗口被滚动也不会移动.
可以使用top,bottom,left和right中的一个或多个属性来指定位置.
在下面的例子中,段落固定为top:30px,right:5px.
css代码:
p.positon_fixed{ position:fixed; top:30px; right:5px;color:red;}
效果如下:
fixed参数能把元素从正常的顺序中拉出.可以无视其他元素的定位.
设置了fixed的元素可以重叠在其他元素上.
position:relative 相对定位. 元素的定位是相对其正常位置而言.
可以使用top,right,bottom,和left的属性来指定呈现的元素将如何移动.
css代码:
p{width:350px; border:1px black solid; position:fixed; }
span{background:green; color:white; position:relative; top:150px; left:50px; }
效果如下:
relative定位的元素的内容可以移动并与其他元素重叠,但是元素的保留空间在正常流程中仍然保留
此值不能用于表格单元格,列,列组,行,行组或标题
absolute绝对定位
绝对位置元素相对于具有非静态位置的第一个父元素进行定位.如果找不到这样的元素,则针对的是<html>
绝对定位的元素将从正常流程中移除.文档和其他元素的行为像绝对定位的元素不存在
绝对定位的元素可以重叠其他元素