html5display属性,Web应用界面(display)

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元素

.table-cell{/*第三层div设置display值为table-cell;*/display:table-cell;background-color:#777777;border:1px solid white;}

你好

出门左拐