Web应用界面(display)

查看应用界面案例
源码下载

上节课的命令按钮是竖直排列，本节课通过把它设置为水平排列来学习display属性，深入了解行内元素、块元素和行内块元素。块元素的特点是独占一行，并且自动产生换行，多个行内元素可以排列在一行，只有一行无法容纳内容，溢出的时候才会换行。行内元素有一个特点，无法使用CSS样式设置高度和宽度，比如超链接a标签插入style="width: 100px"，是无效的，行内元素的面积大小取决于里面填充的内容，比如文字、图片等。

通过上面叙述可以知道，使用块元素div、p等标签会自动换行，无法实现把上一节课竖着排列的命令按钮占据一行横着排列；如果使用行内元素span等标签，无法定义按钮命令的宽度、高度。

除了行内元素、块元素之外还有行内块元素，行内块元素的特点是，和行内元素一样，不会独占一行，多个行内块元素可以在一行排列，同时行内块元素和块元素一样可以通过style 设置行内块元素的宽高度。行内块元素同时具有块元素、行内元素的一部分特点，这也正是行内块元素名字的来源。

行内元素、块元素、行内块元素都具有样式属性display，行内元素display的属性值是inline，块元素的属性值是block，行内块元素的属性值是inline-block。换种方式思考，所有的元素都有display属性，只是不同的元素浏览器根据他的功能默认了一个display属性值，比如p标签代表一段话，段与段之间是换行的，所以p元素默认块元素也就是display属性值默认是block，strong是强调一个关键词，没必要换行，所以strong是行内元素。div默认display属性值是block，可以通过重新赋值display为inline-block，把块元素变为行内元素。

display属性值

display的值比较多，下面只列出了一部分。

inline	行内元素
block	块元素
inline-block	行内块元素
none	元素不显示
table-row	定义一个元素类似表格的行tr
table-cell	定义一个元素类似表格的单元td、th

通过display模仿table元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .table-row{    /*第二层div设置display值为table-row;*/
            display: table-row;
        }
        .table-cell{      /*第三层div设置display值为table-cell;*/
            display: table-cell;
            background-color: #777777;
            border: 1px solid white;
        }
    </style>
</head>
<body>
<div>
    <div class="table-row">
        <div class="table-cell">你好</div>
        <div class="table-cell">出门左拐</div>
        <div class="table-cell">不送</div>
    </div>
    <div class="table-row">
        <div class="table-cell">你好</div>
        <div class="table-cell">道长</div>
        <div class="table-cell">全真认证</div>
    </div>
    <div class="table-row">
        <div class="table-cell">WebGL</div>
        <div class="table-cell">three.js</div>
        <div class="table-cell">WebVR</div>
    </div>
</div>
</body>
</html>

table、tr、td标签可以构建一个表格，表格的特点是，table相当于块元素，tr的效果是独占一行，td的特点是定义一个单元格，但是一列单元格的宽度是一样的，宽度取决于内容最多的td。上面的代码就是通过把div的display的值设为table-row模仿tr，值设为table-cell模仿td。div元素本身默认块元素，可以直接替换table。

通过上面的代码也可以发现，复杂的嵌套元素表格table、列表ul都可以通过简单的元素模仿，之所以单独设置table等复合嵌套元素，就是为了满足网页设计中常用到的情况，没必要每次自定义 display。