table-cell布局

html:
    <div class='box'>
        <div class="item w-50">测试</div>
        <div class="item w-120">测试</div>
        <div class="item w-self">测试</div>
        <div class="item w-150">测试</div>
    </div>
    
    css:
    .box {
        width: 100%;
        display: table;
    }
    .item {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    .w-50 {
        width: 50px;
    }
    .w-120 {
        width: 120px;
    }
    .w-150 {
        width: 150px;
    }

 

匿名表格元素

按常规的标签关系应该是table→table-row→table-cell.

缺少的表格元素会被浏览器以匿名方式创建。

css2.1表格模型中的元素，可能不会全部包含在除HTML之外的文档语言中。这时，那些'丢失'的元素会被模拟出来，从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table对象，使其符合table/inline-table、table-row、table-cell的三层嵌套关系。

即如果我们为元素使用'display:table-cell;'属性，而不将其父容器设置为'display:table-row;'属性,浏览器会默认创建出一个表格行，就好像文档中真的存在一个被声明的表格行一样。

所以在上面的table-cell的父元素直接声明样式为display:table;

display:table-cell下连续单词字符换行问题修复bug

对于某个table-cell字符长度太长得情况下

    {
        display: table;
        width: 100%;
        table-layout: fixed; (用来显示表格单元格、行、列的算法规则)
        word-wrap: break-word;
    }

table-layout属性用来显示表格单元格、行、列的算法规则

table-layout: automatic
父元素设定以后，每个table-cell的宽度是根据自身的内容来定的，因此如果自身的内容过长的话，会导致内容不换行，而将table-cell的宽度撑开很大

table-layout: fixed
父元素设定以后，水平布局仅取决于表格的宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。因此一旦table-layout: fixed属性设定以后,table-cell的宽度就确定下来，这个时候使用word-wrap: break-word属性，即可在table-cell内部进行换行。