Display
1、display: inline-block / inline;
如果指定了宽度和高度,文字有可能会溢出
无论是inline-block 还是 inline ,效果是一样的
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>盒的基本类型</title>
<style>
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>
</body>
</html>
之前,如果需要在一行中并列显示多个block类型的元素,需要用float属性或者position属性,但是这样会让我们的样式变的复杂,所以在CSS2.1中就追加了inline-block类型,使得并列显示多个block类型的元素操作变的很简单。
示例对比:
block类型
首先新建三个div元素,给前两个div使用float让前两个div元素并列显示,第三个div的话就会显示在前两个div元素的下部,但是因为前两个的高度不一样所以我们要使用clear属性清除浮动。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用inline-block类型来执行分列显示</title>
<style>
div.div{
width:400px
}
div.div1{
width: 200px;
background-color: green;
float: left;
}
div.div2{
width: 200px;
background-color: #ff6600;
float: left;
}
div.div3{
clear: both; /*clear属性清除浮动*/
background-color: #d829ff;
}
</style>
</head>
<body>
<h1>使用inline-block类型来执行分列显示</h1>
<div class="div">
<div class="div1">
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
<div class="div2">
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
<div class="div3">
之前,如果需要在一行中并列显示多个block类型的元素,需要用float属性或者position属性,但是这样会让我们的样式变的复杂,所以在CSS2.1中就追加了inline-block类型,使得并列显示多个block类型的元素操作变的很简单。
示例对比:
block类型
首先新建三个div元素,给前两个DIV使用float让前两个div元素并列显示,第三个div的话就会显示在前两个div元素的下部,但是因为前两个的高度不一样所以我们要使用clear属性清除浮动。
</div>
</div>
</body>
</html>
显示结果:
使用inline-block类型,可以直接将两个div元素进行并列显示,不需要使用float属性,也不需要使用clear属性。
在默认情况下,使用inline-block类型时并列显示的元素的垂直对齐方式是底部对齐,如果要实现顶部对齐,可以对div元素的样式加入vertical-align属性。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用inline-block类型来执行分列显示</title>
<style>
div.div1{
width: 200px;
background-color: green;
display: inline-block;
}
div.div2{
vertical-align: top; /*顶部对齐*/
width: 200px;
background-color: #ff6600;
display: inline-block;
}
div.div3{
width: 400px;
background-color: #d829ff;
}
</style>
</head>
<body>
<h1>使用inline-block类型来执行分列显示</h1>
<div>
<div class="div1">
2、inline-block类型
inline-block类型是css2.1中追加的一个盒类型。
inline-block类型盒属于block盒的一种,但是在显示时具有inline类型盒的特点。
例如:
在DIV元素中分别将display设置为inline-block和inline后他们的效果一样。
如果我们给他们都指定宽度和高度结果会是怎样?
<!--下面的</div><div>是紧连着的,是为了取消这两个div之间的间隔-->
</div><div class="div2">
2.2使用inline-block类型来执行分列显示
在css2.1之前,如果需要在一行中并列显示多个block类型的元素,需要用float属性或者position属性,但是这样会让我们的样式变的复杂,
</div>
<div class="div3">
css2.1之前,如果需要在一行中并列显示多个block类型的元素,需要用float属性或者position属性,但是这样会让我们的样式变的复杂,所以在CSS2.1中就追加了inline-block类型,使得并列显示多个block类型的元素操作变的很简单。
示例对比:
block类型
首先新建三个div元素,给前两个DIV使用float让前两个div元素并列显示,第三个div的话就会显示在前两个div元素的下部,但是因为前两个的高度不一样所以我们要使用clear属性清除浮动。
</div>
</div>
</body>
</html>
< / div>
< div id = “div2” >
的效果:
< / div> < div id = “div2” >的效果:
2、使用inline-block类型来显示水平菜单
实现水平菜单
第一种方法:ul 列表和 li 列表项目,li 元素隶属于block类型下的list-item类型,所以并列显示的话,就要使用float属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ul与li</title>
<style>
ul{
margin: 0;
padding: 0;
}
li{
padding: 20px 20px; /*第一个数值是高度改变,第二数值是宽度改变*/
background: #2292ff; /*蓝色*/
border-right: solid 2px #b224ef; /*紫色*/
width:50px;
list-style: none; /*每个列前面的点消失不见*/
text-align: center; /*文字处于中心位置*/
float: left; /*使每个li元素能水平排列,而不是竖直排序*/
}
a{
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>
<h1>使用ul与li类型来显示水平菜单</h1>
<ul>
<li><a href="http://www.baidu.com">首页</a></li>
<li><a href="http://www.baidu.com">首页</a></li>
<li><a href="http://www.baidu.com">首页</a></li>
<li><a href="http://www.baidu.com">首页</a></li>
<li><a href="http://www.baidu.com">首页</a></li>
<li><a href="http://www.baidu.com">首页</a></li>
<li><a href="http://www.baidu.com">首页</a></li>
<li><a href="http://www.baidu.com">首页</a></li>
<li><a href="http://www.baidu.com">首页</a></li>
<li><a href="http://www.baidu.com">首页</a></li>
<li><a href="http://www.baidu.com">首页</a></li>
<li><a href="http://www.baidu.com">首页</a></li>
<li><a href="http://www.baidu.com">首页</a></li>
<li><a href="http://www.baidu.com">首页</a></li>
</ul>
</body>
</html>
显示结果:
第二种方法:使用inline-block,可以得到同样的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ul与li</title>
<style>
ul{
margin: 0;
padding: 0;
}
li{
display: inline-block;/*inline-block,减少了float属性与list-style*/
padding: 20px 20px; /*第一个数值是高度改变,第二数值是宽度改变*/
background: #2292ff; /*蓝色*/
border-right: solid 2px #b224ef; /*紫色*/
width:50px;
text-align: center;
}
a{
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>
<h1>使用ul与li类型来显示水平菜单</h1>
<ul>
<li><a href="http://www.baidu.com">首页</a></li><li><a href="http://www.baidu.com">首页</a></li><li><a href="http://www.baidu.com">首页</a></li><li><a href="http://www.baidu.com">首页</a></li><li><a href="http://www.baidu.com">首页</a></li><li><a href="http://www.baidu.com">首页</a></li><li><a href="http://www.baidu.com">首页</a></li><li><a href="http://www.baidu.com">首页</a></li>
</ul>
</body>
</html>
3、inline-table类型
新增属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>inline-table类型</title>
<style>
table{
display: inline-table;
vertical-align: bottom; /*默认状态下文字是顶部对齐*/
border: solid 3px #ccc;
}
td{
border: solid 3px #898989;
}
</style>
</head>
<body>
<h1>inline-table类型</h1>
这里是文字内容
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
这里是文字内容
</body>
</html>
没有inline-table:
有inline-table:
4、list-item类型
可以将多个元素作为ul列表来显示,同时可以在元素的开头加上列表的标记
<!DOCTYPE html>
<html>
<head lang="en">
<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>
<div>list-item类型</div>
<div>list-item类型</div>
</body>
</html>
显示结果:
5、run-in类型或compact类型
run-in类型的元素将被包括在后面的block类型的元素的内部
compact类型的元素将被放置在block类型的元素左边
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>run-in类型或compact类型</title>
</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>
dl元素可以定于列表:
加上run-in与compact:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>run-in类型或compact类型</title>
<style>
dl.run-in dt{
display: run-in;
border: solid 2px #d829ff;
background-color: #cccccc;
}
dl.compact dt {
display: compact;
border: solid 2px #d829ff;
background-color: #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>
显示结果:
6、在CSS3中与表格相关的元素:
实例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS3中所有与表格相关的元素</title>
<style>
div.table{
display: table;/*整个表格*/
border: solid 3px #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">1</div>
<div class="td">2</div>
<div class="td">3</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
</div>
</div>
</div>
</body>
</html>
显示结果:
7、none元素
指定none后,该元素不会被显示
下面实例可以实现鼠标移上去隐藏,移动后显示
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>none类型</title>
<style>
div#a{
width: 500px;
height: 500px;
background-color: #cccccc;
}
div#b{
display: block;
width: 200px;
height: 200px;
background-color: green;
}
div#a:hover div#b{
display: none;
}/*hover是鼠标移动上去*/
</style>
</head>
<body>
<h1>none类型</h1>
<div id="a">
<div id="b"></div>
</div>
</body>
</html>