1.元素类型
根据css显示分类,XHTML元素分为三种类型
块状元素、内联元素、可变元素
2.块状元素(block element)
(1)块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域,常用的块状元素包括div、dl、dt、dd、ol、ul、fieldset、(h1-h6)、p、form、hr、iframe、colgroup、col、table、tr、td等
(2)默认情况下,块状元素都会占据一行,通俗的说,两个相邻块状元素不会出现并列显示的现象,默认情况下,块状元素会按顺序自上而下排列
(3)块状元素都可以定义自己的高度和宽度
(4)块状元素一般都作为其他元素的容器,它可以容纳其他内联元素和其他块状元素。我们可以把这种容器比喻为一个盒子
3.内联元素(inline element)(或是行内元素)
(1)常见的内联元素如:a,span,i,em,strong,b等
(2)内联元素的表现形式是始终以行内诸葛进行显示
(3)内联元素没有自己的形状,不能定义它的高度和宽度,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定,它的最小内容单元也会呈现矩形形状:
(4)内联元素也会遵循和模型及本规则,如可以定义padding,border,margin,background等属性,但个别属性不能正确显示
4.可变元素
根据上下文关系确定该元素是块状元素或者内联元素
applet-java applet
button 按钮
del 删除文本
iframe -inline frame
ins 插入的文本
map 图片区块(mp)
object -object对象
script 客户端脚本
5.元素类型转换
display属性:用于定义建立布局时元素生成的显示框类型
属性值:none| inline | block | inline-block | list-item | run-in |
inline-table | table-row-group| table-header-group | table-footer-group | table-row | table-colume-group | table-colum | table-cell |
table-caption | inherit
block
说明:
类似在元素后面添加换行符,也就是说其他元素不能再其后面并列显示
特征:
不设置宽高时,宽度撑满一行
独占一行
支持宽高
当元素设置了float属性后,就相当于给该元素添加了display:block;属性
inline
说明:
在元素后面删除换行符,多个元素可以在一行内并列显示
特征:
内容撑开宽度
非独占一行
不支持宽高
代码换行解析成空格
inline-block
说明:
元素的内容以块状显示,行内的其他元素显示在同一行
特征:
不设置宽度时,内容撑开宽度
非独占一行
支持宽高
代码换行被解析成空格
none
说明:
此元素不会被显示
特征:
隐藏元素并非脱离文档流
list-item
说明:
将元素转换成列表。li的默认类型
特征:
不设置宽度时,宽度撑满一行
独占一行
支持宽高
大部分块元素display属性值默认为block,其中列表的默认值为list-item
大部分内联元素的display属性值默认为inline,其中img,input,默认为inline-block
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {margin: 0;padding: 0;}
ul li {list-style: none;}
.nav {height: 60px;background: #000;}
.nav ul {width: 960px; margin: 0 auto;overflow: hidden;}
.nav ul li {float: left;border-right: 1px #eeeeee solid;}
.nav ul li a {display: block;width: 119px;height: 60px;color: #ffffff;text-decoration: none;text-align: center;line-height: 60px;}
.nav ul li a:hover {background: #ff0000;}
.nav ul li.last {border-right: none;}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li class="last"><a href="#">首页</a></li>
</ul>
</div>
</body>
</html>