[西安|荣耀师兄]UI-阮少凡|2018年11月08日的日报-技能树.IT修真院

发表于： 2018-11-08 22:38:42

1 878

今天完成的事：

一.学习了一些新的理论知识：

先来了解一下block元素和inline元素在文档流中的排列方式。
　　block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；
　　inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效。inline元素的margin和padding属性。水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等
----------------------------------------------------------------------------

2.文档流

所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

    只有绝对定位absolute和浮动float才会脱离文档流。
----------------------------------------------------------------------------

---部分无视和完全无视的区别？需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围(可以说是部分无视)。而对于使用absolute position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。(可以说是完全无视)
    [1]浮动-定义：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的浮动框之后的块框表现得就像浮动框不存在一样。（注意这里是块框而不是内联元素；浮动框只对它后面的元素造成影响）
问题1：浮动元素后跟block元素&浮动元素后跟inline元素对布局的影响
浮动的框之后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列

3.绝对定位（absolute）：
　　当一个DIV块的位置被定义为绝对定位的时候，也就意味着它失去了文档流的位置，后面的文档流会紧跟着补上来接替它的位置。如果上下左右的绝对偏移量都是零，那么它将漂浮在原来的位置上。否则就会以浏览器的上下左右四边为基准进行偏移。
　　相对定位（relative）:
　　当设了相对的偏移量之后，这个DIV原来所占据的位置（文档流）不会被下面的DIV块挤占，而是空在那里；当偏移后向下或者向右的内容会被隐藏，而这一点区别于绝对定位，绝对定位会出现滚动条。但是向左或者向右的内容超出当前浏览器的视线，无论是相对还是觉得定位，超出的部分都会被隐藏。
　　区别如下：
　　1、相对定位不会失去文档流中的位置，而绝对定位和固定定位都会失去原来在文档流中的位置而被下面的替代；
　　2、无论是相对、绝对还是固定定位，当偏移量超出上面、左边浏览器窗体（或者说超出可视区域）的时候，超出的内容都会被隐藏；而超出下面和右边的时候，相对定位和固定定位会隐藏超出的部分内容，而绝对定位会出现滚动条。
　　3、相对、绝对和固定定位都会浮在正常文档流的上面，如果遮盖了正常显示的文档流，可以设置z-index来消除。

二，完成任务四的页面布局和css构架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务四</title>
    <link rel="stylesheet" href="../css/task4.css">
    <meta name="viewport" content="width=device-width", initial-scale=1, user-scalable=no",>
</head>
<body>
<header>
    <div class="register">注册</div>
    <div class="login">登录</div>
    <div class="close">关闭</div>
</header>
<main>
    <div class="iphone">
         <img src="../img/iphone.png" alt="">
         <input type="text" name="firstname"
          placeholder="请输入手机号" maxlength="11" style="color: black;">
    </div>
    <div class="locked">
         <img src="../img/locked-2.png" alt="">
         <input type="password" name="firstname"
          placeholder="请输入密码" style="color: black">
    </div>
</main>
<div class="botton">
    <div class="login1">登  录</div>
</div>
<div class="forget">
    <div class="text">忘记密码？</div>
</div>
</body>
</html>
css构架如下：

tml{
    font-size:62.5%
}
body{
    margin:0;
    padding:0;
    background-color:#eff0f4;
}
header{
    background-color:#5fc0cd;
    color:white;
    height:6rem;
    width: 100%;
    /*相对定位*/
    position: relative;
}

.register{
     font-size: 1.8rem;
     position: absolute;
     left: 0%;
     padding: 1.8rem;
}
.login{
     font-size: 2rem;
    /*绝对定位*/
     position: absolute;
    /*相对于父元素的左边框浮动50%宽度*/
     left:50%;
    /*相对于盒子本身宽度向左移动盒子宽度的一半，保证盒子绝对居中*/
      transform: translateX(-50%);
      padding:1.8rem;
}
.close{
      font-size: 1.8rem;
      position: absolute;
      right:0%;
      padding: 1.8rem;

}
.iphone,.locked{
      background-color: white;
      margin-top: 1rem;
      margin-bottom: 1rem;
      width: 100%;
}
.iphone img ,.locked img{
      vertical-align: middle;
      margin-left: 1.5rem;
      margin-right: 1.5rem;
    /*边框宽度为2px，直线，颜色*/
      border-right: 2px solid #b1b9bb;
      padding-right: 1.5rem;

}
.iphone input,.locked input{
    /*没有边框*/
      border: none;
      height: 6rem;
      font-size: 1.5rem;
       color: #bfcfd7;
     /*outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。此中表示没有轮廓*/
      outline: none;
}
.botton{
       width: 100%;
       height: 6rem;
       background-color: #68cdd5;
       position: relative;
       margin-top: 4rem;
}
.login1{
       font-size: 2rem;
       color: #f3f4f6;
       position: absolute;
       left:50%;
       transform: translateX(-50%);
       padding: 1.5rem;
}
.forget{
       width: 100%;
       height: 10rem;
       position: relative;
}
.text{
      position: absolute;
      font-size: 2rem;
      olor:#5fc0cd;
      right: 1rem;
      margin-top: 1rem;
   /*添加下划线*/
      text-decoration: underline;
}