浏览器对待不同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;即可将其转换为行内元素。