CSS块级与行级标签以及float浮动

deng_hongbin

已于 2024-05-23 17:50:22 修改

阅读量457

点赞数 13

文章标签： css 前端学习

于 2024-05-22 18:32:30 首次发布

本文链接：https://blog.csdn.net/weixin_53598426/article/details/139126587

版权

1.块级与行级标签

(1)块级标签
块级标签本身不管内容有多少，它都会占整一块
块级标签可以设置它的大小

(2)行级标签
行级标签就一行里只要空间足够就可以在同一行中有多个这个标签
行级标签的大小只跟内容相关，所以无法设置它的大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--1.块级标签：
        块级标签本身不管内容有多少，它都会占整一块。
        块级标签可以设置它的大小。
     -->
     <h1 style="background-color: rgb(235, 203, 135); width: 500px;">123123</h1>
     <p style="background-color: skyblue; width: 300px; height: 300px; ">
         p标签<br>
         p标签<br>
         p标签<br>
         p标签<br>
         p标签<br>
         p标签<br>
         p标签<br>
         p标签<br>
         p标签<br>
         p标签<br>
         p标签<br>
     </p>
     <div> <!-- 常用的块级标签，不含任何自带属性 -->
         div标签<br>
     </div>
     <hr>
     <!-- 2.行级标签：
        行级标签就一行里只要空间足够就可以在同一行中有多个这个标签。
        行级标签的大小只跟内容相关，所以无法设置它的大小。
     -->
     <p>
        <a href="#">123123</a>
        <b style="background-color: pink; width: 500px; height: 500px;">123123123</b>
        <span>123123</span>  <!-- 常用的行级标签，不含任何自带属性 -->
    </p>
</body>
</html>

(3)行内块级的设置
将行级变成块级接着进行左浮动


