display：table的用法

VC之TAB控件

VC中使用TAB Control控件

假如我现在有个SDI程序，View是Form View，想在上面放个Tab Control，包含两个Page。现在让我们来看看应该怎样处理。

首先当然要增加一个Tab Control资源，然后利用Class Wizard，在View中增加一个Control变量。

接着建立两个对话框资源，别忘了把Style改为Child，Border改为None。然后就可以在上面加其他控件了。

接着利用Class Wizard，分别为这两个对话框建立两个类，比如CPage1和CPage2。

然后在View类头文件中，加入这两个对话框对象。同时增加一个变量int m_CurSelTab，用了表明是哪个Page即将被切换。

为了避免用户在切换Tab时，程序对Tab Index的枚举，可以利用数组来做这个事情。

在View的初始化函数中需要把CPage1、CPage2和Tab Control关联起来，并保存页面地址，设置初始页面，等等。

void CTab_testView::OnInitialUpdate()

{

CFormView::OnInitialUpdate();

GetParent()->RecalcLayout();

ResizeParentToFit();

//为Tab Control增加两个页面

m_tab.InsertItem(0, _T("First"));

m_tab.InsertItem(1, _T("Second"));

//创建两个对话框

m_page1.Create(IDD_DIALOG1, &m_tab);

m_page2.Create(IDD_DIALOG2, &m_tab);

//设定在Tab内显示的范围

CRect rc;

基于display：table的CSS布局让HTML元素和像table⼀样

当IE8发布时，它将⽀持很多新的CSS display属性值，包括与表格相关的属性值：table、table-row和table-cell，它也是最后

⼀款⽀持这些属性值的主流浏览器。它标志着复杂CSS布局技术的结束，同时也给了HTML表格布局致命⼀击。最终，使⽤CSS布局来制作出类似于table布局的栅格将会变得⼗分迅速和简单。

⽹页元素应⽤上那些与表格相关的display属性值后，能够模仿出与表格相同的特性。我将会在该⽂中给⼤家演⽰这种⽅法给CSS布局带来的巨⼤影响。

使⽤CSS表格 CSS表格能够解决所有那些我们在使⽤绝对定位和浮动定位进⾏多列布局时所遇到的问题。例如，“display:table;”的CSS声明

能够让⼀个HTML元素和它的⼦节点像table元素⼀样。使⽤基于表格的CSS布局，使我们能够轻松定义⼀个单元格的边界、

背景等样式，⽽不会产⽣因为使⽤了table那样的制表标签所导致的语义化问题。

在深⼊了解这种⽅法之前，让我们先来写份HTML⽂档实例：

复制代码

代码如下:

这份HTML源代码满⾜了内容呈现⽅⾯的要求。先是导航栏，然后是附加栏，最后是内容栏。

我们同样需要将以下CSS样式应⽤上去：

复制代码

代码如下:

#main {

display: table;

border-collapse: collapse;

}

#nav {

display: table-cell;

width: 180px;

background-color: #e7dbcd;

}

#extras {

display: table-cell;

width: 180px;

padding-left: 10px;

border-right: 1px dotted #d7ad7b;

}

#content {

display: table-cell;

详解CSS中的display属性

前⾔

display在⽹页的设计中经常⽤到，对页⾯的布局和尺⼨等内容有着很⼤影响，常⽤的主要有none、block、inline(默认值)、inline-block等⼏个属性，本⽂详细介绍关于display的各种属性。1.定义

display属性⽤于规定元素⽣成的框类型，影响显⽰⽅式

值：none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group |table-row | table-colume-group | table-colume | table-cell | table-caption | inherit

初始值：inline

继承性：⽆

【注意】IE7-浏览器不⽀持table类属性值和inherit2.分类

【1】block

【特征】

【1】不设置宽度时，宽度为⽗元素宽度

【2】独占⼀⾏

【3】⽀持宽⾼

【标签】

【1】vertical-align

【2】inline

【特征】

【1】内容撑开宽度

【2】并⾮独占⼀⾏

【3】不⽀持宽⾼

【4】代码换⾏被解析成空格

【标签】 【不⽀持的样式】

【1】background-position

【2】clear

【3】clip

【4】height | max-height | min-height

【5】width | max-width | min-width

【6】overflow

【7】text-align 【8】text-indent

【9】text-overflow3.inline-block

【特征】

【1】不设置宽度时，内容撑开宽度

【2】⾮独占⼀⾏

【3】⽀持宽⾼

【4】代码换⾏解析成空格

一、display:table-cell属性简述

display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性

的，但是IE6/7只能对你说sorry了，这一事实也是大大制约了display:table-cell属性在实际项目中的应用。

我们都知道，单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，所以display:table-cell还是有不少潜在的使用价

值的，虽说IE6/7不支持此属性，但是幸运的是，IE6/7一些乱糟糟的属性与渲染，我们可以其他方法实现同样或是类似的效果。

与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float,

position:absolute，所以，在使用display:table-cell与float:left或是position:absolute

属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱

脱的一个td标签元素了。

二、display:table-cell与大小不固定元素的垂直居中

使用display:table-cell让大小不固定元素垂直居中已经是很老的方法了，关于此应用，我已经在“大小不固定的图片、多行文字的水平垂直居中”这篇文章中有过介绍。

方便阅读，这里再次展示下代码：

/*这里的大小是根据高宽上限128像素图片设置的*/

div{display:table-cell; width:1em; height:1em; border:1px solid #beceeb;

font-size:144px; text-align:center; vertical-align:middle;}

div img{vertical-align:middle;}