本文详细介绍了HTML中的块级元素、行内元素和行内块元素的特点，通过代码示例展示了如何通过display属性进行元素显示模式的转换，并强调了HTML嵌套规范中的注意事项。
<>:通常有标签，标记，元素三种叫法
#目标#：能够认识三种常见的元素显示模式，并通过代码实现不同元素显示模式的转换
学习路径：
1.块级元素
->显示特点：
1.独占一行（一行只能显示一个）
2.宽度默认是父元素的宽度，高度默认由内容撑开
3.可以设置宽高
代表标签：
div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer......
代码示例：
<style>
/* 块：独占一行；宽度默认是父级（body标签）的100%；能够自定义宽度 */
div{
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div>11111</div>
<div>22222</div>
</body>
2.行内元素
->显示特点：
1.一行可以显示多个
2.宽度和高度默认有内容撑开
3.不可以设置宽高
->代表标签：
a、span、b、u、i、s、strong、ins、em、del......
代码示例：
<style>
/* 行内：不换行；设置宽高不生效；宽高和内容的大小相同 */
span{
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<span>span</span>
<span>span</span>
</body>
3.行内块元素
->显示特点：
1.一行可以显示多个
2.可以设置宽高
->代表标签：
input、textarea、button、select.......
特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
代码示例：
<style>
/* 行内块：一行显示多个；加宽加高生效 */
input{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<input type="">文本框
<input type="text">输入框
</body>
4.元素显示模式转换
->目的：改变元素默认的显示特点，让元素符合布局要求
->语法：
属性：display：block 效果：转换成块级元素
属性：display：inline-block 效果：转换成行内块元素
属性：display：inline 效果：转换成行内元素
代码示例1：（将块级元素转换成行内块级元素）
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
display:inline-block
}
</style>
</head>
<body>
<div>11111</div>
<div>22222</div>
</body>
代码示例2：（将行级元素转换成块级元素）
<style>
span{
width: 300px;
height: 300px;
background-color: pink;
display:block
}
</style>
</head>
<body>
<span>span</span>
<span>span</span>
</body>
拓展：
HTML嵌套规范注意点：
1.块级元素一般作为大容器，可以嵌套：文本、块级元素、行级元素、行内块元素等等......
但是：p标签中不要嵌套div、p、h等块级元素
2.a标签内部可以嵌套任意元素
但是：a标签不能嵌套a标签
527
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
