Web前端线上系统课-01-HTML+CSS/09-CSS元素的定位和浮动

最新推荐文章于 2024-07-10 16:57:46 发布
最新推荐文章于 2024-07-10 16:57:46 发布
阅读量151 收藏
点赞数
文章标签： html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coderlb/article/details/124178709
版权

CSS元素的定位和浮动

画布和窗口的区别

视口和画布的区别.png

position

标准流布局

相对定位

固定定位

绝对定位

  • 元素脱离标准流
    • absolute
      • left/right/top/right
      • 定位参考对象是最邻近的定位祖先元素
      • 如果找不到这样的祖先元素，参考对象是画布
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      strong {
        position: absolute;
      }
    </style>
  </head>
  <body>
    <span>我是span元素</span>
    <strong>我是strong元素</strong>
    <img src="../images/gouwujie01.jpg" alt="" />
    <div>我是div元素</div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 800px;
        height: 600px;
        background-color: #0f0;
      }

      strong {
        position: absolute;
        right: 0;
        top: 0;
      }

      img {
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span>我是span元素</span>
      <strong>我是strong元素</strong>
      <img src="../images/gouwujie01.jpg" alt="" />
      <div>我是div元素</div>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 1000px;
        height: 800px;
        background-color: #f00;
        position: fixed;
        top: 0;
      }

      .box {
        width: 800px;
        height: 600px;
        background-color: #0f0;
      }

      strong {
        position: absolute;
        right: 0;
        top: 0;
      }

      img {
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div>哈哈哈哈</div>
    <div class="container">
      <div class="box">
        <span>我是span元素</span>
        <strong>我是strong元素</strong>
        <img src="../images/gouwujie01.jpg" alt="" />
        <div>我是div元素</div>
      </div>
    </div>
    <div>呵呵呵呵</div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 1000px;
        height: 800px;
        background-color: #f00;
        position: relative;
        top: 0;
      }

      .box {
        width: 800px;
        height: 600px;
        background-color: #0f0;
      }

      strong {
        position: absolute;
        right: 0;
        top: 0;
      }

      img {
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div>哈哈哈哈</div>
    <div class="container">
      <div class="box">
        <span>我是span元素</span>
        <strong>我是strong元素</strong>
        <img src="../images/gouwujie01.jpg" alt="" />
        <div>我是div元素</div>
      </div>
    </div>
    <div>呵呵呵呵</div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 1000px;
        height: 800px;
        background-color: #f00;
        position: relative;
        top: 0;
      }

      .box {
        width: 800px;
        height: 600px;
        background-color: #0f0;
        position: relative;
      }

      strong {
        position: absolute;
        right: 0;
        top: 0;
      }

      img {
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div>哈哈哈哈</div>
    <div class="container">
      <div class="box">
        <span>我是span元素</span>
        <strong>我是strong元素</strong>
        <img src="../images/gouwujie01.jpg" alt="" />
        <div>我是div元素</div>
      </div>
    </div>
    <div>呵呵呵呵</div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 1000px;
        height: 800px;
        background-color: #f00;
        position: relative;
        top: 0;
      }

      .box {
        width: 800px;
        height: 600px;
        background-color: #0f0;
        position: relative;
        /* 不知道为什么无效 */
        right: 0;
        bottom: 0;
      }

      strong {
        position: absolute;
        right: 0;
        top: 0;
      }

      img {
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div>哈哈哈哈</div>
    <div class="container">
      <div class="box">
        <span>我是span元素</span>
        <strong>我是strong元素</strong>
        <img src="../images/gouwujie01.jpg" alt="" />
        <div>我是div元素</div>
      </div>
    </div>
    <div>呵呵呵呵</div>
  </body>
</html>

定位元素

  • position的值不为static的元素
  • 也就是position的值为relative，absolute，fixed的元素
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 800px;
        height: 800px;
        background-color: #f00;
        position: relative;
      }

      .box {
        width: 500px;
        height: 500px;
        background-color: #0f0;
        position: absolute;
        right: 0;
        bottom: 0;
      }

      strong {
        position: absolute;
        left: 0;
        bottom: 0;
      }

      img {
        width: 100px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">
        <span>我是span元素</span>
        <strong>我是strong元素</strong>
        <img src="../images/gouwujie01.jpg" alt="" />
        <div>我是div元素</div>
      </div>
    </div>
  </body>
</html>

绝对定位元素的特点

  • 可以随意设置宽高
  • 宽度默认由内容决定
  • 不再受标准流的约束
    • 不再严格按照从上到下，从左到右排布
    • 不再严格区分块级，行内级，行内块级的很多特性都会消失
  • 不再给父元素汇报宽高数据
  • 脱离元素的内部还是按照标准流布局
  • position的值为abosolute和fixed
  • 定位参照对象的宽度
    • left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度
    • 800 = 0 + 0 + 0 + 0 + 800
  • 定位参照对象的高度
    • top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 800px;
        height: 800px;
        background-color: #f00;
        position: relative;
      }

      .box {
        width: 500px;
        height: 500px;
        background-color: #0f0;
        position: absolute;
        right: 0;
        bottom: 0;
      }

      strong {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 200px;
        height: 60px;
        background-color: #00f;
      }

      img {
        width: 100px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">
        <span>我是span元素</span>
        <strong>我是strong元素</strong>
        <img src="../images/gouwujie01.jpg" alt="" />
        <div>我是div元素</div>
      </div>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        background-color: #f00;
      }

      .box strong {
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <strong>我是strong元素</strong>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        background-color: #f00;
      }

      .box strong {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: #0f0;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <strong>
        <span>我是strong元素</span>
        <i>我是i元素</i>
      </strong>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 800px;
        height: 300px;
        background-color: #f00;
        position: relative;
      }

      .container {
        /* width: 200px; */
        height: 100px;
        background-color: #0f0;
        position: absolute;
        /* top: 0; */
        right: 0;
        bottom: 0;
        left: 0;
        /* left: 0; */
        /* margin: auto; */
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="container"></div>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 800px;
        height: 300px;
        background-color: #f00;
        position: relative;
      }

      .container {
        /* width: 200px; */
        height: 100px;
        background-color: #0f0;
        position: absolute;
        /* top: 0; */
        /* right: 0; */
        width: 100%;
        bottom: 0;
        left: 0;
        /* left: 0; */
        /* margin: auto; */
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="container"></div>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 800px;
        height: 300px;
        background-color: #f00;
        position: relative;
      }

      .container {
        width: 200px;
        height: 100px;
        background-color: #0f0;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="container"></div>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 800px;
        height: 300px;
        background-color: #f00;
        position: relative;
      }

      .container {
        width: 200px;
        height: 100px;
        background-color: #0f0;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="container"></div>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 800px;
        height: 300px;
        background-color: #f00;
        position: relative;
      }

      .container {
        /* width: 200px; */
        height: 100px;
        background-color: #0f0;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        /* 宽度未设置的情况下，优先分配给width，使其盛满所谓的定位元素 */
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="container"></div>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 800px;
        height: 300px;
        background-color: #f00;
        position: relative;
      }

      .container {
        /* width: 200px; */
        height: 100px;
        background-color: #0f0;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="container"></div>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 800px;
        height: 300px;
        background-color: #f00;
        position: relative;
      }

      .container {
        /* width: 200px; */
        height: 100px;
        background-color: #0f0;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="container"></div>
    </div>
  </body>
</html>

绝对定位的练习

网易云item定位案例.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      a {
        text-decoration: none;
        color: #333;
        outline: none;
      }

      .item {
        width: 140px;
        height: 140px;
        margin: 0 auto;
      }

      .item .top {
        background-color: red;
        position: relative;
      }

      .item .top img {
        /* 将图片下面的多出来的区域去掉 */
        /* vertical-align: top; */
        display: block;
      }

      .item .top .cover {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: url("../images/coverall.png");
        background-repeat: no-repeat;
        background-position: 0 0;
      }

      .item .top .info {
        color: #fff;
        position: absolute;
        padding-left: 10px;
        left: 0;
        right: 0;
        bottom: 0;
        height: 27px;
        line-height: 27px;
        font-size: 12px;
        background-image: url("../images/coverall.png");
        background-position: 0 -537px;
      }

      .item .top .info .icon-music {
        display: inline-block;
        position: relative;
        /* margin-left: 10px; */
        top: 1px;
        width: 14px;
        height: 11px;
        background-image: url("../images/iconall.png");
        background-repeat: no-repeat;
        background-position: 0 -24px;
      }

      .item .top .info .count {
        margin-left: 4px;
      }

      .item .top .info .icon-play {
        position: absolute;
        display: inline-block;
        top: 0;
        bottom: 0;
        right: 10px;
        margin: auto 0;
        width: 16px;
        height: 17px;
        background-image: url("../images/iconall.png");
        background-repeat: no-repeat;
        background-position: 0 0;
      }

      .item .bottom {
        display: block;
        font-size: 14px;
      }

      .item .bottom:hover {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <div class="item">
      <div class="top">
        <img src="../images/109951166884472394.jpg" alt="" />
        <a class="cover" href="#"></a>
        <div class="info">
          <i class="icon-music"></i>
          <span class="count">62万</span>
          <i class="icon-play"></i>
        </div>
      </div>
      <a class="bottom" href="#">短视频变装神曲【舞曲 卡点 慢摇】</a>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      a {
        text-decoration: none;
        color: #333;
        outline: none;
      }

      .coverall {
        background-image: url("../images/coverall.png");
        background-repeat: no-repeat;
      }

      .iconall {
        background-image: url("../images/iconall.png");
        background-repeat: no-repeat;
      }

      .item {
        width: 140px;
        height: 140px;
        margin: 0 auto;
      }

      .item .top {
        background-color: red;
        position: relative;
      }

      .item .top img {
        /* 将图片下面的多出来的区域去掉 */
        /* vertical-align: top; */
        display: block;
      }

      .item .top .cover {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-position: 0 0;
      }

      .item .top .info {
        color: #fff;
        position: absolute;
        padding-left: 10px;
        left: 0;
        right: 0;
        bottom: 0;
        height: 27px;
        line-height: 27px;
        font-size: 12px;
        background-position: 0 -537px;
      }

      .item .top .info .icon-music {
        display: inline-block;
        position: relative;
        top: 1px;
        width: 14px;
        height: 11px;
        background-position: 0 -24px;
      }

      .item .top .info .count {
        margin-left: 4px;
      }

      .item .top .info .icon-play {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 10px;
        margin: auto 0;
        width: 16px;
        height: 17px;
        background-position: 0 0;
      }

      .item .bottom {
        display: block;
        font-size: 14px;
      }

      .item .bottom:hover {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <div class="item">
      <div class="top">
        <img src="../images/109951166884472394.jpg" alt="" />
        <a class="cover coverall" href="#"></a>
        <div class="info coverall">
          <i class="icon-music iconall"></i>
          <span class="count">62万</span>
          <i class="icon-play iconall"></i>
        </div>
      </div>
      <a class="bottom" href="#">短视频变装神曲【舞曲 卡点 慢摇】</a>
    </div>
  </body>
</html>

粘性定位

  • static
    • 相对于最近的滚动祖先包含滚动视口的
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .nav {
        background-color: #f00;
        color: #fff;
        /* position: relative;
        top: 0;
        left: 0;
        right: 0; */
        position: sticky;
        top: 0;
      }
    </style>
  </head>
  <body>
    <h1>我是标题</h1>
    <div class="nav">
      <span>电脑</span>
      <span>手机</span>
      <span>衣服</span>
      <span>鞋子</span>
    </div>
    <ul>
      <li>电脑列表1</li>
      <li>电脑列表2</li>
      <li>电脑列表3</li>
      <li>电脑列表4</li>
      <li>电脑列表5</li>
      <li>电脑列表6</li>
      <li>电脑列表7</li>
      <li>电脑列表8</li>
      <li>电脑列表9</li>
      <li>电脑列表10</li>
      <li>电脑列表11</li>
      <li>电脑列表12</li>
      <li>电脑列表13</li>
      <li>电脑列表14</li>
      <li>电脑列表15</li>
      <li>电脑列表16</li>
      <li>电脑列表17</li>
      <li>电脑列表18</li>
      <li>电脑列表19</li>
      <li>电脑列表20</li>
      <li>电脑列表21</li>
      <li>电脑列表22</li>
      <li>电脑列表23</li>
      <li>电脑列表24</li>
      <li>电脑列表25</li>
      <li>电脑列表26</li>
      <li>电脑列表27</li>
      <li>电脑列表28</li>
      <li>电脑列表29</li>
      <li>电脑列表30</li>
      <li>电脑列表31</li>
      <li>电脑列表32</li>
      <li>电脑列表33</li>
      <li>电脑列表34</li>
      <li>电脑列表35</li>
      <li>电脑列表36</li>
      <li>电脑列表37</li>
      <li>电脑列表38</li>
      <li>电脑列表39</li>
      <li>电脑列表40</li>
      <li>电脑列表41</li>
      <li>电脑列表42</li>
      <li>电脑列表43</li>
      <li>电脑列表44</li>
      <li>电脑列表45</li>
      <li>电脑列表46</li>
      <li>电脑列表47</li>
      <li>电脑列表48</li>
      <li>电脑列表49</li>
      <li>电脑列表50</li>
      <li>电脑列表51</li>
      <li>电脑列表52</li>
      <li>电脑列表53</li>
      <li>电脑列表54</li>
      <li>电脑列表55</li>
      <li>电脑列表56</li>
      <li>电脑列表57</li>
      <li>电脑列表58</li>
      <li>电脑列表59</li>
      <li>电脑列表60</li>
      <li>电脑列表61</li>
      <li>电脑列表62</li>
      <li>电脑列表63</li>
      <li>电脑列表64</li>
      <li>电脑列表65</li>
      <li>电脑列表66</li>
      <li>电脑列表67</li>
      <li>电脑列表68</li>
      <li>电脑列表69</li>
      <li>电脑列表70</li>
      <li>电脑列表71</li>
      <li>电脑列表72</li>
      <li>电脑列表73</li>
      <li>电脑列表74</li>
      <li>电脑列表75</li>
      <li>电脑列表76</li>
      <li>电脑列表77</li>
      <li>电脑列表78</li>
      <li>电脑列表79</li>
      <li>电脑列表80</li>
      <li>电脑列表81</li>
      <li>电脑列表82</li>
      <li>电脑列表83</li>
      <li>电脑列表84</li>
      <li>电脑列表85</li>
      <li>电脑列表86</li>
      <li>电脑列表87</li>
      <li>电脑列表88</li>
      <li>电脑列表89</li>
      <li>电脑列表90</li>
      <li>电脑列表91</li>
      <li>电脑列表92</li>
      <li>电脑列表93</li>
      <li>电脑列表94</li>
      <li>电脑列表95</li>
      <li>电脑列表96</li>
      <li>电脑列表97</li>
      <li>电脑列表98</li>
      <li>电脑列表99</li>
      <li>电脑列表100</li>
    </ul>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 500px;
        height: 500px;
        margin: 100px auto 0;
        overflow: scroll;
        background-color: #ccc;
      }

      .nav {
        background-color: #f00;
        color: #fff;
        position: sticky;
        top: 0;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <h1>我是标题</h1>
      <div class="nav">
        <span>电脑</span>
        <span>手机</span>
        <span>衣服</span>
        <span>鞋子</span>
      </div>
      <ul>
        <li>电脑列表1</li>
        <li>电脑列表2</li>
        <li>电脑列表3</li>
        <li>电脑列表4</li>
        <li>电脑列表5</li>
        <li>电脑列表6</li>
        <li>电脑列表7</li>
        <li>电脑列表8</li>
        <li>电脑列表9</li>
        <li>电脑列表10</li>
        <li>电脑列表11</li>
        <li>电脑列表12</li>
        <li>电脑列表13</li>
        <li>电脑列表14</li>
        <li>电脑列表15</li>
        <li>电脑列表16</li>
        <li>电脑列表17</li>
        <li>电脑列表18</li>
        <li>电脑列表19</li>
        <li>电脑列表20</li>
        <li>电脑列表21</li>
        <li>电脑列表22</li>
        <li>电脑列表23</li>
        <li>电脑列表24</li>
        <li>电脑列表25</li>
        <li>电脑列表26</li>
        <li>电脑列表27</li>
        <li>电脑列表28</li>
        <li>电脑列表29</li>
        <li>电脑列表30</li>
        <li>电脑列表31</li>
        <li>电脑列表32</li>
        <li>电脑列表33</li>
        <li>电脑列表34</li>
        <li>电脑列表35</li>
        <li>电脑列表36</li>
        <li>电脑列表37</li>
        <li>电脑列表38</li>
        <li>电脑列表39</li>
        <li>电脑列表40</li>
        <li>电脑列表41</li>
        <li>电脑列表42</li>
        <li>电脑列表43</li>
        <li>电脑列表44</li>
        <li>电脑列表45</li>
        <li>电脑列表46</li>
        <li>电脑列表47</li>
        <li>电脑列表48</li>
        <li>电脑列表49</li>
        <li>电脑列表50</li>
        <li>电脑列表51</li>
        <li>电脑列表52</li>
        <li>电脑列表53</li>
        <li>电脑列表54</li>
        <li>电脑列表55</li>
        <li>电脑列表56</li>
        <li>电脑列表57</li>
        <li>电脑列表58</li>
        <li>电脑列表59</li>
        <li>电脑列表60</li>
        <li>电脑列表61</li>
        <li>电脑列表62</li>
        <li>电脑列表63</li>
        <li>电脑列表64</li>
        <li>电脑列表65</li>
        <li>电脑列表66</li>
        <li>电脑列表67</li>
        <li>电脑列表68</li>
        <li>电脑列表69</li>
        <li>电脑列表70</li>
        <li>电脑列表71</li>
        <li>电脑列表72</li>
        <li>电脑列表73</li>
        <li>电脑列表74</li>
        <li>电脑列表75</li>
        <li>电脑列表76</li>
        <li>电脑列表77</li>
        <li>电脑列表78</li>
        <li>电脑列表79</li>
        <li>电脑列表80</li>
        <li>电脑列表81</li>
        <li>电脑列表82</li>
        <li>电脑列表83</li>
        <li>电脑列表84</li>
        <li>电脑列表85</li>
        <li>电脑列表86</li>
        <li>电脑列表87</li>
        <li>电脑列表88</li>
        <li>电脑列表89</li>
        <li>电脑列表90</li>
        <li>电脑列表91</li>
        <li>电脑列表92</li>
        <li>电脑列表93</li>
        <li>电脑列表94</li>
        <li>电脑列表95</li>
        <li>电脑列表96</li>
        <li>电脑列表97</li>
        <li>电脑列表98</li>
        <li>电脑列表99</li>
        <li>电脑列表100</li>
      </ul>
    </div>
  </body>
</html>

position值对比.png

z-index

  • 用来设置定位元素的层叠顺序
    • 仅对定位元素有效
    • 取值
      • 正整数
      • 0
      • 负整数
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .item {
        position: absolute;
        width: 100px;
        height: 100px;
        left: 0;
        top: 0;
        background-color: #f00;
      }

      .box2 {
        left: 20px;
        top: 20px;
        background-color: #0f0;
        z-index: -1;
      }

      .box3 {
        left: 40px;
        top: 40px;
        background-color: #00f;
      }
    </style>
  </head>
  <body>
    <div class="item box1">1</div>
    <div class="item box2">2</div>
    <div class="item box3">3</div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .item {
        position: absolute;
        width: 100px;
        height: 100px;
        left: 0;
        top: 0;
        background-color: #f00;
      }

      .box2 {
        left: 20px;
        top: 20px;
        background-color: #0f0;
        z-index: -1;
      }

      .box3 {
        left: 40px;
        top: 40px;
        background-color: #00f;
      }
    </style>
  </head>
  <body>
    <div class="item box1">1</div>
    <div class="container">
      <div class="item box2">2</div>
    </div>
    <div class="item box3">3</div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .item {
        position: absolute;
        width: 100px;
        height: 100px;
        left: 0;
        top: 0;
        background-color: #f00;
      }

      .box2 {
        left: 20px;
        top: 20px;
        background-color: #0f0;
        z-index: -1;
      }

      .box3 {
        left: 40px;
        top: 40px;
        background-color: #00f;
      }

      .info {
        position: absolute;
        /* 无效，因为z-index比较关系的问题 */
        z-index: 999;
      }
    </style>
  </head>
  <body>
    <div class="item box1">1</div>
    <div class="container">
      <div class="item box2">
        <div class="info">哈哈哈</div>
      </div>
    </div>
    <div class="item box3">3</div>
  </body>
</html>

z-index比较.png

浮动

认识浮动

认识浮动.png

规则一

  • 元素一旦浮动后，脱离标准流
    • 朝着向左或者向右方向，直到自己的边界紧贴着包含块(一般是父元素)或者其他浮动元素的边界为止
    • 定位元素会层叠在浮动元素上面

浮动元素规则一.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      .item1,
      .item2 {
        background-color: #f00;
      }

      .item1 {
        /* 定位脱离标准流 */
        position: fixed;
        left: 0;
        top: 10px;
        /* 脱离标准流 */
        /* float: left; */
        background-color: #0f0;
      }
    </style>
  </head>
  <body>
    <div class="item1">1</div>
    <div class="item2">2</div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      .item1,
      .item2 {
        background-color: #f00;
      }

      .item1 {
        /* 定位脱离标准流 */
        /* position: fixed;
        left: 0;
        top: 10px; */
        /* 脱离标准流 */
        float: left;
        background-color: #0f0;
      }
    </style>
  </head>
  <body>
    <div class="item1">1</div>
    <div class="item2">2</div>
  </body>
</html>

规则二

  • 如果元素是向左(右)浮动，浮动元素的左(右)边界不能超出包含块的左(右)边界

浮动规则二.png

规则三

  • 浮动元素之间不能重叠

浮动元素规则三.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .item {
        width: 100px;
        height: 100px;
        background-color: #f00;
      }

      .box1 {
        float: left;
        background-color: #0f0;
        margin-left: 20px;
      }

      .box2 {
        float: left;
      }

      .box3 {
        float: left;
      }
    </style>
  </head>
  <body>
    <!-- 浮动元素之间不能层叠 -->
    <div class="item box1">1</div>
    <div class="item box2">2</div>
    <div class="item box3">3</div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 500px;
        height: 500px;
        background-color: orange;
      }

      .item {
        width: 100px;
        height: 100px;
        background-color: #f00;
      }

      .box1 {
        float: left;
        background-color: #0f0;
        margin-left: 20px;
      }

      .box2 {
        float: left;
      }

      .box3 {
        float: left;
      }

      .box4 {
        width: 200px;
        height: 100px;
        background-color: purple;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item box1">1</div>
      <div class="item box2">2</div>
      <div class="item box3">3</div>
      <div class="item box4">4</div>
    </div>
  </body>
</html>

规则四

  • 浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出

浮动规则四.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 1000px;
        height: 400px;
        background-color: orange;
      }

      .box strong {
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span>我是span元素</span>
      <strong>我是strong元素</strong>
      <i>我是i元素</i>
      <div>我是普通的内容</div>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 500px;
        background-color: orange;
      }

      .box img {
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="box">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero perferendis
      consequuntur nisi similique reiciendis nostrum repudiandae quos tenetur
      corrupti veritatis rerum voluptatibus nam doloribus odit id eum, autem
      quis beatae.
      <img src="../images/109951166884472394.jpg" alt="" />
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio rerum
      recusandae totam officia rem debitis, odio inventore exercitationem modi
      eum reiciendis quis vel! Pariatur magnam tenetur doloremque explicabo ea
      autem.
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 500px;
        background-color: orange;
      }

      .box img {
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="../images/109951166884472394.jpg" alt="" />
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio rerum
      recusandae totam officia rem debitis, odio inventore exercitationem modi
      eum reiciendis quis vel! Pariatur magnam tenetur doloremque explicabo ea
      autem.lorem Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa
      rerum ratione reprehenderit nostrum autem atque earum vitae, sunt, odit
      est reiciendis beatae nesciunt officia assumenda voluptate, consequuntur
      eum cum dolor.
    </div>
  </body>
</html>

规则五

浮动规则五.png

行内元素造成的间隙

删除换行符

父元素设置font-size

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        font-size: 0;
      }
      span {
        background-color: orange;
        /* float: left; */
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span>aaa</span>
      <span>bbb</span>
      <span>ccc</span>
    </div>
  </body>
</html>

行内元素浮动

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* .box {
        font-size: 0;
      } */
      span {
        background-color: orange;
        float: left;
        /* font-size: 16px; */
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span>aaa</span>
      <span>bbb</span>
      <span>ccc</span>
    </div>
  </body>
</html>

flex布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        display: flex;
      }

      span {
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span>aaa</span>
      <span>bbb</span>
      <span>ccc</span>
    </div>
  </body>
</html>

浮动案例

浮动案例一.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      ul,
      li {
        padding: 0;
        margin: 0;
      }

      ul {
        list-style-type: none;
      }

      a {
        text-decoration: none;
        color: #333;
      }

      body {
        background-color: #f2f2f2;
      }

      ul > li {
        float: left;
        margin-right: 16px;
      }

      ul > li > a {
        display: inline-block;
        width: 36px;
        height: 36px;
        text-align: center;
        line-height: 36px;
        background-color: #fff;
        border-radius: 6px;
        color: #3951b3;
        font-size: 14px;
      }

      ul > li > a:hover,
      ul > li.active > a {
        background-color: blue;
        color: #fff;
      }

      ul > li > a.next {
        width: 80px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li class="item active"><a href="#">1</a></li>
      <li class="item"><a href="#">2</a></li>
      <li class="item"><a href="#">3</a></li>
      <li class="item"><a href="#">4</a></li>
      <li class="item"><a href="#">5</a></li>
      <li class="item"><a href="#">6</a></li>
      <li class="item"><a href="#">7</a></li>
      <li class="item"><a href="#">8</a></li>
      <li class="item"><a href="#">9</a></li>
      <li class="item"><a href="#">10</a></li>
      <li class="item"><a class="next" href="#">下一页&gt;</a></li>
    </ul>
  </body>
</html>

浮动案例二.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .content {
        width: 1190px;
        margin: 0 auto;
        background-color: orange;
        height: 800px;
      }

      .box {
        margin-right: -10px;
      }

      .item {
        float: left;
        width: 230px;
        height: 322px;
        color: #fff;
        margin-right: 10px;
        background-color: purple;
      }

      /* .item:last-child {
        margin-right: 0;
      } */

      /* .item:nth-of-type(5n) {
        margin-right: 0;
      } */

      /* .item.last-item {
        margin-right: 0;
      } */
    </style>
  </head>
  <body>
    <div class="content">
      <div class="box">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5 last-item">5</div>
      </div>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .content {
        width: 1190px;
        margin: 0 auto;
        background-color: orange;
        height: 800px;
      }

      .box {
        margin: 0 -5px;
      }

      .item {
        float: left;
        width: 230px;
        height: 322px;
        color: #fff;
        margin: 0 5px;
        background-color: purple;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="box">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
      </div>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .content {
        width: 1190px;
        margin: 0 auto;
        background-color: orange;
        height: 800px;
      }

      .box {
        margin-right: -10px;
      }

      .item {
        float: left;
        width: 230px;
        height: 322px;
        color: #fff;
        /* margin: 0 5px; */
        margin-right: 10px;
        background-color: purple;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="box">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
      </div>
    </div>
  </body>
</html>
coderlb
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web前端线上系统课-01-HTML+CSS/06-CSS盒子模型-CSS设置背景
coderlb的博客
04-14 228
CSS盒子模型-CSS设置背景 盒模型 margin <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-sc
coderwhy - WEB前端线上系统课(20K+标准) ~V:smilefell01
Aurora
10-04 829
前端
CoderWhy-Web前端线上系统课学习笔记
qq_43362244的博客
04-24 4091
浏览器的本地存储主要分为Cookie和WebStorage和IndexDB,而WebStorage又可以分为LocalStorage和sessionStorage Cookie Cookie最开始的时候不是用来做本地存储的,而是为弥补HTTP在状态管理上的不足 HTTP协议是一个无状态协议,客户端向服务端发送请求,服务器返回响应,但是如何让服务端记住下次发送请求时客户端是谁?那么久产生了Cookie Cookie本质上是浏览器内部存储的一个很小的文本文件,内部是以键值对的方式在存储.在同一个域名发送
前端开发-CSS快速掌握上手知识详细总结
weixin_45168167的博客
11-22 4784
01_CSS基础 前言 最准确的网页设计思路是把网页分成三个层次，即：结构层、表示层、行为层。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wsmkKve6-1637594225448)(images01_base/wps1.jpg)] HTML:结构层,Hyper Text Markup Language,超文本标记语言 CSS:表现层,Cascading Style Sheets，层叠样式表 JS:行为层,JavaScript，客户端脚本语言 **网页的结构层（stru
初学者-CSS浮动思维导图
weixin_58121163的博客
06-24 227
在css中，浮动是一种使元素脱离文档流的方法,会使元素根据float的值向左或向右移动,其周围的元素也会重新排列,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
Web前端网页设计作业-个人网页(html+css+javascript)
07-13
在本项目中，"Web前端网页设计作业-个人网页(html+css+javascript)"是一个适合初学者的实践项目，旨在帮助学习者掌握Web前端开发的基本技能。这个项目包含了多个页面，如个人主页、个人博客、轮播相册、魔方相册、...
Web前端大作业-个人网页(html+css+javascript)
06-28
【标题】"Web前端大作业-个人网页(html+css+javascript)"揭示了这个项目的核心是构建一个基于HTML、CSS和JavaScript的个人网页。这三种技术是Web开发的基础，用于创建动态、交互式的网页内容。 HTML（HyperText ...
零基础必看的web前端HTML+CSS-视频教程网盘链接提取码下载 .txt
05-16
本课程是由浠浠呀老师为小白入门前端倾力打造的前端基础教程，是零基础小白入门前端开发的不二之选。...课程共包括 2 季，内容涵盖HTML、CSS 和 HTML5、CSS3。本次发布第一季HTML部分。 视频大小：1.7G
Web-前端html+css从入门到精通 164. column分栏布局.zip
05-23
在Web前端开发中，HTML和CSS是构建网页的基础。本知识点主要聚焦于“column分栏布局”，这是一种在网页设计中非常常见的布局方式，用于将内容按照一定的列数进行排列，如两栏、三栏或者更多栏。在描述的文件"Web-...
Web-前端html+css从入门到精通 228. PostCSS简介与安装.zip
05-23
在Web前端开发中，HTML和CSS是构建网页布局和样式的基石。然而，随着技术的不断发展，纯CSS已经无法满足一些高级特性和自动化处理的需求。PostCSS作为一个强大的工具，正逐渐成为前端开发者不可或缺的一部分。本课程...
CSS设置元素浮动--03
xym222的博客
09-01 1814
1、元素浮动–float属性 通过浮动可以使一个元素向其父元素的左侧或右侧移动，使用 float 属性来设置元素的浮动， 可选值： none 默认值 ，元素不浮动 left 元素向左浮动 right 元素向右浮动 注意： 元素设置浮动以后，水平布局的等式便不需要强制成立 元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置， 所以元素下边的还在文档流中的元素会自动向上移动 浮动的特点： 浮动元素会完全脱离文档流，不再占据文档流中的位置 设置浮动以后元素会向父元素的左侧或右侧移动 浮动元素默
CSS的定位相关(本文参考b站黑马pink老师的前端课程整理)
weixin_72322475的博客
07-08 186
总结CSS中的定位
CSS之元素浮动 (十一)：认识浮动、浮动的规则、浮动的案例、高度塌陷、清除浮动、布局方案对比
Good Good Study,Day Day Up!
05-23 1029
沿其容器左侧右侧文本和内联元素环绕它noneleftright。
web前端HTML/CSS_7（利用背景图片设置导航栏背景和css精灵图练习 ）
weixin_53068339的博客
03-19 1914
<!-- * @Author: your name * @Date: 2019-10-12 12:15:46 * @LastEditTime: 2021-03-08 14:58:39 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath: \html，css\code\exercise\07_背景重复.html --> <!DOCTYPE html>
coderwhy - WEB前端线上系统课全程直播课
yyds543a的博客
03-18 1484
性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用，请读者带着批判性的眼光来阅读本文。
mocha chai mysql_详解Vue单元测试Karma+Mocha学习笔记
weixin_39984201的博客
01-19 139
在使用vue-cli创建项目的时候，会提示要不要安装单元测试和e2e测试。既然官方推荐我们使用这两个测试框架，那么我们就动手去学习实践一下他们吧。简介KarmaKarma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner)。该工具在Vue中的主要作用是将项目运行在各种主流Web浏览器进行测试。换句话说，它是一个测试工具，能让你的代码在浏览器环境下测试。需要它...
HTML5新增的input元素属性：placeholder、required、autofocus、min、max等
pan_junbiao的博客
07-08 545
HTML5 大幅度地增加与改良了 input 元素的属性，可以简单地使用这些属性来实现 HTML5 之前需要使用 JavaScript 才能实现的许多功能。 placeholder 属性：当用户没有输入值时，输入型控件可以通过placeholder 属性向用户显示描述说明或者提示信息。使用placeholder 属性只需要将说明性文字作为该属性的值即可。除了普通的文本输入框，email、number、url 等其他类型的输入框也都支持placeholder 属性。
html5——列表、表格
jiuyuexixi的博客
07-10 726
html5——列表、表格
html5——表单
最新发布
jiuyuexixi的博客
07-10 1108
html5——表单
web课程设计 网页制作 包含HTML css js
11-23
"该课程是关于Web前端开发的实践教程，涵盖了HTML、CSS和JavaScript的基础与应用，旨在教授网页制作的全过程，从站点建立、页面布局到样式定义和交互实现。" 在这门Web课程设计中，学生将学习如何制作网页，内容...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值