盒相关样式

最新推荐文章于 2022-05-19 18:58:04 发布

weixin_30319097

最新推荐文章于 2022-05-19 18:58:04 发布

阅读量49

点赞数

原文链接：http://www.cnblogs.com/flxy-1028/p/6056919.html

版权

---恢复内容开始---

1.block: 块元素，不用多说

2.inline-block: 行内块元素，这也没有太多说，主意一点就好，几个行内块元素正常写在一起时，他们中间是有会间距；消除方法很多种，主要有2种：1.不换行写在一起，中间不能有空格；

　　　　　　　2.正常写代码，但两元素间的空白部分用注释清掉；　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
     ul,li,div{
         padding:0;
         margin:0;
     }
        li{
            display:inline-block;
            width:60px;
            border: 1px solid red;
            background: lightblue;
            height: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
<div>
    <ul class="a1">
        <li>11</li><!--
        --><li>12</li><!--
        --><li>13</li>
    </ul>
    <hr>
    <ul class="a2">
        <li>21</li><li>22</li><li>23</li>
    </ul>
    <hr>
    <ul class="a3">
        <li>31</li>
        <li>32</li>
        <li>33</li>
    </ul>
</div>
</body>
</html>

3. inline: 行内元素，这也没有什么说的；

4. table: table的默认样式就是table;

5. inline-table: inline-table 会使其变成一个类似行内块元素；

4.5如下看：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    table{
        /*display: inline-table;*/
        border:1px solid red;
        border-collapse:collapse
    }
    td{
        padding:5px 20px;
        border:1px solid red;

    }

    </style>
</head>
<body>
<div>
    你来了吗
    <table>
        <tr><td>q</td><td>w</td><td>e</td></tr>
        <tr><td>q</td><td>w</td><td>e</td></tr>
        <tr><td>q</td><td>w</td><td>e</td></tr>
    </table>
    你来了吗
</div>
</body>
</html>

为inline-table时：为table时：

6. list-item : 这个其实就是ul,li的默认样式，其它元素写了这个当然也有一样的效果；以上都一样，也就是说一个div也可以写成其它任何元素的样子，把其它元素的默认样式照着抄过来用就行了如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            display: list-item;
            list-style-type: circle;
            margin-left:30px;
        }
    </style>
</head>
<body>
<div>safdasdf</div>
<div>sfasdfasd</div>
<div>sadfasdfas</div>
<div>fang   .....</div>
</body>
</html>

7. run-in 和 compact 类型：将一个元素指定为run-in类型或compact类型时，注意：如果元素后面还有block类型的元素。run-in类型的元素将被包含在后面的block类型的元素内部，而 compact类型的元素将被放置在block类型的元素左边；这个基本可以不用记，兼容性是个大问题。

转载于:https://www.cnblogs.com/flxy-1028/p/6056919.html