行内元素与块级元素都有哪些，以及它们的区别与联系

一、行内元素和块级元素

行内元素：span、img、a、label、code、input、abbr、em、b、big、cite、i、q、textarea、select、small、sub、sup，strong、u

块级元素：div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、blockquote、address、table、menu、pre

二、区别

1. 块级元素会独占一行 默认的宽度占满父级元素，行内元素不会换行。行内元素设置的width height 无效。

2. 块级元素可以设置margin和padding属性，行内元素padding-left、padding-right，margin-left，margin-right（水平方向），有边距效果，padding-top，padding-bottom，margin-top，margin-bototm，（垂直方向）没有边距效果

三、联系

行内元素如何实现块级元素的效果？

1. 为行内元素设置绝对定位：position:absolute

2. 为行内元素添加浮动：float：left

3. 将行内元素显示设置为块级元素：display:block