顯示&位置_CSS/HTML

display:block　將子物件呈現為區塊物件。很多內聯樣式的效果，需要用到display。

<style type="text/css"> #photo a img{border:3px solid #FF6600; } #photo a:hover {display:block;} /**若不加此句，则内联对象img的样式不会显示**/ #photo a:hover img{ border:2px solid blue;} </style> <div id="photo"> <a href="#"> <img src="/static/imghwm/default1.png" data-src="/logos.gif" class="lazy" style="max-width:90%" style="max-width:90%" alt="顯示&位置_CSS/HTML"></a> </div>
[Ctrl+A 全選注:如需引入外部Js要刷新才能執行]

position『的尺寸根據佈局尺寸決定物件的尺寸。

<p><style type="text/css"> #text{position:relative;} /**若没有，则内联对象不显示。若为block，会作为块级元素而使虚线过长。posigion时，长度由text的内容决定。**/ #text span{width:200px; height:20px;border-bottom: 1px dashed #000000 ; } </style> </p> <p> </p> <div id="text"> 範例文字 底線樣式 <span> </span> </div>
[Ctrl+A 全選 註:如需引入外部Js需刷新才能執行]