块元素与行内元素

目录

那么块元素、行内元素和行内元素有哪些区别呢？

了解了区别，那么我们通过什么来进行不同元素的相互转换？

最后，有哪些注意点？

---

元素在文档流中会区分：块元素、行内元素和行内块元素。

那么块元素、行内元素和行内元素有哪些区别呢？

块元素：独占一行，自上而下一行一行的排列，默认宽度是父元素的100%，高度默认是被内容撑开的。常见的块元素有：div、p、h1-h6、ul、li、ol……

行内元素：不会独占一行，自左向右排列，一行满了就挪到下一行，再自左向右，宽高都是被内容撑开，不可以自定义宽高；内外边距上下不可以设置，但是内外边距左右可以设置。常见的行内元素有：span、a、i、em、strong、del、s……

行内块元素：inline-block元素，拥有内存尺寸，可设置宽高，但不会自动换行。常见的行内块元素有：img、input、button、label……

了解了区别，那么我们通过什么来进行不同元素的相互转换？

display:实现不同元素的相互转换。其中可选值有none、block、inline、inline-block

最后，有哪些注意点？

• 块元素是布局元素，里面什么都能放
• 行内元素一般就用来包裹文字
• 特殊的块元素——p，不能放块元素
• 特殊的行内元素——a，里面什么都能放，除了它自己