当前位置： 首页 > article >正文

9.[前端开发-CSS]Day09-CSS元素的定位和浮动

article 2025/2/2 6:06:54

一、CSS的浮动

1 认识浮动

认识浮动

<!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>
    body {
      margin: 0;
      overflow: 0;
    }

    .box {
      width: 200px;
      height: 200px;
      background-color: orange;
      margin: 0 auto;
      padding: 10px;
    }

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

    .item1 {
      /* 定位脱离标准流 */
      /* position: fixed;
      left: 0;
      top: 10px; */

      /* 脱离标准流 */
      float: left;
      background-color: #0f0;
    }

    .item2 {
      float: right;
    }
  </style>
</head>
<body>
  
  <div class="box">
    <div class="item1">1</div>
    <div class="item2">2</div>
  </div>

</body>
</html>

2 浮动的规则

浮动规则一

浮动规则二

浮动规则三

<!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 {
      background-color: #f00;
      width: 100px;
      height: 100px;

      /* 三个全部向左浮动: 都会脱离标准流 */
      /* float: left; */
    }

    .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>

浮动规则四

<!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;
      /* position: fixed;
      left: 0; */
    }
  </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: orange;
    }

    .box img {
      width: 300px;
      float: left;
    }
  </style>
</head>
<body>

  <div class="box">
    <img src="../images/kobe01.jpg" alt="">
    马俊宝从小热爱摄影，人生中第一部照相机是1978年买的海鸥相机，当时花了他将近半年的积蓄。从拿着相机的那一刻起，他就有一个梦想：把新疆最美的风景记录下来，让更多人看到。这个梦想在他年过半百的时候终于实现了。他的作品经常有爆款，不少视频有上亿观看量。留言里很多人赞叹新疆太美了，也有人不相信这些湖泊草原在新疆。马俊宝很开心：“我想做新疆美景的展示者，把新疆最美的一面展现给大家。”
    为了拍美食，张振新几乎跑遍了全疆，短视频的题材有大家熟悉的，也有粉丝留言推荐的，还有在网上搜索看到的。他会为了拍一种美食，乘飞机转汽车，辗转上千公里。从北疆的糖洋芋、土鸡焖饼子，再到南疆的鸽子汤、烤鱼、烤鸽子，每到一地，张振新都会和当地人聊天，听听当地人会去哪家老字号。他拍的店大多虽不起眼，但都是味道正宗、历久弥新的“宝藏店”。
  </div>

</body>
</html>

浮动规则五

3 浮动的案例

浮动练习一

1

<!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 {
      list-style: none;
      padding: 0;
      margin: 0;
    }

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

    /* 全局设置 */
    body {
      background-color: #f2f2f2;
    }

    /* 内容样式 */
    ul > li {
      float: left;
      margin-left: 12px;
    }

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

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

    ul > li.next > a {
      width: 80px;
    }

  </style>
</head>
<body>
  
  <!-- 结构: HTML -->
  <ul>
    <li class="item"><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 active"><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 next"><a href="#">下一页 &gt;</a></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>
    /* 公共的class */
    .content {
      width: 1190px;
      margin: 0 auto;
      background-color: orange;
      height: 800px;
    }

    /* 布局样式 */
    .box {
      /* margin: 0 -5px; */
      /* 3.方案三: 设置负的的margin(没有兼容性) */
      margin-right: -10px;
    }

    .item {
      width: 230px;
      height: 322px;
      background-color: purple;
      color: #fff;

      /* 浮动 */
      float: left;
      margin-right: 10px;
      /* margin: 0 5px; */
    }

    /* 1.有可能存在兼容性 */
    /* .item:nth-child(5n) {
      margin-right: 0;
    } */
    
    /* 2.麻烦一点点 */
    /* .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">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: #f00;
      height: 1000px;
    }

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

    .item {
      width: 290px;
      background-color: purple;
      margin-bottom: 10px;

      float: left;
      margin-right: 10px;
    }

    .item.left {
      height: 370px;
    }

    .item.right {
      height: 180px;
    }
  </style>
</head>
<body>
  
  <div class="content">
    <div class="wrapper">
      <div class="item left"></div>
      <div class="item left"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></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: 1100px;
      margin: 0 auto;
      height: 800px;
      background: #ccc;
    }

    .box {
      /* margin-left: 1px; */
    }

    .item {
      width: 221px;
      height: 168px;
      background: orange;
      color: #fff;

      float: left;

      border: 1px solid #000;
      margin-right: -1px;

      box-sizing: border-box;
    }

    .item.first {
      width: 220px;
    }
  </style>
