常见的块级元素与行内(内联)元素有哪些?它们有什么区别?

简介: 常见的块级元素与行内(内联)元素有哪些?它们有什么区别?

我需要一个答案,或许美满,或许破碎,但我不想半途而废。

 

1.默认情况

哪些HTML标签是块级元素、哪些是内联元素?

 

块级元素(display:block/table;):div、h1-h6、p、table、ul、ol、dl、li、dl、dt、dd……

行内元素(display:inline/inline-block;):span、a、

img、input、button……

 

2.块级元素和行内(内联)元素的区别

块级元素

 

  • 独占一行
  • 可以设置宽高,width默认为100%(父级元素宽度),height默认为0
  • 可以容纳内联元素和块级元素

行内元素

  • 一行可放置多个
  • 不能设置宽高,宽高由内容撑开
  • 水平方向的 padding 和 margin 属性可以使用(内边距的 top/bottom和外边距的top/bottom都不能设置)
  • 只能容纳文本和内联元素

行内替换(置换)元素(也被称作行内块元素)

  • 一行可放置多个
  • 可以设置宽高,默认宽高由内容撑开
  • 常见的行内替换元素:img、input

 

 

 

相关文章
|
3月前
|
前端开发
行内样式表(style属性)
行内样式表(style属性)。
32 1
|
11月前
|
前端开发
CSS布局:浮动 (结构伪类选择器、伪元素、标准流、浮动、清除浮动)
CSS布局:浮动 (结构伪类选择器、伪元素、标准流、浮动、清除浮动)
56 0
|
2月前
|
前端开发 容器
CSS布局基础:块级元素、行内元素与行内块元素详解
CSS布局基础:块级元素、行内元素与行内块元素详解
30 0
|
3月前
|
前端开发
html中行内元素、块级元素、行内快元素都有哪些,以及区别
html中行内元素、块级元素、行内快元素都有哪些,以及区别
50 1
|
9月前
|
前端开发
伪元素和伪类的区别和作用?
伪元素和伪类的区别和作用?
49 0
|
3月前
行内元素、块级元素、空元素的理解
行内元素、块级元素、空元素的理解
33 0
|
9月前
行内元素有哪些?块级元素有哪些? 行内块元素有那些?他们有什么区别?
行内元素有哪些?块级元素有哪些? 行内块元素有那些?他们有什么区别?
174 0
|
前端开发 JavaScript
html行内标签和块级标签有哪些?css常用的伪类和伪元素有哪些? 什么是作用域?作用域链又是什么?
作用域:作用域是当前的执行上下文,js中作用域分为全局作用域和函数作用域。
|
前端开发
前端总结:块级元素和行内元素及其区别
前端总结:块级元素和行内元素及其区别
117 0
前端总结:块级元素和行内元素及其区别
|
前端开发
一文搞懂行内元素、块元素、行内块元素
一文搞懂行内元素、块元素、行内块元素
277 0
一文搞懂行内元素、块元素、行内块元素