1.盒的基本类型
1> 盒基本分为block类型和inline类型
2> 对比
inline-block类型
1>概念
inline-block属于block盒的一种，在CSS2.1中追加inline-block类型，是为了让并列显示多个block类型的元素操作变得简单，但是在显示时具有inline类型盒的特点。
例：在div元素中分别将display设置为inline-block和inline后他们的效果一样。
2> inline-block和inline区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒的基本元素</title>
<style>
div{background: cadetblue;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>
</body>
</html>
3>例子
<1>float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用inline-block类型来执行分列显示</title>
<style>
div{
width:200px;
}
.div1{
width:100px;
background: brown;
float:left;
}
.div2{
width:100px;
background: burlywood;
float:left;
}
.div3{background: blueviolet}
</style>
</head>
<body>
<h1>使用inline-block类型来执行分列显示</h1>
<div class="div">
<div class="div1">在CSS3中使用display在CSS3中使用display在CSS3中使用display在CSS3中使用display在CSS3中使用display在CSS3中使用display在CSS3中使用display在CSS3中使用display</div>
<div class="div2">属性来定义盒的类型，总体来说盒分属性来定义盒的类型，总体来说盒分属性来定义盒的类型，总体来说盒分属性来定义盒的类型，总体来说盒分属性来定义盒的类型，总体来说盒分属性来定义盒的类型，总体来说盒分属性来定义盒的类型，总体来说盒分</div>
<div class="div3">为block类型和inline类型为block类型和inline类型为block类型和inline类型为block类型和inline类型为block类型和inline类型为block类型和inline类型为block类型和inline类型</div>
</div>
</body>
</html>
tip：前两个浮动，第三个会紧随其后去填补 。要想清除浮动，需要使用clear属性。
<style>
div{
width:200px;
}
.div1{
width:100px;
background: brown;
float:left;
}
.div2{
width:100px;
background: burlywood;
float:left;
}
.div3{
clear:both;
background: blueviolet;
}
</style>
<2>inline-block
<style>
.div1{
width:100px;
background: brown;
display:inline-block;
}
.div2{
width:100px;
background: burlywood;
display: inline-block;
}
.div3{
background: blueviolet;
width:200px;
}
</style>
tip:默认情况下使用inline-block类型时并列显示的元素的垂直对齐方式是底部对齐，为了让对齐方式改为顶部对齐，还要给div元素的样式中加入vertical-align属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用inline-block类型来执行分列显示</title>
<style>
.div1{
vertical-align:top ;
width:100px;
background: brown;
display:inline-block;
}
.div2{
width:100px;
background: burlywood;
display: inline-block;
}
.div3{
background: blueviolet;
width:200px;
}
</style>
</head>
<body>
<h1>使用inline-block类型来执行分列显示</h1>
<div class="div">
<div class="div1">在CSS3中使用display在CSS3中使用display在CSS3中使用display在CSS3中使用display在CSS3中使用display在CSS3中使用display在CSS3中使用display在CSS3中使用display</div><div class="div2">属性来定义盒的类型，总体来说盒分属性来定义盒的类型，总体来说盒分属性来定义盒的类型，总体来说盒分属性来定义盒的类型，总体来说盒分属性来定义盒的类型，总体来说盒分属性来定义盒的类型，总体来说盒分属性来定义盒的类型，总体来说盒分</div>
<div class="div3">为block类型和inline类型为block类型和inline类型为block类型和inline类型为block类型和inline类型为block类型和inline类型为block类型和inline类型为block类型和inline类型</div>
</div>
</body>
</html>
tip：让div2紧连div1后，块间的缝隙会消失
<3>inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用inline-block类型来显示水平菜单</title>
<style>
ul{
margin:0;
padding:0;
}
li{
float:left;/*向左浮动*/
padding:10px 20px;/*padding上下10px 左右20px*/
background-color: #2292ff;/*背景颜色*/
border-right:solid 1px #2066c7;/*进行每个栏目的分割*/
width:100px;
text-align: center;/*文字居中*/
list-style:none;/*去掉小黑点*/
}
a{
color:#fff;/*去掉超链接的颜色，改成白色*/
text-decoration:none;/*去掉下划线*/
}
</style>
</head>
<body>
<h1>使用inline-block类型来显示水平菜单</h1>
<ul>
<li><a herf="index1.html">首页</a></li>
<li><a herf="index2.html">首页</a></li>
<li><a herf="index3.html">首页</a></li>
<li><a herf="index4.html">首页</a></li>
<li><a herf="index5.html">首页</a></li>
</ul>
</body>
</html>
使用display：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;
padding:10px 20px;/*padding上下10px 左右20px*/
background-color: #2292ff;/*背景颜色*/
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 herf="index1.html">首页</a></li><li><a herf="index2.html">首页</a></li><li><a herf="index3.html">首页</a></li><li><a herf="index4.html">首页</a></li><li><a herf="index5.html">首页</a></li>
</ul>
</body>
</html>
inline-table类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>inline-table类型</title>
<style>
table{
border:solid 3px brown;
display:inline-table;
}
td{
border:solid 3px blanchedalmond;
}
</style>
</head>
<body>
<h1>inline-table类型</h1>
这是开头
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
这是结尾
</body>
</html>
inline-table的并列显示的元素的垂直对齐方式是顶部对齐，所以为了让对齐方式改为底部对齐，和inline-block的方法一样给div元素的样式中加入vertical-align属性即可。
<style>
table{
border:solid 3px brown;
vertical-align:bottom;
display:inline-table;
}
td{
border:solid 3px blanchedalmond;
}
</style>
list-item类型
1>概念
可以将多个元素作为列表来显示，同时在元素的开头加上列表的标记
2>例子
<!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>
<h1>list-item类型</h1>
<div>list-item类型</div>
<div>list-item类型</div>
<div>list-item类型</div>
<div>list-item类型</div>
<div>list-item类型</div>
</body>
</html>
run-in类型与compact类型
1>概念
将元素指定为run-in类型或者compact类型时，如果元素后面还有block类型的元素，run-in类型那个元素将被包括在后面的block类型的元素的内部，而compact类型的元素将被放置在block类型的元素左边。
2>例子
<1>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>run-in类型或compact类型</title>
</head>
<body>
<h1>run-in类型或compact类型</h1>
<dl>
<dt>run-in类型</dt>
<dd>run-in类型那个元素将被包括在后面的block类型的元素的内部</dd>
</dl>
<dl>
<dt>compact类型</dt>
<dd>compact类型的元素将被放置在block类型的元素左边</dd>
</dl>
</body>
</html>
<2>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>run-in类型或compact类型</title>
<style>
dl.run-in dt{
diaplay:run-in;
border:solid 2px #d829ff;
background-color: #cccccc;
}
dl.compact dt{
diaplay:compact;
border:solid 2px #d829ff;
background: #cccccc;
}
</style>
</head>
<body>
<h1>run-in类型或compact类型</h1>
<dl class="run-in">
<dt>run-in类型</dt>
<dd>run-in类型那个元素将被包括在后面的block类型的元素的内部</dd>
</dl>
<dl class="compact">
<dt>compact类型</dt>
<dd>compact类型的元素将被放置在block类型的元素左边</dd>
</dl>
</body>
</html>
tip：run-in和compact被IE浏览器所兼容
在CSS3中所有与表格相关的元素及其所属类型表：
| 元素 | 所属类型 | 说明 |
|---|---|---|
| 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-columm | 代表表格中的一列 |
| colgroup | table-columm-group | 代表表格中的所有列 |
| caption | table-caption | 代表整个表格的标题 |
191
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
