标签：oct 标签 大小 pad 使用 input 图片 链接 HERE
HTML 标签的类型独占一行的标签
能随时设置宽度和高度（比如div、p、h1、h2、ul、li）
以上这些标签无论宽度有多窄，都是独占一行的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: red;
}
</style>
</head>
<body>
<!--块级标签-->
<div>我是块级标签</div>
</body>
</html>
上图：可以看到网页两边是有空白处的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
background-color: red;
}
</style>
</head>
<body>
<!--块级标签-->
<div>我是块级标签</div>
</body>
</html>代码：使用通配符，将两边的空白处去掉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
background-color: red;
width: 400px;
height: 100px;
}
p{
background-color: blue;
width: 50px;
}
</style>
</head>
<body>
<!--块级标签-->
<div>我是块级标签</div>
<p>段落</p>
</body>
</html>代码：修改div和p标签的宽度
上图：可以看到因为div和p标签都属于块级标签，都会独占一行，所以即使它俩的宽度在窄，也不会合并到一行。
多个行内标签能同时显示在一行
宽度和高度取决于内容的尺寸（比如span、a、label）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
background-color: red;
width: 400px;
height: 100px;
}
p{
background-color: blue;
/*width: 250px;*/
}
span{
background-color: violet;
}
a {
background-color: teal;
}
</style>
</head>
<body>
<!--块级标签-->
<div>我是块级标签</div>
<p>段落</p>
<br>
<br>
<!--行内标签-->
<span>我是span，行内标签</span>
<span>我是span，行内标签</span>
<a href="#">我是超链接</a>
<a href="#">我是超链接</a>
</body>
</html>代码：
新增行内标签span、a
新增span和a设计
上图：因为是属于行内标签所以span和a都出现在同一行。
a {
background-color: teal;
width: 300px;
height: 150px;
}代码：修改a标签设计，修改器宽度和高度
上图：可以看到高度和宽度并没有改变
多个行内-块级标签可以显示在同一行
能随时设置宽度和高度（比如input、button）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
background-color: red;
width: 400px;
height: 100px;
}
p{
background-color: blue;
/*width: 250px;*/
}
span{
background-color: violet;
}
a {
background-color: teal;
width: 300px;
height: 150px;
}
input{
width: 500px;
height: 50px;
}
button{
width: 250px;
height: 100px;
}
</style>
</head>
<body>
<!--块级标签-->
<div>我是块级标签</div>
<p>段落</p>
<br>
<br>
<!--行内标签-->
<span>我是span，行内标签</span>
<span>我是span，行内标签</span>
<a href="#">我是超链接</a>
<a href="#">我是超链接</a>
<br>
<br>
<!--行内-块级标签-->
<input placeholder="我是输入框">
<button>我是按钮</button>
</body>
</html>
代码：
body中新增了换行符和 行内-块级标签input、button
style中新增了input、button设计
上图：行内-块级标签 是可以在一行显示的，且能调整高度、宽度，这样设计页面更灵活。
CSS中有个display属性，能修改标签的显示类型
none：隐藏标签
block：让标签变为块级标签
inline：让标签变为行内标签
inline-block：让标签变为行内-块级标签（内联-块级标签）
div{
background-color: red;
width: 400px;
height: 100px;
display: none;
}代码：修改div设计样式，加一个display: none;
上图：将div中的内容和样式给隐藏了。
div{
background-color: red;
width: 400px;
height: 100px;
/*display: none;*/
}代码：将display: none 注释掉。
span{
background-color: violet;
display: block;
}
代码：修改span设计样式，新增display: block; 将行内标签修改成块标签
上图：可以看到span本身是个行内标签，不会占据整行的空间，但修改成块标签后就占据整行了。
span{
background-color: violet;
width: 300px;
height: 150px;
display: block;
}代码：修改span设计样式的高度、宽度。
上图：修改成块标签以后，再去修改高度和宽度是可以的，否则如果还是行内标签，修改高度和宽度是不生效的。
span{
background-color: violet;
width: 300px;
height: 150px;
/*display: block;*/
}
代码：注释掉display: block;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
background-color: red;
width: 400px;
height: 100px;
/*display: none;*/
display: inline;
}
p{
background-color: blue;
/*width: 250px;*/
}
span{
background-color: violet;
width: 300px;
height: 150px;
/*display: block;*/
}
a {
background-color: teal;
width: 300px;
height: 150px;
}
input{
width: 500px;
height: 50px;
}
button{
width: 250px;
height: 100px;
}
</style>
</head>
<body>
<!--块级标签-->
<div>我是块级标签</div>
<div>我是块级标签</div>
<p>段落</p>
<br>
<br>
<!--行内标签-->
<span>我是span，行内标签</span>
<span>我是span，行内标签</span>
<a href="#">我是超链接</a>
<a href="#">我是超链接</a>
<br>
<br>
<!--行内-块级标签-->
<input placeholder="我是输入框">
<button>我是按钮</button>
</body>
</html>
代码：
修改div标签，新增display: inline;
body中增加一条div标签。
上图：块级标签变成了行内标签，且因为变成了行内标签设计的宽度和高度是不生效的。
div{
background-color: red;
width: 400px;
height: 100px;
/*display: none;*/
/*display: inline;*/
display: inline-block;
}
上图：变成了行内-块级标签，可以将多个标签放在同一行，且能改变宽度、长度大小。
标签：oct 标签 大小 pad 使用 input 图片 链接 HERE
原文地址：https://blog.51cto.com/daimalaobing/2445589
