Question

这可能是一个有点愚蠢的问题，但对于那些像我一样没有css经验的人来说并不是那么容易。问题是我正在尝试在我的项目中实现一个登录例程。当然你需要配置css，路径等。

问题是配置具有以下说明的登录面板：

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

这使得每个应用程序中的所有框都变形了。我该如何解决这个问题？我试图命名调用它的div，并将名称更改为*这个div。但没有做。有人可以帮帮我吗？

echo '<div class="container">           
            <section class="main">
            <form class="form-1" id="login" method="post">
            <p class="field">
                <input type="text" name="login" id="username" placeholder="Nº Funcionario">
                <i class="icon-user icon-large"></i>
            </p>
                <p class="field">
                <input type="password" name="password" id="password" placeholder="Senha">
                <i class="icon-lock icon-large"></i>
            </p>
            <p class="submit">
                <button type="submit" value="Login" id="loginme" name="submit">
                <i class="icon-arrow-right icon-large"></i></button>
            </p>
            </form>
            </section></div>';

Answer 1

我建议不要使用边框。

默认情况下，元素的宽度计算如下：

width =设置宽度属性+填充+边框宽度

边框框，表示宽度的计算方式不同，还有其他属性可用于填充框大小的框大小。

删除所有这些，很可能是某人正在寻找对特定问题的快速和丑陋的修复。

许多浏览器也不支持大小调整，但所有浏览器都支持宽度。你一定会遇到使用它的重大问题。

Answer 2

如果使用标准盒子模型计算了所有元素的宽度，则不能将其放在顶部。 *和div都涵盖了很多元素。如果一个元素需要box-sizing: border-box，则只为该元素指定它：

div.foo,
div.foo:after,
div.foo:before {
    /* ... */
}

Box Sizing unformat整个页面

2 个答案: