行内元素和块级元素
行内元素和块级元素
- 1.行内元素
- 1.1什么是行内元素
- 1.2行内元素的特点
- 1.3常见的行内元素
- 2.块级元素
- 2.1什么是块级元素
- 2.2块级元素的特点
- 2.3常见的块级元素
- 3.行内元素和块级元素的区别
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;
不独占一行,可以设置宽高;