Question

仅使用html和css设计facebook登录页面进行练习。但在这里我遇到了一些问题。我不知道它是什么。我想减少课程的最高余量＆＃34 ; loginArea＆＃34;但是不能这样做。所以facebook的标识很好，但登录区域与真正的facebook页面完全不同。

＆＃13;

body {
  margin: 0;
  padding: 0;
  font-family: arial;
}

.logoArea {
  height: 35px;
  width: 100px;
  background: url(media/6cVHHozUQSt.png) no-repeat;
  display: inline-block;
  overflow: hidden;
  margin: 40px 40px 0 200px;
}

.mainArea {
  max-width: 1600px;
  margin: auto;
}

header.mainHeader:after {
  content: "";
  display: block;
  clear: both;
}

header.mainHeader {
  background: #3a5797;
  padding: 10px 0;
  color: #fff;
}

.mainHeader .logoArea {
  width: 50%;
  float: left;
}

.mainHeader .loginArea {
  float: right;
  width: 50%;
}

.loginArea .userName,
.loginArea .password {
  width: 40%;
  float: left;
}

.loginArea input[type="text"],
.loginArea input[type="password"] {
  width: 60%;
  padding: 2px;
  border-width: 1px;
  border-color: #29487d;
  margin-bottom: 5px;
}

.loginArea .submitButton {
  width: 20%;
  float: left;
}

.loginArea label {
  font-size: 12px;
}

label[for="keepLogin"],
.loginArea a {
  font-size: 12px;
  color: #9CABC6;
}

#keepLogin {
  margin: 0;
}

.submitButton input {
  background: #3B5998;
  color: #fff;
  font-weight: bold;
  margin-top: 20px;
  border-width: 1px;
  border-color: #29487d;
  padding: 5px;
}

＆＃13;

<!DOCTYPE HTML>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <title>Facebook- Log In or Sign Up</title>
  <link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>

<body>
  <header class="mainHeader">
    <div class="mainArea">
      <div class="logoArea">
        <img id="logo" src="media/6cVHHozUQSt.png" alt="" />
      </div>
      <div class="loginArea">
        <form action="#">
          <div class="userName">
            <label for="user">Email or Phone </label> <br/>
            <input type="text" id="user" /><br/>
            <input type="checkbox" id="keepLogin" />
            <label for="keepLogin"> Keep me Logged In</label>
          </div>
          <div class="password">
            <label for="password">Password </label><br/>
            <input type="password" id="password" /><br/>
            <a href="#">Forgotten you password?</a>
          </div>
          <div class="submitButton">
            <input type="submit" value="Log In" />
          </div>
        </form>
      </div>
    </div>
  </header>
</body>

</html>

＆＃13;

Answer 1

在.loginArea类中将上边距减少为0。希望这会对你有所帮助。

margin: 0 40px 0 200px;

Answer 2

从width移除margin或.mainHeader .logoArea（或减少它），因此不会阻止过多的空间。

始终注意元素实际使用的空间是height/width + padding + margin + border，所以在您的情况下，元素的实际宽度是利润率为50％加240px。

Answer 3

您的问题是.logoArea的边距，因此您可以将框大小设置为border-box而不是margin使用填充。

box-sizing的默认值是content-box：

这是CSS标准指定的初始值和默认值。测量宽度和高度属性仅包括内容，但不包括填充，边框或边距。注意：填充，边框和保证金将在框外，例如IF .box {width：350px;}那么你应用{border：10px solid black;} RESULT {在浏览器中呈现}一个宽度为370px的框。因此，简单地将元素的维度计算为，width =内容的宽度，以及height =内容的高度（不包括边框和填充的值）。

有两种方法可以解决您的问题： 1.删除保证金 2.使用填充

将box-sizing设置为border-box + exchange margin

请检查框模型和框大小以获得更多信息：）

https://www.w3schools.com/css/css_boxmodel.asp https://developer.mozilla.org/en/docs/Web/CSS/box-sizing

Answer 4

首先在顶部，

*{
 box-sizing: border-box;
}

然后将.logoArea中的边距更改为填充。

.logoArea {
 height: 35px;
 width: 100px;
 background: url(media/6cVHHozUQSt.png) no-repeat;
 display: inline-block;
 overflow: hidden;
 padding: 10px 40px 0 45px;
}

Div标签边距不起作用

4 个答案: