显示模式
1 块级显示
2 行内显示
3 行内块显示
4 元素显示模式转换
5 拓展
1 块级显示
属性：display:block
显示特点：
1 独占一行（一行只能显示一个）
2 宽度默认是父元素的宽度，高度默认由内容撑开
3 可以设置宽高
代表标签：
div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……
2 行内显示
属性：display:inline
显示特点：
1 一行可以显示多个
2 宽度和高度默认由内容撑开
3 不可以设置宽高
代表标签：
a、span 、b、u、i、s、strong、ins、em、del……
3 行内块显示
属性：display:inline-block
显示特点：
1 一行可以显示多个
2 可以设置宽高
代表标签：
1 input、textarea、button、select……
2 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
4 元素显示模式转换
目的：改变元素默认的显示特点，让元素符合布局要求
使用较多：display:block（块级显示） display:inline-block（行内块显示）
使用较少：display:inline（行内显示）
5 拓展
HTML嵌套规范注意：
1 块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等，但是：p标签中不要嵌套div、p、h等块级元素
2 a标签内部可以嵌套任意元素，但是：a标签不能嵌套a标签
居中方法总结：
水平居中：
text-align:center
1 文本
2 行内元素 span、a
3 行内块元素 input、img
注意：text-align:center 直接设置在元素的父标签即可
margin:0 auto
1 块级元素
注意：margin:0 auto 直接设置在当前标签即可
垂直居中：
line-height 单行文本
代码：
复制
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> h1 { background-color: #abc; /* 显示模式：块级-->行内块 */ display: inline-block; } /* 块级显示 */ div { width: 500px; height: 300px; background-color: pink; } /* 行内显示 */ span { background-color: yellow; } b { background-color: green; } u { background-color: red; } i { background-color: purple; } /* 行内块显示 */ input { background-color: #ff7; } textarea { background-color: #fa9; } </style> </head> <body> <h1> 这是h1标签111 </h1> <h1> 这是h1标签222 </h1> <div> display:block（块级显示）<br> 显示特点： <br> 1 独占一行（一行只能显示一个）<br> 2 宽度默认是父元素的宽度，高度默认由内容撑开<br> 3 可以设置宽高<br> </div> <span> display:inline（行内显示） </span> <b> 1 一行可以显示多个 </b> <u> 2 宽度和高度默认由内容撑开 </u> <i> 3 不可以设置宽高 </i> <br> <img src="./images/1.jpg" alt=""> <input type="text" name="" id=""> <textarea name="" id="" cols="30" rows="10"></textarea> </body> </html> 效果图：
