CSS ?? ? ???
???? ?? ???? ??? ??? ??? ?? ?? ?? ?????? ????? ??? ?? ???? ?? ??? ???. CSS? ?? ? ?? ?? ?? html ??? ???? ??? ? ????. ??? ?? ?? ??? ??? ?? ???? ????.
????? ?? ? ???
????? ??? ??? ???? ?? ?? ??? ?????.
??
? ??? ???? ?? ? ???? ???? ?? ?? ??? ???? ? ?????. HTML? ?? ?? ??? ?? ????? ??? ???? HTML? ?? ??? ?? ?? ??? ??? ? ???? ??? ? ????. XML? ?? XML?? ??? ??? ?? ??? ???? ?? ???? ?? ??? ????? ?????.
??? ?
? none ? ??? ???? ????.
block ? ??? ? ?? ??? ? ??? ?? ?? ?? ??? ?????.
??? ???. ? ??? ?? ??? ?? ? ??? ?? ??? ??? ?????.
inline-block ??? ?? ?????. (CSS2.1? ??? ?)
list-item ? ??? ???? ?????.
run-in ? ??? ??? ?? ?? ?? ?? ?? ??? ??? ?????.
compact CSS?? Compact ?? ??? ??? ??? ???? CSS2.1??? ???????.
?? CSS?? ? ??? ??? ??? ??? ???? CSS2.1??? ???????.
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>? ??).
inherit? ?? ??? ?? ??? ??? ?? ?????. ?? ???? ?????.
?:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實例</title>
<style type="text/css">
.inline{display:inline; width:100px; height:100px; padding:5px; background-color:#F00;}
.block{display:block; width:100px; height:100px; padding:5px;background-color:#0f0;}
.inline-block{display:inline-block; width:100px;height:100px; padding:5px;background-color:#00f;}
</style>
<body>
<span class="inline">
inline
</span>inline
<span class="block">
block
</span> block
<span class="inline-block">
inline-block
</span>inline-block
</body>
</html>??? ?? ? ???
??? ??? ??? ???? ??? ?????. ?????.
?: ??? ?? ??? ??? ??? ?????. ??? ??? ???? ?? ??? ?? ??? ???? "display" ??? ?????.
??
??? ?? ??? ?? ??? ???? ??? ???? ?????. ?? ??? ??? ?? ??? ????? ??? ??? ?? ? ??? ?????. ? ??? ??? ?????? ??? ?? ???? ?? ????? ?????.
??? ?
???????????????????????????????????????????????????????? ??????. ??? ?????.
??? ??? ??? ????.
collapse ??? ???? ? ?? ???? ??? ?? ??? ? ??? ??? ?????? ??? ?? ????. ??? ?? ???? ??? ?? ???? ??? ? ????. ? ?? ?? ??? ???? "??"?? ??????.
inherit? ??? ??? ?? ?? ???? ????? ?? ?????.
?:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實例</title>
<style type="text/css">
.visibilityHidden { visibility: hidden; }
.visibilityVisible { visibility: visible; }
</style>
<body>
<!-- 注意第一個圖片雖然隱藏了，但是位置還是被占據(jù)的 -->
<p>
<a href="#" class="visibilityHidden">
<img src="http://img.educity.cn/article_image/2013082620/321090200502.jpg" />
</a>
</p>
<p>
<a href="#" class="visibilityHidden">
<img class="visibilityVisible" src="http://img.educity.cn/article_image/2013082620/321090200502.jpg" />
</a>
</p>
</body>
</html>CSS ?? - ?? ? ??? ??
?? ??? ?? ??? ???? ??? ???? ?? ?????.
?? ??? ?:
<h1>
<p>
<div>
??? ??? ??? ??? ???? ? ??? ??? ???? ????.
??? ??? ?:
<span>
<a>
??? ???? ?? ??
??? ??? ?? ??? ????? ? ??? ???? ???? ?? ???? ?????? ??? ? ??? ????? ? ? ????.
?? ???? ?? ??? ??? ??? ?????.
li {display:inline;}
?? ???? ?? ??? ?? ??? ?????.
span {display:block;}
??: ??? ?? ??? ???? ??? ???? ??? ??? ??? ?????. ?? ??, display:block?? ??? ??? ??? ? ?? ??? ?? ??? ?? ? ????.
