前端学习过程中遇到的问题 --不断总结

一、input::before失效

原因：很多类型的input都不支持伪类，buttom 、 number 、text 、 email 等等。

原代码
//html
<input type="text">
//css
nav .daohang input::before{
    content: '';
    position: absolute;
    left: 2px;
    top: 4px;
    width: 18px;
    height: 18px;
    /* ps */
    /* background-color: red; */
    background: url('../images/sprites.png') -80px -70px;	
}

解决办法：input外面套上了另一个div 不对input使用伪类 对div使用

html  
 <div class="search">
     <input type="search">
  </div>

css


.search {
    position: relative;
    float: left;
  }
  
  .search::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 4px;
    width: 18px;
    height: 18px;
    /* ps */
    /* background-color: red; */
    background: url('../images/sprites.png') -80px -70px;
  }
  
.search input {
    width: 172px;
    height: 31px;
    /* vertical-align: center; */
    padding-left: 31px;
    border-bottom: 2px solid #e7e7e7;
  }

二、使行内元素宽高生效的几种方法

1.将行内元素转换为行内块元素或者块元素

2.赋予定位、

定位的特殊特性，【绝对定位会使行内元素具有行内元素的特点，行内元素的宽高由内容决定】

3.赋予浮动

float就是隐性的把内联元素转化为块元素，这是对内部的特性就是有物理特性，但是他不占据一行。对外是内联元素的属性。他有个坏处就是会影响兄弟元素。相当于：display:inline-block;