元素类型

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>

在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值