简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
css - 遇到一个样式问题
伊谢尔伦
伊谢尔伦 2017-04-17 13:02:34
0
6
488

就是想做个小验证 如果没有输入内容就在失去焦点时把边框变成红色 我是这么设置的样式1px solid red 代码运行没问题 但是鼠标离开输入框时边框不但变成了红色还有一个细微的变化就是失去焦点的这一行和上一行的间距缩小了那么一点 就是margin-top发生了变化 我把失去焦点的边框变成2px solid red间距就没变化 但是改成2px就太难看了 这个应该怎么办呢？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        
    </title>
    <style type="text/css">
    p input{display: inline-block;width: 200px;height: 20px;}
    p .span1{display: inline-block;width: 90px;height: 20px;text-align: left;margin-top: 20px;}
    p #sp1,#sp2,#sp3,#sp4{display: inline-block;width: 160px;height: 20px;}
    </style>
    <script src="ajax"></script>
    <script type="text/javascript">
        window.onload=function(){
            var oInput=document.getElementsByTagName('input');
            var oIpt
            for(i=0;i<oInput.length;i++){
                oInput[i].onblur=function(){
                  if(this.value==''){
                      this.style.border='1px solid red';
                  }
                }
            }
        }
    </script>
</head>
<body>
<p>
    <form>
        <span class="span1">用 户 名:</span><input type="text" id="ipt1"><span id="sp1"></span><br />
        <span class="span1">密　　码:</span><input type="password" id="ipt2"><span id="sp2"></span><br />
        <span class="span1">确认密码:</span><input type="password" id="ipt3"><span id="sp3"></span><br />
        <span class="span1">邮　　箱:</span><input type="text" id="ipt4"><span id="sp4"></span><br />
        <button type="submit">提交</button>
    </form>
</p>
</body>
</html>
伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全部回复(6)
洪涛
洪涛2017-04-17 13:04:34 6 楼 
p input{display: inline-block;width: 200px;height: 20px;border:1px solid #ccc}
点赞 +0
添加回复
PHPzhong
PHPzhong2017-04-17 13:04:34 5 楼

试一下把每一行都用p包起来并且设margin，取消input的margin

点赞 +0
添加回复
Ty80
Ty802017-04-17 13:04:34 4 楼

给p input加个border样式不就行了

点赞 +0
添加回复
阿神
阿神2017-04-17 13:04:34 3 楼

input默认border-size是2px，在程序中修改为1px后，占用的空间小了，因此可以看到其他元素都往上移动了一点。
解决方式是设置input默认的边框为1px

input {
    border: 1px solid silver;
}
点赞 +0
添加回复
PHPzhong
PHPzhong2017-04-17 13:04:34 2 楼

题主提到的：

失去焦点的这一行和上一行的间距缩小了那么一点 就是margin-top发生了变化

这一点是有误的，margin-top并不会变化，真实的情况是这样：

input元素的默认border是2px，因此动态修改为1px后会有一个抖动。如@zhangpenglin的回答那样把初始的input的border设置为1px就可以了。

点赞 +0
添加回复
迷茫
迷茫2017-04-17 13:04:34 1 楼

设置 box-sizing: border-box; 可以让边框的粗细不影响整个内容的宽高；box-sizing：content-box | border-box
默认值：content-box
适用于：所有接受width和height的元素
继承性：无
动画性：否
计算值：指定值

content-box： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )
此属性表现为标准模式下的盒模型。
border-box： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )
此属性表现为怪异模式下的盒模型。

点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！