一天搞定HTML----标签类型与类型转换05
标签类型：
标签只有两类：行内元素和块元素
行内元素：内容撑开宽高
块元素：默认独占一行
注意：
在使用display时，会遇到一种inline-block类型的标签。这种标签不属于标签的分类。
1.块元素block特点
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
padding: 0;
}
div{
height: 100px;
background: red;
margin: 50px;
padding: 30px;
}
</style>
</head>
<body>
<!--
块元素的特征
1、默认独占一行
2、没有给宽度的时候，宽度是auto，撑满一行(宽度就是父级的宽度)
3、支持所有的css命令
-->
<div>div</div>
</body>
</html>
2.行内元素inline特点
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
padding: 0;
}
span{
background: pink;
width: 200px;
height: 200px;
/*margin: 50px;*/
padding: 50px;
}
div{
background: green;
}
</style>
</head>
<body>
<!--
行内元素的特征
1、内容撑开宽高
宽高的值都是auto，只不过显出来的宽高是由内容撑开的
2、不支持设置宽高
3、不支持上下的margin与上下padding(左右支持)
上下的padding是有问题，虽然把背影撑出来了，这个只是表面现象，它不会对其它的元素有影响
4、所有的行内元素都会在一行显示
5、代码换行会被解析成一个空格
-->
<span>铁道学院</span>
<strong>kaivon</strong>
<div>div</div>
</body>
</html>
3.行内块元素inline-block特点
注意：它不属于标签分类中的一类。
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{
width: 100px;
height: 100px;
background: red;
display: inline-block;
}
div{
width: 100px;
height: 100px;
background: green;
display: inline-block;
}
</style>
</head>
<body>
<!--
display:inline-block; 行内块元素
特征：
1、行内元素支持宽高
2、块元素可以在行中显示
3、不给宽高的话，宽度会由内容撑开
4、代码换行会被解析成一个空格
5、IE6、7不支持块元素的inline-block
IE6、7不认识inline-block，给行内元素加上这个属性后会触发IE的haslayout特点，会让行内元素具有与inline-block一样的特征，所以它不支持块元素的inline-block
-->
<span>kaivon</span>
<div>kaivon</div>
</body>
</html>
4.块元素和行内元素有哪些？
行内元素：
a,span,strong,em,mark,img,time
块元素：
div ,h1~h6,p,列表标签（ul,ol,li,dd,dt),header,nav,footer,section,article,aside
5.标签类型转换
通过设置display的取值来改变标签的类型：
display的值：
1）none：隐藏标签
2）block：块元素
3）inline：行内元素
4）inline-block：行内块元素
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background: green;
color: #fff;
display: inline;
}
span{
background: red;
width: 100px;
height: 100px;
display: block;
}
</style>
</head>
<body>
<!--
块元素转行内元素 display:inline
转换后块元素就具有了行内元素的特征（只是显示为行内元素，本身还是块元素）
行内元素转块元素 display:block
转换后行内元素就具有了块元素的特征（只是显示为块元素，本身还是行内元素）
-->
<div>div1</div>
<div>div2</div>
<span>span1</span>
<span>span2</span>
</body>
</html>
