HTML(1) -- 行内元素、块级元素、行内块元素

一. 几种元素形式

<1> 常见行内元素(在一行内显示)

• a
• img
• input
• label
• span
• textarea

<2> 常见块级元素(独占一行)

• div
• dl
• form
• h1 ~ h6
• ol ul li
• p
• table

<3> 可变元素(元素根据上下文语境自行变为行内元素或块级元素)

• button
• ins 插入的文本
• map 图片区块

比如说 button 元素，常见的它是行内元素，给它设置垂直方向上的外边距是无效的，但由于它是可变元素，所以，因为给它设置了垂直方向上的外边距，他就会自行转变为块级元素，即垂直方向上的外边距是生效的！！

<4> 行内块元素(一行显示 + 可以设置宽高)

• img
• input

二. 比较行内和块级元素

• 行内元素属性

  1. 同一行内显示

  2. 无法设置宽度、高度、 行高，宽度是直接由内部的文字或者图片等内容撑开的

  3. 无法设置垂直方向上的外边距！！水平方向上的可以！！

  4. 标签内部不能嵌套块级属性标签（

• 块级元素属性

  1. 独占一行显示

  2. 可以设置宽度、高度、行高，如果不设置宽度，会直接默认为父元素宽度的100%

  3. 可以设置任意方向上的外边距。

  4. 块级元素属性标签是可以直接嵌套的

三. CSS 分别实现行内和块级元素的居中显示

<1> 行内元素：

• 只需给行内元素的父元素设置text-align:center，那么该父元素内的所有行内元素都会水平居中显示
• 给行内元素的父元素设置heigh：40px , line-height：40px，那么该父元素内的所有内嵌是文本的行内元素都会垂直居中显示，但如果内嵌不是文本就不会生效，比如：img

<2> 块级元素：

• 给要居中显示的块级元素，设置margin：0 auto ,width：50px ，实现水平居中显示
• 实现垂直居中的话，可能就需要用到定位position + 移动 transform