块级元素与行内元素

        浏览器对待不同html元素的“态度”是有区别的，它把html元素分成块级元素和行内元素两类来看待，行内元素又称为内联元素。当html文档元素“流入”浏览器窗口时，行内元素会自左而右水平排列，一行内放不下再自上而下排列；而块级元素是自上而下垂直排列。

        块级元素的典型行为特征是：不愿意和其他元素待在同一行（当然这是浏览器的安排），隐含样式display：block(或display: table或display:list-item)；块级元素一般是其他元素的容器，可容纳块级元素、行内元素、文本。常见的块级元素有div,p,h1~h6,hr,ul,ol,table,form等。

        行内元素的典型行为特征是：愿意和其他元素待在同一行（当然是本行内还有剩余空间的情况下），隐含样式display：inline; 行内元素一般可容纳行内元素（不同行内元素可容纳的行内元素不同）和文本，一般不能容纳块级元素。常见的行内元素有a,span,img,input,select,textarea,em,strong等。

         块级元素和行内元素还有一个明显特征存在区别：块级元素可以设置width和height，而行内元素一般不能设置width和height。可以这样为div和p设置样式: div,p {width:100px;height:100px;},而不能这样为a和span设置样式： a,span { width:100px;height:100px;}。如果不为块级元素设置宽度，则其宽度取决于父元素的内容宽度；如果不为块级元素设置高度，则其高度由其内容决定。行内元素宽度由其内容长度决定；高度由其内部的元素行高决定。

        之所以说行内元素“一般不能”设置宽度和高度，是因为像img,input等比较特别的行内元素，是可以设置宽度和高度的，这类比较特殊的行内元素又可称为可置换元素。可置换元素既可以和其他行内元素共处一行，也可以像块级元素一样设置宽度和高度。

        那么如果我们想要为那些“纯粹”的行内元素，譬如a或span元素设置宽度和高度，也就是说，既想让他们可以和其他行内元素共处一行，也可以像块级元素一样设置宽度和高度，是否能办到呢？答案是肯定的。可以设置样式规则display: inline-block;比如：a{display:  inline-block;width: 100px; height: 100px;}，就像“伪娘”或“双性人”一样，既有男性特征又有女性特征。

        那么如果我们想让行内元素彻底“变性”为块级元素，是否能办到呢？答案依然是肯定的。只要为行内元素设置样式规则display:block;即可。同理，为块级元素设置样式规则display: inline;即可将其转换为行内元素。