一天搞定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>