CSS3学习系列之盒样式（一）

盒的基本类型

在css中，使用display属性来定义盒的类型，总体上来说，css中的盒分为block类型与inline类型

inline-block类型

inline-block类型是在css2.1中追加的一个盒类型，属于block类型的一种，但是显示时它具有inline类型盒的特点，例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inline-block类型div元素的示例</title>
    <style>
      div.inlineblock{
          display:inline-block;
          background-color: #00aaff;
          width: 300px;
      }
        div.inline{
            display: inline;
            background-color: #00ff00;
            width: 300px;
        }
    </style>
</head>
<body>
<div>
    <div class="inlineblock">inline-block类型</div>
    <div class="inlineblock">inline-block类型</div>
</div>
<div>
    <div class="inline">inline类型</div>
    <div class="inline">inline类型</div>
</div>
</body>
</html>

使用inline-block类型来执行行分列显示

在css2.1之前，如果需要在一行中并列显示多个block类型的元素，则需要使用float属性或position属性，但这样会使样式变得比较复杂，因此在css2.1中，追加了inline-block类型。例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将div元素并列显示示例</title>
    <style>
        div#a, div#b {
            display: inline-block;
            width: 200px;
        }        div#a {
            background-color: #0088ff;
        }        div#b {
            background-color: #00ccff;
        }        div#c {
            width: 400px;
            background-color: #ffff00;
        }
    </style>
</head>
<body>
<div id="a">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
<div id="b">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
<div id="c">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
</body>
</html>

使用inline-block来先水平菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用inline-block类型实现水平菜单的示例</title>
    <style>
        ul {
            margin: 0;
            padding: 0;
        }        li {
            display: inline-block;
            width: 100px;
            padding: 10px 0;
            background-color: #00ccff;
            border: solid 1px #666666;
            text-align: center;
        }        a {
            color: #000000;
            text-decoration: none;
        }
    </style>
</head>
<body>
<ul>
    <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >菜单1</a></li>
    <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >菜单2</a></li>
    <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >菜单3</a></li>
    <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >菜单4</a></li>
</ul>
</body>
</html>

inline-table类型

table元素属于block类型，所以不能与其他文字处于同一行中，但是如果将table元素修改成inline-table类型，就可以让表格与其他文字处于同一行中了。

list-item类型

如果在display属性中将元素的类型设定为list-item类型，可以将多个元素作为列表来显示，同时在元素的开头加上列表的标记。例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>list-item类型使用示例</title>
    <style>
        div {
            display: list-item;
            list-style-type: circle;
            margin-left: 30px;
        }
    </style>
</head>
<body>
<ul>
    <div>示例div1</div>
    <div>示例div2</div>
    <div>示例div3</div>
    <div>示例div4</div>
</ul>
</body>
</html>

run-in类型与compact类型

将元素指定为run-in类型或compact类型的时候，如果元素后面还有block类型的元素，run-in类型的元素将被包含在block类型的元素内部，而compact类型的元素将被放置在block类型的元素左边。谷歌还不支持例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>run-in类型与compact类型使用示例</title>
    <style>
       dl#runin dt{
           display: run-in;
           border: solid 2px red;
       }
        dl#compact dt{
            display: compact;
            border: solid 2px red;
        }
        dd{
            margin-left: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
   <dl id="runin">
       <dt>名词一</dt>
       <dd>关于"名词一"的名词解释</dd>
   </dl>
    <dl id="compact">
        <dt>名词二</dt>
        <dd>关于名词二的解释</dd>
    </dl>
</ul>
</body>
</html>

表格相关的类型

CSS3中所有表格相关的元素对应的display的类型值：

元素	所属类型	说明
table	table	代表整个表格
table	Inline-table	代表整个表格，可以被指定为table类型或inline-table类型
tr	table-row	代表表格中的一行
td	table-cell	代表表格中的单元格
th	table-cell	代表表格中的列标题
tbody	table-row-group	代表表格中所有行
thead	table-header-group	代表表格中的表头部分
tfoot	table-footer-group	代表表格中的脚注部分
col	table-column	代表表格中的一列
colgroup	table-column-group	代表表格中所有列
caption	table-caption	代表整个表格的标题

完整例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 3中完整表格的构成示例</title>
    <style>
        .table {
            display: table;
            border: solid 3px #00aaff;
        }        .caption {
            display: table-caption;
            text-align: center;
        }
        .tr{
            display: table-row;
        }
        .td{
            display: table-cell;
            border:solid 2px #aaff00;
        }
        .thead{
            display: table-header-group;
            background-color: #ffffaa;
        }
    </style>
</head>
<body>
<div class="table">
    <div class="caption">字母表</div>
    <div class="thead">
        <div class="td">1st</div>
        <div class="td">2nd</div>
        <div class="td">3rd</div>
        <div class="td">4th</div>
        <div class="td">5th</div>
    </div>
    <div class="tr">
        <div class="td">A</div>
        <div class="td">B</div>
        <div class="td">C</div>
        <div class="td">D</div>
        <div class="td">E</div>
    </div>
    <div class="tr">
        <div class="td">F</div>
        <div class="td">G</div>
        <div class="td">H</div>
        <div class="td">I</div>
        <div class="td">J</div>
    </div>
</div>
</body>
</html>

个人收藏笔记记录

开通VIP