块级元素与内联元素的区别

块级元素与内联元素的区别

  在html中，布局是需要用不同类型的元素标签和样式标签来布局，用内容来填充。通过浏览器解析代码让其成为我们可以直观看到的页面。那么我们在布局中所需要用的的元素通常可以分为两种：块级元素与内联元素。本片旨在讲解一下块级元素与内联元素之间的区别。

  那么什么是块级元素与内联元素？

  块级元素：不设置宽度时宽度为父元素的宽度，独占一行，支持宽高。

  内联元素：内容撑开宽度，不会独占一行，不支持宽高，代码换行会被解析成空格。

  通过定义，我们可以了解到他们的本质区别在于。不设置自身宽高，本身内部不具有内容的情况下能否在页面上具有一定的位置并且显示出来。

  下面为大家列出一部分比较常见的块级元素和内联元素

块级： div | form | table | p | h1-h6 | ul 
内联： span | a | input | img

  当我们了解到块级元素与内敛元素的区别后，在接下来的布局中可以变得更加得心应手。但是内联元素可以通过设置它的属性来具备块级元素的特性，同样的块级元素在具备自己特性的同时，也可以具备内联元素的特性。通过什么方式如何实现属性的更改将在后续文章中给大家介绍。