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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。