CSS盒模型与display属性详解-优快云博客

本文链接：https://blog.youkuaiyun.com/zhengyikuangge/article/details/52247092

- 盒模型

盒模型：

可以理解为一块块的区域，比如div

display属性值：

通过设置display的属性值操作盒模型

inline：

类似于自适应,例如：span，a的默认样式

block：

类似于充满，例如：div，p的默认样式

上述两个属性的简单测试

<div style="background-color: green">我是div</div>
<span style="background-color: red">我是span</span>

inline-block:

可用于水平菜单的实现

测试代码

......

<style>
        ul{
            margin: 0;
            padding: 0;
        }
        li{
            padding: 10px 20px;
            background-color: #2292ff;
            border-right:solid 1px #2066c7;
            width:100px;
            text-align: center;
            /*下面两个属性与display的inline-block属性相比*/
            /*list-style: none;
            float: left;*/
            /**/
            display: inline-block;
        }
        a{
            color: #fff;
            text-decoration: none;
        }
    </style>

......

<ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">首页</a></li>
    <li><a href="#">首页</a></li>
    <li><a href="#">首页</a></li>
    <li><a href="#">首页</a></li>
    <li><a href="#">首页</a></li>
    <li><a href="#">首页</a></li>
</ul>

......

inline-table:

实现表单与其他内容（例如文字）位置的改变，类似于word中对图片布局的改变

测试代码


......

<style>
        table{
            display: inline-table;
            border: solid 3px #cccccc;
            /*此案例中改变的是文字的位置*/
            vertical-align: bottom;
        }
        td{
            border: solid 3px #000000;
        }
    </style>

......

<body>
文字1
<table >
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>


</table>
文字2
</body>

......

list-item

将div转化成list样式

测试代码

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