我们知道行内元素有替换元素和非替元素之分：
替换元素：浏览器根据其标签和属性来判断要显示的内容的标签，比较常见的是<img/><input/><textarea><select>等元素
非替换元素：浏览器根据其包含内容来直接显示内容的标签,如p div a b span等元素，根据其包含内容来告诉浏览器该显示什么。
但是今天我们就主要讨论行内元素里面的细节，p div等这些块级元素以后再单独作深层分析
行内元素中的替换元素与非替换元素的区别
我暂且用<b><span><a>这类代表的行内非替换元素与
<img><input><textarea><select>这类行代表的行内替换元素作比较
为了显示明显，我对元素使用了背景色处理
行内非替换元素
栗子：b标签，对文本进行加粗显示
<p>我是一个<span class="span1">加粗标签1</span>-----------初始样式</p>
显示为：
其默认主要样式为：
.span1{ display:inline; width:auto; height:auto;
行内非替换元素特点：
-
宽度和高度根据内容大小决定，设置宽高无效果
如.span2{ width:1000px; height:1000px; }
结果元素没有任何变化：
image.png -
margin上下方向不生效，padding每个方向都生效，但是上下padding并不会撑起父级元素的高度，只会撑起自身元素高度，不会排斥其他元素
如span3{ margin:10px; padding:10px; }
显示为：
image.png -
设置line-height属性，会撑起父级高度，不撑起自身高度
如：span5{ line-height:100px;
显示为：
image.png
上面是行内非替换元素的特点，其实行内非替换元素就像是我们平时说的display:inline元素，本人也测试了a标签，b标签，表现形态同上，所以我把行内非替换元素归类为有display:inline的这一类元素
行内替换元素
栗子1：input 标签 文本输入框
<p>我是一个<input type="text" placeholder="input输入框1" class="input1">-----------初始样式</p>
显示为：
其默认主要样式为：
.input1{ display:inline-block; /*width和height根据不同浏览器显示各有差异*/ }行内替换元素input的特点：
- 与非替换元素相比，input设置宽高后生效
.input2{ width:100px; height:100px; }
显示为：
image.png - 对行内替换元素input使用line-height后撑起了自身元素和父级元素的高度
.input3{ line-height:100px; }
显示为：
image.png - 那么同时设置了height和line-height呢?结果是height负责撑起元素高度，line-height此时不起作用了
我理解为，此时的行高本来是应该有效果的，只不过input元素为单行输入，没有进行换行，体现不出行高的效果，因此可以进行忽略。
- 对行内替换元素input设置margin padding均会生效，与非替换元素不一样的是input的上下padding同时会撑起父级高度
如.input4{ margin:10px; padding:10px; }
显示为：
image.png
栗子2：textarea多行输入框
以下就不多作代码演示了，大家有兴趣可以自己回去试试
textarea的特点
- width和height和标签设置的cols和rows有关,若样式设置了width和height则与样式为标准
- 若没设置width和height,则元素内容高度为line-height乘以rows，元素高度为上下margin+上下padding+内容高度
- 若设置了height属性，则元素内容高度为height值，line-height仍然起作用，只是不改变元素高度，换行时候是行高效果。
总的来说行内替换元素一般指的是display:inline-block 行内块级这类元素
可以设置宽高，margin和padding都会生效
行内元素今天就研究到此，以后若有新发现会在分割线下进行补充
=======================================================
