css2新增的盒模型

时间 2019-11-11

标签 css2 css 新增模型栏目 CSS 繁體版

原文原文链接

1、inline-table类型css

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

主要代码：浏览器

<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类型，就能够让表格与其余文字处于同一行中了。spa

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

　　能够在样式中显示知道表格与文字的对齐方式：htm

　　　　vertical-align:bottom/middle/top;blog

2、list-item类型ci

若是在display属性中将元素的类型设定为list-item类型，能够将多个元素做为列表来显示，同时在元素的开头加上列表的标记。it

主要代码：table

<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>