HTML块级元素、行内元素及CSS2的display属性总结

前端开发的就业方向有哪些呢
公众号开发前端负责哪些部分
前端开发有哪些语言

一、html行内元素与块级元素

html中元素可分为两大基本类型,块级元素(block element)和内联元素(inline element)。

块级元素

元素前后带[color=Red]有[/color]换行符,此元素总是单独占据一行;
宽度缺省是它的容器的100%;
可以设置width,height属性;(注意:块级元素即使设置了宽度,仍然是独占一行的)
可以设置margin和padding;

行内元素

元素前后[color=Red]没有[/color]换行符,和其他元素都在一行上;
设置width,height无效。(可以使用css将元素变为块级元素,设置宽高,下面将详细说)
宽度就是元素内文字或图片的宽度;
行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果([color=Red]水平方向有效,竖直方向无效[/color]);
行内元素只能包含文本或者其他行内元素。

除了块级元素和行内元素外,还存在可变元素
可变元素是根据上下文语境决定该元素为块级元素或者行内元素

下面附上html中的块级元素、行内元素、可变元素
块级元素

address – 地址
   blockquote – 块引用
   center – 举中对齐块
   dir – 目录列表
   div – 常用块级容易,也是css layout的主要标签
   dl – 定义列表
   fieldset – form控制组
   form – 交互表单
   h1 – 大标题
   h2 – 副标题
   h3 – 3级标题
   h4 – 4级标题
   h5 – 5级标题
   h6 – 6级标题
   hr – 水平分隔线
   isindex – input prompt
   menu – 菜单列表
   noframes – frames可选内容,(对于不支持frame的浏览器显示此区块内容
   noscript – 可选脚本内容(对于不支持script的浏览器显示此内容)
   ol – 排序表单
   p – 段落
   pre – 格式化文本
   table – 表格
  * ul – 非排序列表
行内元素
  a – 锚点
   abbr – 缩写
   acronym – 首字
   b – 粗体(不推荐)
   br – 换行
   bdo – bidi override
   big – 大字体
   br – 换行
   cite – 引用
   code – 计算机代码(在引用源码的时候需要)
   dfn – 定义字段
   em – 强调
   font – 字体设定(不推荐)
   i – 斜体
   img – 图片
   input – 输入框
   kbd – 定义键盘文本
   label – 表格标签
   q – 短引用
   s – 中划线(不推荐)
   samp – 定义范例计算机代码
   select – 项目选择
   small – 小字体文本
   span – 常用内联容器,定义文本内区块
   strike – 中划线
   strong – 粗体强调
   sub – 下标
   sup – 上标
   textarea – 多行文本输入框
   tt – 电传文本
   u – 下划线
   var – 定义变量
可变元素
   applet – java applet
   button – 按钮
   del – 删除文本
   iframe – inline frame
   ins – 插入的文本
   map – 图片区块(map)
   object – object对象
   script – 客户端脚本
上面提到过块级元素和行内元素之间可以相互转换,转换方式是用css的display属性
display:block; / 转换为块级/
dispaly:inline; / 转换为行内/
display:inline-blockl /仍为行内元素,但是可以设置width、height等属性/
下面将详细讨论一下css的display属性。

二、CSS2 display属性

定义:
display属性规定元素应该生成的框的类型(即用于定义建立布局时元素生成的显示框类型)。
用法:
JavaScript用法:object.style.display=”inline”;
css用法: 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”。

下面对每个值进行详解:

1.none 此元素不会被显示

与visibility属性的hidden值不同,它[color=Red]不会[/color]为被隐藏的对象保留其物理空间。
示例:
代码片段 1

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
        <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
        <title>css display详解</title>
        <style type=”text/css”>
            .divStyle {
                width: 400px;
                height: 400px;
                border: #000 solid;
                margin: 10px 10px;
                display: none;
            }
        </style>
    </head>
    <body>
        <div class=”divStyle”>I</div>
        <div class=”divStyle”>LOVE</div>
        <div class=”divStyle”>U</div>
    </body>
</html>

2. block 此元素将显示为块级元素,此元素前后会带有换行符

示例:
代码片段 2

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
        <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
        <title>css display详解</title>
        <style type=”text/css”>
            .divStyle {
                width: 400px;
                height: 400px;
                border: #000 solid;
                margin: 10px 10px;
                display: block;
            }
        </style>
    </head>
    <body>
        <a class=”divStyle”>I</a> <a class=”divStyle”>LOVE</a>
        <a class=”divStyle”>U</a>
    </body>
</html>

3.inline 默认。此元素会被显示为行内元素,元素前后没有换行符

在这里说一下 display:inline和float:left两者区别
display:inline;表示[color=Red]内联[/color](行内元素)。display是指显示状态。
float:left;左浮动,它使得指定元素脱离普通的文档流而产生的特别的布局特性,是针对[color=Red]块级[/color]元素的浮动形式(即float必须应用在块级元素之上,也就是说浮动并不应用于内联(行内)标签)
示例:
代码片段 3

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
        <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
        <title>css display详解</title>
        <style type=”text/css”>
            .divStyle {
                width: 400px;
                height: 400px;
                border: #000 solid;
                margin: 10px 10px;
                display: inline;
                </p><p>
            }
        </style>
    </head>
    <body>
        <div class=”divStyle”>I</div>
        <div class=”divStyle”>LOVE</div>
        <div class=”divStyle”>U</div>
    </body>
</html>

由此例我们可以看出,对行内元素设置宽高是没有作用的,它以元素内内容的宽高做宽高。
现在,我们试一试给它加padding和margin有没有用:
代码片段 4

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
        <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
        <title>css display详解</title>
        <style type=”text/css”>
            .divStyle {
                width: 400px;
                height: 400px;
                display: inline;
                border: #000 solid;
                margin: 10px 10px;
                margin-left: 100px;
                margin-right: 100px;
                margin-top: 100px;
                margin-bottom: 100px;
                padding-left: 100px;
                padding-right: 100px;
                padding-top: 100px;
                padding-bottom: 100px;
            }
        </style>
    </head>
    <body>
        <div class=”divStyle”>I</div>
        <div class=”divStyle”>LOVE</div>
        <div class=”divStyle”>U</div>
    </body>
</html>

查看效果,我们发现左右的margin和padding都产生了边距效果,但上下margin和padding却不影响布局。验证了前面说的~o(^▽^)o~

4.inline-block 行内块元素。将对象呈现为inline对象,但是对象的内容作为block对象呈现。

比如:我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。
示例:
代码片段 5

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
        <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
        <title>css display详解</title>
        <style type=”text/css”>
            .divStyle {
                width: 400px;
                height: 400px;
                border: #000 solid;
                margin: 10px 10px;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <a class=”divStyle”>I</a> <a class=”divStyle”>LOVE</a>
        <a class=”divStyle”>U</a>
    </body>
</html>

与上例不同的是,每个<a>标签不仅具有了宽高,同时还呈现inline在一行显示,一行显示不完才到下一行。这就是inline-block的特别之处~

5.list-item 此元素将会作为列表显示

示例:
代码片段 6

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
        <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
        <title>css display详解</title>
        <style type=”text/css”>
            .divStyle {
                width: 400px;
                height: 400px;
                border: #000 solid;
                margin: 10px 10px;
                display: list-item;
            }
        </style>
    </head>
    <body>
        <a class=”divStyle”>I</a> <a class=”divStyle”>LOVE</a>
        <a class=”divStyle”>U</a>
    </body>
</html>

6.run-in 此元素会根据上下文作为块级元素或行内元素显示

原文定义:
[i] 1.If the run-in box contains a block box, the run-in box becomes a block box.
2.If a sibling block box (that does not float and is not absolutely positioned) follows the run-in box, the run-in box becomes the first inline box of the block box. A run-in cannot run in to a block that already starts with a run-in or that itself is a run-in.
3.Otherwise, the run-in box becomes a block box.[/i]
翻译成中文:
1.如果 run-in box 包含 block box,那么这个 run-in box 也成为 block box
2.如果紧跟在 run-in box 之后的兄弟节点是 block box,那么这个 run-in box 就会做为此 block box 里的 inline box,run-in box 不能进入一个已经以 run-in box 开头的块内,也不能进入本身就是 display:run-in; 的块内
3.否则,run-in box 成为 block box

示例1:一个run-in box包含block box
代码片段 7

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
        <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
        <title>css display详解</title>
        <style type=”text/css”>
            .divStyle {
                width: 400px;
                height: 400px;
                border: #000 solid;
                margin: 10px 10px;
            }
            .divStyle1 {
                width: 200px;
                height: 200px;
                border: #000 solid;
                margin: 10px 10px;
            }
        </style>
    </head>
    <body>
        <div class=”divStyle” style=”display:run-in”>
            <div class=”divStyle1″ style=”display:block;”></div>
        </div>
    </body>
</html>

示例2:run-in box 之后的兄弟节点是 block box
代码片段 8

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
        <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
        <title>css display详解</title>
        <style type=”text/css”>
            .divStyle {
                width: 400px;
                height: 400px;
                border: #000 solid;
                margin: 10px 10px;
            }
        </style>
    </head>
    <body>
        <a class=”divStyle” style=”display:block”>I</a>
        <a class=”divStyle” style=”display:run-in”>LOVE</a>
        <a class=”divStyle” style=”display:block”>U</a>
    </body>
</html>

示例3:run-in box 不能进入一个已经以 run-in box 开头的块内,也不能进入本身就是 display:run-in; 的块内
代码片段 9

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
        <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
        <title>css display详解</title>
        <style type=”text/css”>
            .divStyle {
                width: 400px;
                height: 400px;
                border: #000 solid;
                margin: 10px 10px;
            }
            .divStyle1 {
                width: 200px;
                height: 200px;
                border: #000 solid;
                margin: 10px 10px;
            }
        </style>
    </head>
    <body>
        <div class=”divStyle” style=”display:run-in;”></div>
        <div class=”divStyle1″ style=”display:run-in;”></div>
    </body>
</html>

7.compact CSS中有值compact,不过由于缺乏广泛支持,已经从CSS2.1中删除。

故在此不进行讨论。

8.marker CSS中有值marker,不过由于缺乏广泛支持,已经从CSS2.1中删除。

故在此不进行讨论。

下面对和table有关值进行统一讲解(部分内容摘自:基于display:table的CSS布局让HTML元素和像table一样
9.table 此元素会作为块级表格来显示(类似<table>),表格前后带有换行符。
10.inline-table 此元素会作为内联表格来显示(类似<table>),表格前后没有换行符
11.table-row-group 此元素会作为一个或多个行的分组来显示(类似<tbody>)
12.table-header-group 此元素会作为一个或多个行的分组来显示(类似<thead>)
13.table-footer-group 此元素会作为一个或多个行的分组来显示(类似<tfoot>)
14.table-row 此元素会作为一个表格行显示(类似<tr>)
15.table-column-group 此元素会作为一个或多个列的分组来显示(类似<colgroup>)
16.table-column 此元素会作为一个单元格列显示(类似<col>)
17.table-cell 此元素会作为一个表格单元格显示(类似<td>和<th>)
18.table-caption 此元素会作为一个表格标题显示(类似<caption>)

CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题。
[color=Red]table元素[/color]在HTML当中是一个[color=Red]包含语义[/color]的标签:它描述什么是数据。因此,你只能用它来标记那些需要制表的数据,例如一张财务信息表。如果数据能够以电子表格的形式保存在你的电脑中,那它在HTML文档中很可能需要用到table标签进行标记。
从另一方面来看,[color=Red]display的table属性值[/color]只是声明了某些元素在浏览器中的样式——它[color=Red]不包含语义[/color]。如果使用table元素来进行布局,它将会告诉客户端:这些数据是制表的。使用一些display属性被设置为table和table-cell之类的div标签,除了告诉客户端以某种特定的样式来渲染它们以外,不会告诉客户端任何语义,只要客户端能够支持这些属性值。
使用基于表格的CSS布局,使我们能够轻松定义一个单元格的边界、背景等样式,而不会产生因为使用了table那样的制表标签所导致的语义化问题。

匿名表格元素

CSS表格除了包含table布局的普通规则之外,同时还有着CSS table布局的超强特性:缺少的表格元素会被浏览器以匿名方式创建
CSS2.1规范中写道:
CSS2.1表格模型中的元素,可能不会全部包含在除HTML之外的文档语言中。这时,那些“丢失”的元素会被模拟出来,从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table对象,使其符合table/inline-table、table-row、table-cell的三层嵌套关系。
这段话的意思是,如果我们为元素使用“display:table-cell;”属性,而不将其父容器设置为“display:table-row;”属性,浏览器会[color=Red]默认创建[/color]出一个表格行,就好像文档中真的存在一个被声明的表格行一样。
让我们用个简单的例子来研究下它的这一特性:以下是三栏栅格布局。我们将会用三份不同的HTML样例,而它们将表现出相同的视觉效果。
首先,以下是能够生成三列布局样例的其中一份:
[code]
<div class=”container”>
<div class=”row”>
<div class=”cell”>CELL A</div>
<div class=”cell”>CELL B</div>
<div class=”cell”>CELL C</div>
</div>
</div> [/code]
css样式:
[code].container {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 100px;
height: 100px;
border: 1px solid blue;
padding: 1em;
}
[/code]

运行:代码片段 10

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
        <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
        <title>css display详解</title>
        <style type=”text/css”>
            .container {
                display: table;
            }
            .row {
                display: table-row;
            }
            .cell {
                display: table-cell;
                width: 100px;
                height: 100px;
                border: 1px solid blue;
                padding: 1em;
            }
        </style>
    </head>
    <body>
        <div class=”container”>
            <div class=”row”>
                <div class=”cell”>CELL A</div>
                <div class=”cell”>CELL B</div>
                <div class=”cell”>CELL C</div>
            </div>
        </div>
    </body>
</html>

删除一个div试试
<div class=”row”>
<div class=”cell”>CELL A</div>
<div class=”cell”>CELL B</div>
<div class=”cell”>CELL C</div>
</div>
代码片段 11

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
        <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
        <title>css display详解</title>
        <style type=”text/css”>
            .container {
                display: table;
            }
            .row {
                display: table-row;
            }
            .cell {
                display: table-cell;
                width: 100px;
                height: 100px;
                border: 1px solid blue;
                padding: 1em;
            }
        </style>
    </head>
    <body>
        <div class=”row”>
            <div class=”cell”>CELL A</div>
            <div class=”cell”>CELL B</div>
            <div class=”cell”>CELL C</div>
        </div>
    </body>
</html>

再删除一个div试试
<div class=”cell”>CELL A</div>
<div class=”cell”>CELL B</div>
<div class=”cell”>CELL C</div>
代码片段 12

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
        <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
        <title>css display详解</title>
        <style type=”text/css”>
            .container {
                display: table;
            }
            .row {
                display: table-row;
            }
            .cell {
                display: table-cell;
                width: 100px;
                height: 100px;
                border: 1px solid blue;
                padding: 1em;
            }
        </style>
    </head>
    <body>
        <div class=”cell”>CELL A</div>
        <div class=”cell”>CELL B</div>
        <div class=”cell”>CELL C</div>
    </body>
</html>

以上代码遗漏了声明表格和表格行的代码,浏览器同样会创建出这些匿名的盒对象。即使缺少这些标签元素,最终的效果仍然是一样的。
如果布局中调用了匿名元素,浏览器将会根据需要创建一个匿名的盒对象并将它的CSS display属性设置为table、table-row或table-cell中的一个。
如果某个元素已经被设置为“display:table-cell;”,而它的父节点(包含它的容器)没有被设置为“display:table-row;”属性,那么浏览器将会创建一个被设置为“display:table-row;”的匿名盒对象来嵌套它。并且与之相邻的属性为“display: table-cell;”的兄弟节点也都会被这个匿名盒对象所包含,直到碰到一个没有被设置为“display: table-cell;”的元素而结束这一行。

其他有用的表格属性

当使用CSS表格时,因为这些元素遵从table布局的普通规则,所以你还可以给它们应用其它表格相关的CSS属性。下面是一些派得上用场的属性:
table-layout
将table-layout属性设置为fixed可以让浏览器按照固定算法来渲染单元格的宽度。这在[color=Red]固定宽度布局[/color]中非常有用。
Border-collapse
和普通的HTML表格一样,你可以使用border-collapse属性来定义你的table布局元素之间使用何种形式的边框,是共用边框(赋值为collapse)还是使用各自独立的边框(赋值为separate)eg.合并单元格。
Border-spacing
如果你声明了“border-collapse:separate;”,那么你就可以使用border-spacing属性来定义相邻两个单元格边框间的距离。

示例:摘自display之种种怪象

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>css display详解</title>
<style>
    body {
        font: 14px/1.5 georgia, simsun, arial;
    }
    h1 {
        margin: 10px 0;
        font-size: 20px;
        text-align: center;
    }
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .table {
        display: table;
        border-collapse: collapse;
        border: 1px solid #ccc;
        margin: 0 auto;
    }
    .table-caption {
        display: table-caption;
        margin: 0;
        padding: 0;
        font-size: 16px;
    }
    .table-column-group {
        display: table-column-group;
    }
    .table-column {
        display: table-column;
        width: 100px;
    }
    .table-row-group {
        display: table-row-group;
    }
    .table-row {
        display: table-row;
    }
    .table-row-group .table-row:hover,
    .table-footer-group .table-row:hover {
        background: #f6f6f6;
    }
    .table-cell {
        display: table-cell;
        padding: 0 5px;
        border: 1px solid #ccc;
    }
    .table-header-group {
        display: table-header-group;
        background: #eee;
        font-weight: bold;
    }
    .table-footer-group {
        display: table-footer-group;
    }
</style>
</head>
<body>
    <h1>display构造的table小例子,IE7及以下浏览器不支持本示例</h1>
    <div class=”table”>
        <h2 class=”table-caption”>花名册:</h2>
        <div class=”table-column-group”>
            <div class=”table-column”></div>
            <div class=”table-column”></div>
            <div class=”table-column”></div>
        </div>
        <div class=”table-header-group”>
            <ul class=”table-row”>
                <li class=”table-cell”>序号</li>
                <li class=”table-cell”>姓名</li>
                <li class=”table-cell”>年龄</li>
            </ul>
        </div>
        <div class=”table-footer-group”>
            <ul class=”table-row”>
                <li class=”table-cell”>footer</li>
                <li class=”table-cell”>footer</li>
                <li class=”table-cell”>footer</li>
            </ul>
        </div>
        <div class=”table-row-group”>
            <ul class=”table-row”>
                <li class=”table-cell”>1</li>
                <li class=”table-cell”>John</li>
                <li class=”table-cell”>19</li>
            </ul>
            <ul class=”table-row”>
                <li class=”table-cell”>2</li>
                <li class=”table-cell”>Mark</li>
                <li class=”table-cell”>21</li>
            </ul>
            <ul class=”table-row”>
                <li class=”table-cell”>3</li>
                <li class=”table-cell”>Kate</li>
                <li class=”table-cell”>26</li>
            </ul>
        </div>
    </div>
</body>
</html>

代码片段 13

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
        <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
        <title>css display详解</title>
        <style>
            body {
                font: 14px/1.5 georgia, simsun, arial;
            }
            h1 {
                margin: 10px 0;
                font-size: 20px;
                text-align: center;
            }
            ul {
                margin: 0;
                padding: 0;
                list-style: none;
            }
            .table {
                display: table;
                border-collapse: collapse;
                border: 1px solid #ccc;
                margin: 0 auto;
            }
            .table-caption {
                display: table-caption;
                margin: 0;
                padding: 0;
                font-size: 16px;
            }
            .table-column-group {
                display: table-column-group;
            }
            .table-column {
                display: table-column;
                width: 100px;
            }
            .table-row-group {
                display: table-row-group;
            }
            .table-row {
                display: table-row;
            }
            .table-row-group .table-row:hover,
            .table-footer-group .table-row:hover {
                background: #f6f6f6;
            }
            .table-cell {
                display: table-cell;
                padding: 0 5px;
                border: 1px solid #ccc;
            }
            .table-header-group {
                display: table-header-group;
                background: #eee;
                font-weight: bold;
            }
            .table-footer-group {
                display: table-footer-group;
            }
        </style>
    </head>
    <body>
        <h1>display构造的table小例子,IE7及以下浏览器不支持本示例</h1>
        <div class=”table”>
            <h2 class=”table-caption”>花名册:</h2>
            <div class=”table-column-group”>
                <div class=”table-column”></div>
                <div class=”table-column”></div>
                <div class=”table-column”></div>
            </div>
            <div class=”table-header-group”>
                <ul class=”table-row”>
                    <li class=”table-cell”>序号</li>
                    <li class=”table-cell”>姓名</li>
                    <li class=”table-cell”>年龄</li>
                </ul>
            </div>
            <div class=”table-footer-group”>
                <ul class=”table-row”>
                    <li class=”table-cell”>footer</li>
                    <li class=”table-cell”>footer</li>
                    <li class=”table-cell”>footer</li>
                </ul>
            </div>
            <div class=”table-row-group”>
                <ul class=”table-row”>
                    <li class=”table-cell”>1</li>
                    <li class=”table-cell”>John</li>
                    <li class=”table-cell”>19</li>
                </ul>
                <ul class=”table-row”>
                    <li class=”table-cell”>2</li>
                    <li class=”table-cell”>Mark</li>
                    <li class=”table-cell”>21</li>
                </ul>
                <ul class=”table-row”>
                    <li class=”table-cell”>3</li>
                    <li class=”table-cell”>Kate</li>
                    <li class=”table-cell”>26</li>
                </ul>
            </div>
        </div>
    </body>
</html>

:table-footer-group永远居底,同样,table-header-group永远居上。和书写顺序无关。

19.inherit 规定应该从父元素继承display的属性值。

示例:
代码片段 14

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
        <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
        <title>css display详解</title>
        <style type=”text/css”>
            .divStyle {
                width: 400px;
                height: 400px;
                border: #000 solid;
                margin: 10px 10px;
            }
            .divStyle1 {
                width: 200px;
                height: 200px;
                border: #000 solid;
                margin: 10px 10px;
            }
        </style>
    </head>
    <body>
        <div class=”divStyle” style=”display:block;”>
            <a class=”divStyle1″ style=”display:inherit;”></a>
        </div>
    </body>
</html>
it前端开发有哪些
前端开发方式有哪些
前端开发有哪些知识点
» 本文来自:前端开发者 » 《HTML块级元素、行内元素及CSS2的display属性总结》
» 本文链接地址:https://www.rokub.com/6483.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!