css3之几种盒模型

最新推荐文章于 2024-04-18 11:06:27 发布

打不死滴小强

最新推荐文章于 2024-04-18 11:06:27 发布

阅读量1.2w

点赞数 2

分类专栏： html5/css相关文章标签： css3 几种盒模型

本文链接：https://blog.csdn.net/u012859748/article/details/52634927

版权

html5/css相关专栏收录该内容

26 篇文章 0 订阅

订阅专栏

昨晚回去花了点时间，系统的学习了一下盒模型，现总结如下。

1、盒的基本类型：
在css3中使用display属性来定义盒的类型，总体来说盒分为block类型和inline类型。
我们之前所学的div元素和p元素属于block类型，span和a属于inline类型。如：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>盒的基本类型</title>
    <style>
        /*div{background: green}*/
        /*span{background: red}*/
        div{background: green;width: 50px;height: 50px}
        .div1{display: inline-block}
        .div2{display: inline}
    </style>
</head>
<body>
<h1>盒的基本类型</h1>
<div class="div1">在css3中，使用display属性来定义盒的类型，总体来说盒分为block类型和inline类型。</div>
<div class="div2">在css3中，使用display属性来定义盒的类型，总体来说盒分为block类型和inline类型。</div>
<!--<span>在css3中使用display属性来定义盒的类型，总体来说盒分为block类型和inline类型。</span>-->
</body>
</html>

2、使用inline-block类型来显示水平菜单

在不使用inline-block类型之前，如果要实现水平菜单，那么我们需要使用float属性。如

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用inline-block类型来显示水平菜单</title>
    <style>
        ul{
            margin:0;
            padding: 0;
        }
        li{
            padding: 10px 20px;
            background-color: #ff3454;
            border-right: solid 1px #2066c7;
            width: 100px;
            text-align: center;
            list-style: none;
            float: left;
        }
        a{
            color: #fff;
            text-decoration: none;
        }
    </style>
</head>
<body>
<h1>使用inline-block类型来显示水平菜单</h1>
<ul>
    <li><a href="index1.html">首页</a> </li>
    <li><a href="index1.html">社区</a> </li>
    <li><a href="index1.html">css3教程</a> </li>
    <li><a href="index1.html">产品</a> </li>
    <li><a href="index1.html">联系我们</a> </li>
</ul>
</body>
</html>

效果；

使用inline-block之后，如

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用inline-block类型来显示水平菜单</title>
    <style>
        ul{
            margin:0;
            padding: 0;
        }
        li{
            display: inline-block;
            padding: 10px 20px;
            background-color: #ff3454;
            border-right: solid 1px #2066c7;
            width: 100px;
            text-align: center;
        }
        a{
            color: #fff;
            text-decoration: none;
        }
    </style>
</head>
<body>
<h1>使用inline-block类型来显示水平菜单</h1>
<ul>
    <li><a href="index1.html">首页</a></li><li><a href="index1.html">社区</a></li><li><a href="index1.html">css3教程</a></li><li><a href="index1.html">产品</a></li><li><a href="index1.html">联系我们</a></li>
</ul>
</body>
</html>

效果与上图一样。

3、inline-table类型，对齐方式可以使用vertical-align: top;等。

4、list-item类型，可以将多个元素作为列表来显示，同时在每个元素的开始加上列表的标记。

5、run-in类型与compact类型。

6、表格相关的类型，在CSS3中，所有与表格相关的元素及其所属类型表：

例如：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3中所有与表格相关的元素</title>
    <style>
        body{
            margin: 10px;
            padding: 10px;
        }
        div.table{
            display: table;
            border: solid 5px #ccc;
        }
        div.table-caption{
            display: table-caption;
        }
        div.thead{
            display: table-header-group;
        }
        div.tr{
            display: table-row;
        }
        div.td{
            display: table-cell;
            border: solid 3px #898989;
            padding: 5px;
        }
    </style>
</head>
<body>
<h1>CSS3中所有与表格相关的元素</h1>
<div class="table">
    <div class="table-caption">表格的标题</div>
    <div class="thead">
        <div class="tr">
            <div class="td">1</div>
            <div class="td">2</div>
            <div class="td">3</div>
        </div>
        <div class="tr">
            <div class="td">4</div>
            <div class="td">5</div>
            <div class="td">6</div>
        </div>
        <div class="tr">
            <div class="td">7</div>
            <div class="td">8</div>
            <div class="td">9</div>
        </div>
    </div>
</div>
</body>
</html>

也同样实现了表格的效果；

7、none类型，如果某个元素被指定了none类型，则这个元素将不会被显示。

最后总结了一下，几种常用浏览器对各种盒模型的支持情况，

打不死滴小强

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
css3之几种盒模型

昨晚回去花了点时间，系统的学习了一下盒模型，现总结如下。1、盒的基本类型：在css3中使用display属性来定义盒的类型，总体来说盒分为block类型和inline类型。我们之前所学的div元素和p元素属于block类型，span和a属于inline类型。如：盒的基本类型 /*div{background: green}*/
复制链接

扫一扫