• 接上一篇
 
5.display
        display 属性规定元素应该生成的框的类型。      
         这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。
 
注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。
 
Js语法:object.style.display="inline"
所有主流浏览器都支持 display 属性。
注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。
 
可能的值:
  • none   此元素不会被显示
  • block   此元素将显示为块级元素,即前后都会有换行符号
  • inline  默认值,次元素被显示为内联元素,前后没有换行符
  • list-item  此元素会作为列表显示
  • run-in   此元素会根据上下文作为块级元素或者内联元素显示
  • table   此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符
  • inline-table  与table类似,只不过前后没有换行符
  • table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)
  • table-header-group 类似<thead>
  • table-footer-group  类似<tfoot>
  • table-row   此元素会作为一个表格行来显示,类似<tr>
  • table-column-group 此元素会作为一个或多个列的分组来显示,类似<colgroup>
  • table-column   此元素会作为一个单元格列来显示,类似<col>
  • table-cell   此元素会作为一个表格单元格来显示,类似<td>,<th>
  • table-caption 此元素会作为一个表格标题来显示,类似<caption>
下面这段代码,把一个段落当作内联元素
<html>
<head>
<style type="text/css">
p {display: inline}
div {display: none}
</style>
</head>

<body>
<p>本例中的样式表把段落元素设置为内联元素。</p>

<p>而 div 元素不会显示出来!</p>

<div>div 元素的内容不会显示出来!</div>
</body>
</html>
 
 
6. float
          float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
         如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
        Js语法  object.style.cssFloat="left"
 
       float一共只有四种可选值,分别为left,right,none(default)和inherit
 
       下面这段代码展示了float属性的应用
<html>
<head>
<style type="text/css">
img    
{
float:right;
border:1px dotted black;
margin:0px 0px 15px 20px;
}
</style>
</head>

<body>
<p>在下面的段落中,图像会浮动到右侧,并且添加了点状的边框。我们还为图像添加了边距,这样就可以把文本推离图像:上和右外边距是 0px,下外边距是 15px,而图像左侧的外边距是 20px。</p>
<p>
<img src="/i/eg_cute.gif" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>

</html>
 
 
7.left
         left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
注释:如果 "position" 属性的值为 "static",那么设置 "left" 属性不会产生任何效果。
          对于 static 元素,为 auto;对于长度值,则为相应的绝对长度;对于百分比数值,为指定值;否则为 auto。
          对于相对定义元素,left 的计算值始终等于 right。
         Js语法:object.style.left="100px"
 
下面测试代码展示了如何使用百分比来设置图像的左边缘
<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:10%
}
</style>
</head>
<body>

<h1>这是标题</h1>
<img class="normal" src="/i/eg_smile.gif" />
<p>一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。</p>

</body>
</html>
 
8.overflow
         overflow 属性规定当内容溢出元素框时发生的事情。
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。
        Js语法:object.style.overflow="scroll"
 
        overflow支持一下5种模式
  • visible    默认值。内容不会被修剪,会呈现在元素框之外
  • hidden   内容会被修剪,并且其余内容是不可见的
  • scroll      内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容
  • auto        如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容
  • inherit     规定应该从父元素继承 overflow 属性的值
下面的例子演示了用滚动条来显示元素内溢出的内容
<html>
<head>
<style type="text/css">
div    
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll
}
</style>
</head>

<body>
<p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。</p>

<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
</body>

</html>
 
9. position
         position 属性规定元素的定位类型。
         这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
        Js语法:object.style.position="absolute"
 
        position可选的值
  • absolute 
    生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
    元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定
  • fixed
    生成绝对定位的元素,相对于浏览器窗口进行定位。
    元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
  • relative
    生成相对定位的元素,相对于其正常位置进行定位。
    因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
  • static                                                                                                                                    默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
  • inherit
 
下面展示几个例子:
首先是相对定位
<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>

<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>

</html>
结果如下:
CSS属性汇总--(5) 定位属性2_职场
 
下面展示一个 Z-index的例子
<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
</head>

<body>
<h1>这是一个标题</h1>
<img class="x" src="/i/eg_mouse.jpg" />    
<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
</body>

</html>
结果如下:
CSS属性汇总--(5) 定位属性2_休闲_02