HTML元素分类：inline、inline-block、block
三者可以互相转化——设置display属性值：inline、inline-block、block
inline
textarea、span、a、img、input、select
　⾏内元素特征：(1)设置宽⾼⽆效
(2)对margin仅设置左右⽅向有效，上下⽆效；padding设置上下左右都有效，即会撑⼤空间,⾏内元素尺⼨ 由内含的内容决定，盒模型中padding, border 与块级元素并⽆差异，都是标准的盒模型，但是 margin 却只有⽔平⽅向的值，垂直⽅向并没有起作⽤。⾏内元素的⽔平⽅向的padding-left,padding-right,margin- left,margin-right 都产⽣边距效果，但是竖直⽅向的padding-top,padding-
bottom,margin-top,margin-bottom都 不会产⽣边距效果。padding设置上下左右都有效，即会撑⼤空间但是不会产⽣边距效果。
(3)不会⾃动进⾏换⾏
(4)元素宽度在不设置的情况下，是它本⾝⽗容器的100%（和⽗元素的宽度⼀致），除⾮设定⼀个宽度。
inline-block
⾏内块状元素特征：(1)不⾃动换⾏
(2)能够识别宽⾼
(3)默认排列⽅式为从左到右
block
div、p、ul、h1等标题元素、ol、form、table
块状元素特征：(1)能够识别宽⾼
(2)margin和padding的上下左右均对其有效
(3)可以⾃动换⾏
(4)多个块状元素标签写在⼀起，默认排列⽅式为从上⾄下
补充说明：
在HTML5中，程序员可以⾃定义标签，在任意定义标签中，加⼊display:block；即可，当然也可以是⾏内或⾏内块状。
可变元素
可变元素为根据上下⽂语境决定该元素为块元素或者内联元素。
  * applet - java applet
  * button - 按钮
  * del - 删除⽂本
  * iframe - inline frame
  * ins - 插⼊的⽂本
position标签属性  * map - 图⽚区块(map)
  * object - object对象
  * script - 客户端脚本
inline-block和float的区别
1、⽂档流（Document flow）：浮动元素会脱离⽂档流，并使得周围元素环绕这个元素。⽽inline-block元素仍在⽂档流内。因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除inline-block就让⼀个元素跑到下⾯去。
2、⽔平位置（Horizontal position）：很明显你不能通过给⽗元素设置text-align:center让浮动元素居中。事实上定位类属性设置到⽗元素上，均不会影响⽗元素内浮动的元素。但是⽗元素内元素如果设置了display：inline-block，则对⽗元素设置⼀些定位属性会影响到⼦元素。（这还是因为浮动元素脱离⽂档流的关系）。
3、垂直对齐（Vertical alignment）：inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线，但对浮动元素这种⽅法就不⾏了。这也是我倾向于inline-block的主要原因。
4、空⽩（Whitespace）：inline-block包含html空⽩节点。如果你的html中⼀系列元素每个元素之间都换⾏了，当你对这些元素设置inline-block时，这些元素之间就会出现空⽩。⽽浮动元素会忽略空⽩节点，互相紧贴.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。