面试题准备（二十四）：行级元素、块级元素

常用行级元素、块级元素

行级	块级
span	div
strong	p
em	ul
a	ol
del	li
img	form
input	address

行级元素特点

行级元素，又称内联元素 inline

• 在一行未满的情况下，行级元素会排在同一行
• 内容决定元素所占位置，不可通过 CSS 改变高，即在设置 margin 和 padding 时，只有左右方向会生效，设置 width 和 height 都无效
• 凡是具有 inline 属性的元素，都具有文字属性
• 行级元素只能嵌套行级元素
  

图中，a 标签时行级元素，所以在一行中从左到右排列，在排不下时换行；
给前两个 a 设置宽高和内边距 padding 和外边距 margin，可见，只有左右方向上的 padding 和 margin 生效；

块级元素特点

块级元素 block

• 块级元素独占一行，可通过 CSS 改变宽高，即在设置width、height、 margin 和 padding 时，都可以生效
• 块级元素无论设置了多少宽，都会独占一行，即宽度与窗口宽度一致，多个盒子垂直排列
• 块级元素可以嵌套任何元素

如图，无论块级元素 div 多大，它都会独占一行，多个块级元素垂直排列
根据边框两侧的留白，可以确定，内边距 padding 和外边距 margin 生效