css3之几种盒模型

来源：互联网发布：java常见面试题集合编辑：程序博客网时间：2024/05/22 02:25

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

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类型，则这个元素将不会被显示。

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

1 0