块级元素与行内元素

1、块级元素

1、独占一行，对宽高的属性值生效；

2、不给宽度，块级元素就默认为浏览器的宽度，即100%宽；

3、常用的块级标签有：div，p，h1~h6，ul，li，dl，dt，dd；

4、是一个容器，里面可以放行内或者块级元素；

5、块级标签转换为行内标签：display:inline 。

• 注意：
  • 只有 文字才 能组成段落 因此 p 里面不能放块级元素，特别是 p 不能放div
  • 同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

2、行内元素

1、可以多个标签存在一行；

2、对宽高属性值不生效，完全靠内容撑开宽高；

3、常用的行内有：a，span，font，b，u，i，strong，em等；

4、默认宽度就是它本身内容的宽度；

5、只能容纳文本或其他行内元素；

6、行内标签转换为块级标签：display:block ；

7、text-align:center对行内标签没有效果

因为行内元素的宽就是内容宽，没有可居中的空间，所以text-align:center;就没有作用

• 链接里面不能再放链接。
• 特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。

3、行内元素可以设置内外边距吗

1、建议不要给行内元素设置垂直方向的外边距；
2、行内元素可以设置的padding ,border，以及水平方向的margin；
3、不能设置宽高以及垂直方向的间距。

1、行内元素可以设置左右外边距和上下外边距
2、只不过由于行内元素的特点，上下外边距不起作用。
3、img设置上下外边距起作用是因为img是行内元素，但同时也具备块元素的特性，比如可以设置宽度和高度，这类元素也叫行内块元素。

4、行内块元素

1、在行内元素中有几个特殊的标签 img 、input 、td
2、可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素；
3、和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个；
4、默认宽度就是它本身内容的宽度；
5、宽度，高度，行高、外边距以及内边距都可以控制。