</head>
<body>
  
  <div class="content">
    <div class="box">
      <div class="item first">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
  </div>

</body>
</html>

当box没设置宽度时，则是auto。

auto+box的两边的边框（宽度为2）=最外面的container的宽度(1100)

需要在box里设置

.box{

      border:1px solid black;

      height: 168px;

      margin-right: -2px;

    }

4 清除的问题

浮动的问题 – 高度塌陷

5 清除浮动

CSS属性 - clear

清除浮动的方法

方法三 – 伪元素清除浮动

<!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: #f00;
    }

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

    .item {
      width: 290px;
      background-color: purple;
      margin-bottom: 10px;

      float: left;
      margin-right: 10px;
    }

    .item.left {
      height: 370px;
    }

    .item.right {
      height: 180px;
    }

    /* 其他的内容 */
    .other {
      height: 100px;
      background: #0f0;
    }

    .line {
      /* height: 10px; */
      /* background: blue; */
      clear: both;
    }

    /* 最终的解决方案 */
    .clear_fix::after {
      content: "";
      clear: both;
      display: block;

      /* 浏览器兼容 */
      visibility: hidden;
      height: 0;
    }

    .clear_fix {
      /* IE6/7 */
      *zoom: 1;
    }
  </style>
</head>
<body>
  
  <!-- 因为所有的后代item元素都是浮动的, 脱离标准流 -->
  <!-- 不会向父元素汇报高度, 那么content元素压根就没有高度 -->
  <div class="content">
    <div class="wrapper clear_fix">
      <div class="item left"></div>
      <div class="item left"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>

      <!-- <div class="line"></div> -->
    </div>
  </div>
  
  <div class="content">
    <div class="wrapper clear_fix">
      <div class="item left"></div>
      <div class="item left"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>

      <!-- <div class="line"></div> -->
    </div>
  </div>

  <!-- 我认为content没有高度, 那么我们就会直接在上面显示 -->
  <div class="other"></div>

</body>
</html>

6 布局方案对比

布局方案总结

二、Day09练习

 

一. 完成所有的代码

二. 总结绝对定位的相对元素以及常见的解决方案

  • 子绝父相

    • 子元素绝对定位、

    • 父元素相对定位

  • 子绝父绝

    • 子元素绝对定位

    • 父元素绝对定位

  • 子绝父固

    • 子元素绝对定位

    • 父元素固定定位

三. 总结浮动常见的规则内容

  • 元素一旦浮动后, 脱离标准流

    • 朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止

    • 定位元素会层叠在浮动元素上面

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

  • 浮动元素之间不能层叠

    • 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）

    • 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止

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

    • 比如行内级元素、inline-block元素、块级元素的文字内容

    • 行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐

四. 通过浮动练习页面布局方案

<!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>
  <link rel="stylesheet" href="./reset.css">
  <style>
    .content {
      width: 1211px;
      margin: 0 auto;
      /* background-color: #f00; */
      height: 1000px;
    }
​
    .wrapper {
      margin-right: -10px;
    }
​
    .item {
      float: left;
      width: 234px;
      margin-bottom: 10px;
      margin-right: 10px;
    }
​
    .item.left {
      height: 614px;
      background-image: url(../images/小米01.webp);
    }
​
    .item.right {
      height: 302px;
    }
​
    /*  */
    .items {
      background-color: #fff;
      display: block;
      width: 234px;
      height: 302px;
      /* margin: 0 10px; */
      text-align: center;
      box-sizing: border-box;
    }
​
    .items:hover {
      box-shadow: 0 2px 20px 5px rgba(0, 0, 0, .1)
    }
​
    .items img {
      width: 160px;
      height: 160px;
    }
​
    .items .title {
      margin-top: 14px;
      color: #333;
    }
