行内元素和块级元素的区别,为何img、input等行内元素可以设置宽高??(夯实基础)

我们习惯将html中元素分类为行内元素和块级元素,如下:


·常见块级元素有:html、body、div、header、footer、nav、section、aside、article、p、hr、h1~h6、ul、ol、dl、form、table、tbody、thead、tfoot、tr等;

·常见行内元素有:span、a、img、textarea、button、input、br、label、select、canvas、progress、cite、code、strong、em、audio、video等




而他们明显的区别是:

·块级元素:会自动换行,在横向充满其父元素的内容区域,默认独占一行的,可修改宽高;


·行内元素:不会自动换行,行内元素左右可以有其他元素,行内元素的宽高大多是auto*auto。;


·注意:行内元素设置宽高无效(但是行内置换元素可以设置宽高,下面有详细解释)、设置上下margin无效,设置上下padding类似无效(不影响文档流排列)


   < div style = "border:1px solid red;width:400px;" > 设置块级元素的宽,依旧会自动换行,因为它要独占一行 div >
   < span style = "border:1px solid purple;width:200px;height:25px;" > 行内元素设置宽高无效 span >
   < span style = "border:1px solid blue;margin:20px;" > 行内元素设置上下的margin无效 span >
   < span style = "border:1px solid blue;padding:20px;" > 行内元素设置上下的padding也无效 span >< br >
   < div > 块状元素多行多行文字,块状元素多行多行文字,块状元素多行多行文字,块状元素多行多行文字,块状元素多行多行文字,块状元素多行多行文字 div >



行内元素怎么样可设置宽高

当然使用display:block;和display:inline-block;样式可以实现转换为块级元素和行内块级元素(可设置宽高的行内元素),行内元素还可以通过添加float来设置宽高,因为不论什么元素本身是什么,当它浮动时就会生成一个块级框;

      < span style = "display: inline-block;width:400px;height:60px;border:1px solid blue;" > 当使用display:inline-block;后,行内元素可以设置宽高 span >
      < span style = "display: block;height:60px;border:1px solid purple;" > 当使用display:block;行内元素转为块级元素 span >
      < span style = "float: left;width:400px;height:60px ;border:1px solid orangered;" > 使用float,任何元素自身会生成一个块级框,这是因为触发了BFC span >




但是还有另外一种分类方式:可替换元素和不可替换元素的分类


·替换元素:替换元素根据其标签和属性来决定元素的具体显示内容,