css----行内元素深究

我们知道行内元素有替换元素和非替元素之分：

替换元素：浏览器根据其标签和属性来判断要显示的内容的标签，比较常见的是<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>
显示为：

image.png

其默认主要样式为：
.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>
显示为：

image.png
其默认主要样式为：
.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都会生效

行内元素今天就研究到此，以后若有新发现会在分割线下进行补充

=======================================================