初学HTML5－－CSS样式小技巧

－box-sizing:属性允许以特定的方式定义匹配某个区域的特定元素。

  例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。
  这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
如图所示情况：             在设置：border－sizing:border-box之后，就会变成如下图：
                            
－设置图片居中：vertical-align
/*设置图片*/
#pannel-foot img
{
    width: 30px;
    height: 30px;
    /*图片垂直居中*/
    vertical-align: middle;
}
－ 将图片放置input中，实现如下样式：
.html文件中写出图片和输入框，分别放入div中：
<!--用户名-->
            <div class="user-pwd">
                <img src="imgs/icon_people.png" alt="用户图标">
                <input type="text" placeholder="请输入用户名/手机号">
            </div>
            <!--密码-->
            <div class="user-pwd">
                <img src="imgs/icon_password.png" alt="用户图标">
                <input type="password" placeholder="请输入密码">
            </div>
CSS中代码：
将图片放置input中（CSS中）
1. 设置父标签position为relative
2. 设置子标签position为absolute
*/
.user-pwd
{
    /*background-color: rebeccapurple;*/
    margin-bottom: 15px;
    /*设置高度*/
    height: 38px;
    /*1.*/
    position: relative;
}
.user-pwd img{

    /* 2. */
    position: absolute;
    /*设置相对于父标签的定位*/
    left: 5px;
    top: 6px;

}