行内元素和块级元素

1.行内元素

1.1什么是行内元素

行内元素是指在网页中不会独占一行,而是与其他行内元素在同一行内显示的元素。行内元素通常用于包裹文本或其他行内元素，不会对布局产生大的影响。

1.2行内元素的特点

• 不独占一行:行内元素不会开始新行,而是在同一行内连续显示。
• 宽度自适应:行内元素的宽度由其内容决定,不会自动扩展到父元素的宽度。
• 不能设置宽度、高度:默认情况下,行内元素不能设置固定的宽度和高度。

1.3常见的行内元素

• span
• img
• input
• a
• button
• label
• select
• textarea
• strong和b
• em和i

2.块级元素

2.1什么是块级元素

块级元素是指在文档中会独占一行,并且可以设置宽度、高度和内外边距的元素。块级元素通常用于构建网页的主要结构和布局。

2.2块级元素的特点

• 独占一行:块级元素会独占一行,后续内容会从新行开始。
• 宽度默认扩展:块级元素的宽度默认会扩展到父元素的宽度。
• 可以设置宽度、高度:块级元素可以设置固定的宽度和高度。

2.3常见的块级元素

• div
• footer
• header
• section
• article
• p(这个也是块级元素)
• h1-h6
• ul和ol
• li
• nav
• table
• form

3.行内元素和块级元素的区别

• 行内元素
  display:inline;
  不独占一行,设置宽高不生效；
• 块级元素
  独占一行,可以设置宽高；
• 行内块元素
  display:inline-block;
  不独占一行,可以设置宽高;