​
    .items .desc {
      color: rgb(105, 97, 97);
      margin-top: 8px;
​
      /* 单行显示省略号 */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
​
    .items .price {
      margin-top: 14px;
      font-size: 14px;
    }
​
    .items .new-price {
      color: #ff6700;
    }
​
    .items .old-price {
      color: #999;
      text-decoration: line-through;
      margin-left: 5px;
    }
  </style>
</head>
​
<body>
​
  <div class="content">
    <div class="wrapper">
      <div class="item left"></div>
      <div class="item right">
        <a class="items" href="https://www.mi.com/xiaomipad5pro" target="_blank">
          <img src="../images/xiaomi01.webp" alt="">
          <h3 class="title">小米平板5 Pro</h3>
          <p class="desc">
            全新12代英特尔处理器，CNC一体精雕工艺，2.5K 120Hz高清屏，可选MX550独立显卡
          </p>
          <div class="price">
            <span class="new-price">2399元起</span>
            <span class="old-price">2499元</span>
          </div>
        </a>
      </div>
      <div class="item right">
        <a class="items" href="https://www.mi.com/xiaomipad5pro" target="_blank">
          <img src="../images/xiaomi01.webp" alt="">
          <h3 class="title">小米平板5 Pro</h3>
          <p class="desc">
            全新12代英特尔处理器，CNC一体精雕工艺，2.5K 120Hz高清屏，可选MX550独立显卡
          </p>
          <div class="price">
            <span class="new-price">2399元起</span>
            <span class="old-price">2499元</span>
          </div>
        </a>
      </div>
      <div class="item right">
        <a class="items" href="https://www.mi.com/xiaomipad5pro" target="_blank">
          <img src="../images/xiaomi01.webp" alt="">
          <h3 class="title">小米平板5 Pro</h3>
          <p class="desc">
            全新12代英特尔处理器，CNC一体精雕工艺，2.5K 120Hz高清屏，可选MX550独立显卡
          </p>
          <div class="price">
            <span class="new-price">2399元起</span>
            <span class="old-price">2499元</span>
          </div>
        </a>
      </div>
      <div class="item right">
        <a class="items" href="https://www.mi.com/xiaomipad5pro" target="_blank">
          <img src="../images/xiaomi01.webp" alt="">
          <h3 class="title">小米平板5 Pro</h3>
          <p class="desc">
            全新12代英特尔处理器，CNC一体精雕工艺，2.5K 120Hz高清屏，可选MX550独立显卡
          </p>
          <div class="price">
            <span class="new-price">2399元起</span>
            <span class="old-price">2499元</span>
          </div>
        </a>
      </div>
      <div class="item right">
        <a class="items" href="https://www.mi.com/xiaomipad5pro" target="_blank">
          <img src="../images/xiaomi01.webp" alt="">
          <h3 class="title">小米平板5 Pro</h3>
          <p class="desc">
            全新12代英特尔处理器，CNC一体精雕工艺，2.5K 120Hz高清屏，可选MX550独立显卡
          </p>
          <div class="price">
            <span class="new-price">2399元起</span>
            <span class="old-price">2499元</span>
          </div>
        </a>
      </div>
      <div class="item right">
        <a class="items" href="https://www.mi.com/xiaomipad5pro" target="_blank">
          <img src="../images/xiaomi01.webp" alt="">
          <h3 class="title">小米平板5 Pro</h3>
          <p class="desc">
            全新12代英特尔处理器，CNC一体精雕工艺，2.5K 120Hz高清屏，可选MX550独立显卡
          </p>
          <div class="price">
            <span class="new-price">2399元起</span>
            <span class="old-price">2499元</span>
          </div>
        </a>
      </div>
      <div class="item right">
        <a class="items" href="https://www.mi.com/xiaomipad5pro" target="_blank">
          <img src="../images/xiaomi01.webp" alt="">
          <h3 class="title">小米平板5 Pro</h3>
          <p class="desc">
            全新12代英特尔处理器，CNC一体精雕工艺，2.5K 120Hz高清屏，可选MX550独立显卡
          </p>
          <div class="price">
            <span class="new-price">2399元起</span>
            <span class="old-price">2499元</span>
          </div>
        </a>
      </div>
      <div class="item right">
        <a class="items" href="https://www.mi.com/xiaomipad5pro" target="_blank">
          <img src="../images/xiaomi01.webp" alt="">
          <h3 class="title">小米平板5 Pro</h3>
          <p class="desc">
            全新12代英特尔处理器，CNC一体精雕工艺，2.5K 120Hz高清屏，可选MX550独立显卡
          </p>
          <div class="price">
            <span class="new-price">2399元起</span>
            <span class="old-price">2499元</span>
          </div>
        </a>
      </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>
  <link rel="icon " href="../icon/iconfont.ttf">
  <link rel="stylesheet" href="../icon/iconfont.css">
  <style>
    /* 重置样式 */
    a,
    i {
      text-decoration: none;
      color: #333;
    }
​
    .content {
      width: 275px;
      margin: 0 auto;
    }
​
    .content .item {
      display: block;
      position: relative;
      border-radius: 6px;
      overflow: hidden;
    }
​
    .content .item img {
      width: 275px;
      height: 154px;
      vertical-align: top;
    }
​
    .item .bottom {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 27px;
      line-height: 27px;
      font-size: 12px;
      color: #fff;
    }
​
    .bottom .icons {
      position: relative;
      top: 1px;
      padding-left: 8px;
      color: #fff;
    }
​
    .bottom .icon_middle {
      padding-left: 10px;
      color: #fff;
    }
​
    .bottom .icon_right {
      position: absolute;
      right: 10px;
    }
​
    .text_bottom {
      display: block;
      margin: 8px 0;
      font-weight: 700;
​
    }
​
    .up {
      color: rgb(172, 163, 163);
​
    }
​
    .icon_up {
      position: relative;
      top: 1px;
      font-size: 16px;
      color: rgb(172, 163, 163);
    }
​
    .up>span {
      font-size: 14px;
    }
  </style>
</head>
​
<body>
  <div class="content">
    <a class="item" href="">
      <img src="../images/bilibili.webp" alt="">
      <div class="bottom">
        <i class="iconfont icons">&#xe671;
        </i>
        <span class="icon_left">33.6万</span>
        <i class="iconfont icon_middle">&#xf01b8;</i>
        <span class="icon_midle">3.4万</span>
        <span class="icon_right">01:50:38</span>
      </div>
    </a>
    <span class="text_bottom">三个视频看懂汉武帝的一生：汉匈决战来临</span>
    <div class="up">
      <i class="iconfont icon_up">&#xe665;</i>
      <span>唠点历史</span>
      <span>3-30</span>
    </div>
  </div>
</body>
​
</html>

三、总结

二. 浮动

2.1. 认识浮动

float

  • none

  • left

  • right

2.2. 浮动规则

  • 规则一: 向左浮动或者向右浮动

  • 规则二: 不能超出包含块;

  • 规则三: 浮动元素不能层叠

  • 规则四: 浮动元素会将行内级元素内容推出

    • 图文环绕效果

  • 规则五: 浮动只能左右浮动, 不能超出本行的高度

2.3. 练习一 - 去除间隙

2.4. 练习二 - 百度页码

2.5. 练习三 - 京东多列布局


http://www.kler.cn/a/528087.html

相关文章：

  • 程序诗篇里的灵动笔触：指针绘就数据的梦幻蓝图＜2＞
  • 32. C 语言 安全函数( _s 尾缀)
  • PCA9685 一款由 NXP Semiconductors 生产的 16 通道、12 位 PWM（脉宽调制）控制器芯片
  • C#面试常考随笔4：int? 和 int的区别，以及int?的运用场景？
  • Docker/K8S
  • 百度热力图数据获取，原理，处理及论文应用5
  • Prometheus 中的 Exporter
  • JavaScript系列（52）--编译优化技术详解
  • Qwen 模型自动构建知识图谱，生成病例 + 评价指标优化策略
  • Banana JS，一个严格子集 JavaScript 的解释器
  • Java小白入门教程：数组（多维数组）
  • 【AI绘画】MidJourney关键词{Prompt}全面整理
  • Java 中线程的使用
  • 独立游戏RPG回顾:高成本
  • hive为什么建表，表存储什么
  • neo4j-community-5.26.0 create new database
  • Kafka SSL（TLS）安全协议
  • LeetCode：322.零钱兑换
  • el-table组件样式如何二次修改？
  • 【Linux】CentOS8虚拟机的基本环境配置
  • python中的if判读
  • C语言基础5
  • javascript-es6（三）
  • vscode script 中间的function import等关键字 先高亮，然后又灰了，并且按ctrl+/ 注释以html的形式，导致报错处理
  • 前端八股CSS：盒模型、CSS权重、+与~选择器、z-index、水平垂直居中、左侧固定，右侧自适应、三栏均分布局
  • 9.2k star！PiliPala一个第三方B站客户端！