一聚教程网:一个值得你收藏的教程网站

热门教程

浅析CSS3 盒模型的display教程

时间:2022-06-25 13:41:46 编辑:袖梨 来源:一聚教程网

默认的div和span表现形式:

 代码如下 复制代码



   
    block and inline elements
   


   
div元素1

   
div元素2

    span元素1
    span元素2



利用dispaly修改,分别在上述的div和span样式中添加如下规则:

//div中添加
display:inline;
//span中添加
display:block;


那display的取值只有这两个吗?那就错了。display的不同取值,就表现出不同的盒类型。

1、inline-block类型:属于block盒类型,但显示时具有inline类盒型的特点。并列显示默认的对齐方式是底部对齐,可以用vertical-align修改。

利用inline-block制作水平菜单

 代码如下 复制代码





   



PS:inline-block和inline是有区别的,前者仍属于block,所以有高宽的属性,而后者没有。

2、inline-table类型:是一种表格相关类型,IE 8+及其它主浏浏览器均支持。更多表格相关类型见后文。

首先,看一个未使用inline-table的示例

 代码如下 复制代码





淡忘~浅思

   
       
   
   
       
   
   
       
   
ABCD
EFGH
IJKL

你好

如果要做成文字环绕表格的效果,就可以使用inline-table了,修改table的样式

 代码如下 复制代码
table{
display:inline-table;
border:solid 3px #00ffaa;
}



文字环绕效果就出来了

表格相关类型汇总
元素     所属类型     说明
table     table     此元素会作为块级表格来显示,表格前后带有换行符。
tabel     inline-table     此元素会作为内联表格来显示,表格前后带有换行符。
tr     table-row     此元素会作为一个表格行显示
td     table-cell     此元素会作为一个表格单元格显示
th     table-cell     此元素会作为一个表格单元格显示
tbody     table-row-group     此元素会作为一个或多个行的分组来显示
thead     table-header-group     此元素会作为一个或多个行的分组来显示
tfoot     table-footer-group     此元素会作为一个或多个行的分组来显示
col     table-column     此元素会作为一个单元格列显示
colgroup     table-column-group     此元素会作为一个或多个列的分组来显示
caption     table-caption     此元素会作为一个表格标题显示

3、list-item类型:此类型可以将多个元素作为列表来显示,同时在元素的开头添加列表的标记

给示例中所有的div设定为list-item类型,用list-style-type将标记指定为空心圆

 代码如下 复制代码





   
div1

   
div2

   
div3

   
div4



4、run-in类型和compact类型:元素被指定为run-in或者compact类型的时候,如果元素后面还有block类型的元素,run-in类型的元素将被包含在block类型元素内部,而compact类型被放置在
 
block元素的左边。这两个属性并没得到普及。

5、none类型:将display的值指定为none之后,改元素将不会显示。PS:与visibility:hidden不同的是,display:none的元素将不会占据原空间,而visibility仍会占据原空间。

热门栏目