<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内块级的设置</title>
    <style>
        a { 
            width: 200px;
            height: 50px;
            display: block;  /* 变成块级 */
            float: left;     /* 块级左浮动 */
            background: skyblue;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">12312</a>
        <a href="#">12312</a>
        <a href="#">12312</a>
        <a href="#">12312</a>
        <a href="#">12312</a>
    </div>
</body>
</html>

2.浮动的使用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用浮动</title>
  <style>

       .box{
        width: 500px;
        height: 500px;
        border: 2px solid #000;
        margin: 100px auto; 
      }
      .box1{
        background-color: aqua;
        width: 200px;
        height: 200px;
      
      }
      .box2{
        background-color: brown;
        width: 200px;
        height: 300px;
        float: left; 
      }
      .box3{
        background-color:rgb(241, 7, 191);
        width: 100px;
        height: 100px;
        float:right; 
      }
      .box4{
        width: 200px;
        height: 300px;
        float: left;
      }
  </style>
</head>
<body>
    <div class="box"> 
    <div class="box4">
        <div class="box1"></div>
        <div class="box3"></div>
    </div>
    <div class="box2"></div>
   </div>
</body>
</html>

运行结果如下所示

另外，还可以利用相对定位与绝对定位的方式得出以上的运行结果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用浮动(绝对定位)</title>
  <style>
       .box{
        width: 500px;
        height: 500px;
        border: 2px solid #000;
        margin: 100px auto; 
        position: relative;  /* 利用相对定位，将box看成参照元素 */
      }
      .box1{
        background-color: aqua;
        width: 200px;
        height: 200px; 
        float: left;
      }
      .box2{
        background-color: brown;
        width: 200px;
        height: 300px;
        float: left; 
      }
      .box3{
        background-color:rgb(241, 7, 191);
        width: 100px;
        height: 100px;
        position: absolute;
        top: 200px;
        left: 100px;
      }
  </style>
</head>
<body>
    <div class="box"> 
        <div class="box1"></div>
        <div class="box3"></div>
    <div class="box2"></div>
   </div>
</body>
</html>

3.消除浮动影响的方法

(1)设置宽高
优点：简单方便
缺点：不能自适应

(2)把相关的元素也设置为浮动流
优点：可以自适应
缺点：会带来新的浮动影响

(3)使用清除浮动的属性
优点：可以自适应, 也不会带来新浮动的影响
缺点：页面中会出现非常多无内容的元素

(4)使用CSS3新增的选择器方法生成带有清除浮动的属性元素
优点：可以自适应, 也不会带来新浮动的影响
缺点：页面中会出现非常多无内容的元素

代码实现如下图所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动</title>
    <style>
          /* 
            浮动流的元素与普通流元素，它的空间是半释放的。
            这样会带来很多问题。
            我们需要解决这些问题，称为清除浮动。
        */
        .box3 {
            height: 300px;  /* 设置宽高为300px清除box4中浮动带来的问题*/
            border: 2px solid #000;
        }
        .box4 {
            width: 200px;
            height: 300px;
            float: left;
            background: orange;
        }
        .box5 {
            width: 100%;
            float: left;  /*把父元素box5也设置为浮动流float,清除box4中浮动带来的问题*/
            border: 2px solid #000;
        }
        .box6 {
            border: 2px solid #000;
        }
        .clear {
            clear:both;   /* 使用清除浮动的属性clear, 清除box4中浮动带来的问题*/
        }  
        .clear2::after{   /* 使用CSS3新增的选择器方法after(clear升级版), 清除box4中浮动带来的问题*/
            content:"";
            display: block;
            clear:both;
        }
    </style>
</head>
<body>
    <!-- 
        清除浮动的方法1：
        设置宽高。
        优点：简单方便。
        缺点：不能自适应。
     -->
    <!-- <div class="box3">
        <div class="box4"></div>
    </div> -->

    <!-- 
        清除浮动的方法2：
        把相关的元素也设置为浮动流。
        优点： 可以自适应。
        缺点： 会带来新的浮动影响。
     -->
     <!-- <div class="box5">  
        <div class="box4"></div>
     </div> -->

     <!-- 
        清除浮动的方法3：
        使用清除浮动的属性。
        优点： 可以自适应, 也不会带来新浮动的影响。
        缺点： 页面中会出现非常多无内容的元素。
     -->
     <!-- <div class="box6">
        <div class="box4"></div>
        <div class="clear"></div>
     </div> -->
  
     <!-- 
        清除浮动的方法4：
        使用CSS3新增的选择器方法生成带有清除浮动的属性元素。
        优点： 可以自适应, 也不会带来新浮动的影响。
        缺点： 页面中会出现非常多无内容的元素。
     -->
     <!-- <div class="box6 clear2">
        <div class="box4"></div>
     </div> -->
</body>
</html>

4.页外边距与页内边距

(1)页外边距
外边距也称为外补丁，是该元素外部某方向与别的元素之间的距离
最常用的一个元素水平居中方法margin: 50px auto 0 ;（0或0px可省略）

margin: 50px 80px 100px 120px; 代表类似顺时针，上50px—>右80px—>下100px—>左120px
margin: 50px auto 120px; 代表上50px—>下120px，左右自动
margin: 50px 120px;代表上下50px—>左右120px

(2)页外边距的融合
指的是垂直方向相接边距会进行融合

(3)防止出现边距融合方法

设置一个元素为浮动流float。因为边距融合只会出现在普通流元素中，所以只要其中一个元素设置浮动流就可以了
使用边框border


<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距</title>
    <style>
        /* 
            外边距也称为外补丁，是该元素外部某方向与别的元素之间的距离
        */
        .box1 {
            width: 800px;
            height: 200px;
            /* margin: 50px 80px 100px 120px;  顺时针，上-右-下-左 */
            margin: 50px auto ;  /* 最常用的一个元素水平居中方法 */
            background: skyblue;
        }

        /* 
            边距融合：
            指的是垂直方向相接边距会进行融合

            防止出现边距融合方法1：设置一个元素为浮动流
            边距融合只会出现在普通流元素中，所以只要其中一个元素设置浮动流就可以了
            防止出现边距融合方法2：使用边框
        */

        .box2 {
            /* 使用边框 */
            width: 800px;
            height: 300px;
            margin: 0 ;
            background: skyblue;
            /* border-top: 1px solid #fff;   */
            /* 一般最后将边框改为白色 */
        }
        .box3 {
            /* 设置浮动流 */
            width: 100px;
            height: 100px;
            margin: 50px 0 0 0 ;
            float: left;
            background: hotpink;
        }
    </style>
</head>
<body>
    <!-- 边距融合 -->
    <!-- <div class="box1"></div>
    <div class="box1"></div> -->
    
    <div class="box2">
        <div class="box3"></div>
    </div>
</body>
</html>

(4)页内边距
外边距也称为内补丁，是该元素内部某方向与别的元素之间的距离

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内边距</title>
    <style>
        /* 
            外边距也称为内补丁，是该元素内部某方向与别的元素之间的距离。
        */
        .box2 {
            width: 260px;
            height: 260px;
            margin: 0 ;
            padding: 20px;
            background: skyblue;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background: hotpink;
        }
        .box4 {
            width: 300px;
            height: 300px;
            margin: 0 ;
            background: orange;
        }
    </style>
</head>
<body>
    <div class="box2">
        <div class="box3"></div>
    </div>
    <hr>
    <div class="box4">
    </div>
</body>
</html>