css2新增的盒模型

一、inline-table类型

到目前为止，该类型受到了Safari、Opera、Chrome、Firefox以及IE8以上版本浏览器的支持。

主要代码：

 

<style type="text/css">

　　　　table{

　　　　　　　　border:3px solid #00aaff;

　　　　　　　}

　　　　td{

　　　　　　border:2px solid #ccff00;

　　　　　　padding:5px;

　　　　　}

　　<style>

 

<head>
    <body>
    你好
    <table>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
            <td>E</td>
        </tr>
        <tr>
            <td>F</td>
            <td>G</td>
            <td>H</td>
            <td>I</td>
            <td>J</td>
        </tr>
        <tr>
            <td>K</td>
            <td>L</td>
            <td>M</td>
            <td>N</td>
            <td>O</td>
        </tr>
    </table>
    你好
</body>
</head>

 这段代码运行时，表格前后的文字都处于不同的行中，因为table元素属于block类型，所以不能与其他文字处于同一行中，但是如果将table元素修改成inline-table类型，就可以让表格与其他文字处于同一行中了。

　　但是在各个浏览器中，对于文字与表格的垂直对齐方式并不完全相同。在Safari浏览器以及Chrome浏览器中，垂直对齐方式为底部对齐，在IE浏览器、Opera浏览器以及Firefox浏览器中，垂直对齐方式为顶部对齐。

　　可以在样式中显示知道表格与文字的对齐方式：

　　　　vertical-align:bottom/middle/top;

二、list-item类型

 

如果在display属性中将元素的类型设定为list-item类型，可以将多个元素作为列表来显示，同时在元素的开头加上列表的标记。

 

主要代码：

<style type="text/css">
    div{
        display: list-item;
        list-style-type: circle;
        margin-left: 30px;
    }
</style>
<body>
<div>示例div1</div>
<div>示例div2</div>
<div>示例div3</div>
<div>示例div4</div>
</body>

 

　　

　　

posted @ 2016-04-01 16:29  孤枫赏叶  阅读(214)  评论(0)    收藏  举报