CSS3中合模型
2016-07-07 00:00
295 查看
inline-block类型
使用inline-block类型可以直接将两个div元素进行并列显示,不需要使用float属性,也不需要使用clear属性了。
默认情况下使用inline- block类型时并列显示的元素的垂直对齐方式是底部对齐,为了让对齐方式改成顶部对齐,还要给DIV元素的样式中加入vertical-align属性。
使用inline-block类型来显示水平菜单
在css2.1之前,如果要实现水平菜单,那么我们需要使用float属性,大多数菜单是利用ul列表和li列表来显示的额,li元素隶属于block类型下的list-item类型,所以要并列显示的话就要使用float属性。
inline-table类型
inline-table类型时css2中新增的盒模型
list-item类型
list-item类型,可以将多个元素作为列表显示,同时元素的开头加上列表的标记
run-in类型与compact类型
表格相关类型
在CSS3中所有与表格相关的元素及其所属类型表:
none类型
当元素被指定为none类型时,元素将不被显示。
各种浏览器对各种盒模型的支持情况
使用inline-block类型可以直接将两个div元素进行并列显示,不需要使用float属性,也不需要使用clear属性了。
默认情况下使用inline- block类型时并列显示的元素的垂直对齐方式是底部对齐,为了让对齐方式改成顶部对齐,还要给DIV元素的样式中加入vertical-align属性。
使用inline-block类型来显示水平菜单
在css2.1之前,如果要实现水平菜单,那么我们需要使用float属性,大多数菜单是利用ul列表和li列表来显示的额,li元素隶属于block类型下的list-item类型,所以要并列显示的话就要使用float属性。
inline-table类型
inline-table类型时css2中新增的盒模型
list-item类型
list-item类型,可以将多个元素作为列表显示,同时元素的开头加上列表的标记
run-in类型与compact类型
表格相关类型
在CSS3中所有与表格相关的元素及其所属类型表:
元素 | 所属类型 | 说明 |
table | table | 代表整个表格 |
table | inline-table | 代表整个表格可以被指定为table类型也可以是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 | 代表整个表格的标题 |
当元素被指定为none类型时,元素将不被显示。
各种浏览器对各种盒模型的支持情况
相关文章推荐
- CSS3的多栏布局
- 【CSS3】布局样式相关--慕课网【学习总结】
- CSS3 box-reflect(倒影效果)
- iOS中默认样式修改-b
- 映纷视觉小例子
- transform2d
- css总结
- 纯CSS设计div内部元素水平垂直居中
- 格子布局
- 盒子嵌套
- HTML&CSS三列布局
- CSS3实现“圣杯布局”--(固比固布局)
- css3图片翻转功能的实现
- CSS3弹性伸缩布局盒(Flexible Box)模型
- HTML&CSS学习笔记
- CSS3学习笔记1:结构性伪类选择器
- css3学习 之 css选择器(结构性伪类选择器)
- # html+css基础学习笔记-选择器介绍
- CSS Gradient详解
- css实现图片垂直居中(兼容IE6/IE7)