display
2018-02-11 本文已影响14人
王小贱_ww
一.HTML标签的分类
块级标签（block）
典型的块级标签：<p></p>,<div></div>,<h></h>,<form></form>,<ul></ul>
它们具有如下特点:
- 块级标签独自占一行显示（不论实际宽度是否有屏幕那么宽）
- 块级标签的宽度、高度、行高以及顶和底边都可以设置
- 当块级标签嵌套时如果子标签未设置宽度，那么该子标签的宽度为其父标签的宽度
行内标签（inline）
典型的行内标签:<span></span>,<strong></strong>,<label></label>,<a></a>,
它们具有如下特点：
- 行内标签不会独占一行，会和其它标签在同一行显示
- 不能直接设置行内标签的高度、宽度、行高以及顶和底边距
- 行内标签的宽度就是包含了的文字或者图片的宽度
行内块标签
典型的行内标签：<img>,<input>
它们具有如下特点：
- 行内块标签在同一行显示
- 可以设置行内块标签的高度、宽度
二、display属性 - 将行内标签转换成块标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>display属性</title>
<style type="text/css">
a {
width: 300px;
height: 100px;
font-size: 30px;
font-family: 宋体;
text-decoration:none;
color: red;
background-color: yellow;
display: block;
}
</style>
</head>
<body>
<a href="https://www.baidu.com/">百度一下111111</a>
<br>
<a href="https://www.baidu.com/">百度一下222222</a>
</body>
</html>
display1.PNG
在此，在标签选择器a中利用了display: block将标签<a></a>从行内标签转换成了块级标签。所以，点击整个黄色区域都可以实现超链接。换句话说：原本的<a></a>标签是不能指定其宽高的，但是在此通过display: block就将其转换成了块级标签从而扩大了超链接的点击区域。
- 将行内标签转换为行内块标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display标签</title>
<style type="text/css">
a{
width: 300px;
height: 200px;
background-color: pink;
font-size: 20px;
display: inline-block;
}
</style>
</head>
<body>
<a href="https://www.baidu.com/">百度一下111111</a>
<a href="https://www.baidu.com/">百度一下2222222</a>
</body>
</html>
display2.PNG
在此，在标签选择器a中利用了display: inline-block将标签<a></a>从行内标签转换成了行内块标签。既然是行内块标签，那么就可以为其设置宽高了，并且可以将它们放在同一行显示了。所以，点击粉红色区域都可以实现超链接。
- 将块级标签转换为行内标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style type="text/css">
div {
font-size: 20px;
background-color: yellow;
color: blue;
display: inline;
}
</style>
</head>
<body>
<div>content11111111111</div>
<div>content22222222222</div>
</body>
</html>
display3.PNG
在此，在标签选择器div中利用了display: inline将标签<div></div>从块级标签转换成了行内标签。既然是行内标签那么就可以将两个<div></div>放到同一行显示了；当然，此时为其设置的宽和高也就无效了。
