CSS（布局+flex布局）+HTML（一）

辛-夷

已于 2024-06-13 20:23:28 修改

阅读量997

点赞数 34

分类专栏：前端学习文章标签： css html 前端

于 2024-06-13 20:21:41 首次发布

本文链接：https://blog.csdn.net/weixin_65450681/article/details/139654207

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

2.使用after伪元素清除浮动（推荐使用）

4.父元素添加overflow:hidden; (触发BFC)

3.添加overflow属性值为hidden

五、外边距合并问题

六、结束语

一、概述

1.布局的定义

布局（layout）即对事物的全面规划和安排，页面布局是对页面的文字、图像或表格进行格式化版式排列。

网页布局对改善网站的外观非常重要，又称版式布局，大多数网站会把内容安排到多个列中，就像杂志或报纸那样，

网页版面的设计延续了传统纸媒的特点，但又比传统的纸媒更灵活，传统的纸媒由于纸张大小的限制，只能在有限的空间内排列内容，而网页版面的布局，可以根据内容自适应宽度和高度。

在 HTML 中，常使用 div 元素来创建多列，使用 CSS 对元素进行浮动、定位等，从而将网页设计稿中的布局样式呈现在网页上。

二、浮动式

1.float属性

left：将元素向左浮动。设置left属性后，元素会尽可能地靠近其左侧的相邻元素，如果没有相邻元素，则会靠近父元素的左边界。
right：将元素向右浮动。设置right属性后，元素会尽可能地靠近其右侧的相邻元素，如果没有相邻元素，则会靠近父元素的右边界。
none：取消元素的浮动效果。设置none属性后，元素将恢复到正常的文档流中，不再浮动。
inherit：继承父元素的浮动属性。设置inherit属性后，元素会继承父元素的浮动属性，如果父元素没有设置浮动属性，则会按照默认值处理。

除了上述常用的float属性外，还有一些与浮动相关的属性可以配合使用，以实现更精细的布局效果：

float-width
：定义浮动的宽度。可以设置浮动的最大和最小宽度，以及宽度是否可调整。
float-height
：定义浮动的高度。可以设置浮动的最大和最小高度，以及高度是否可调整。
float-clear
：定义在浮动元素之后应该清除什么。可以设置清除浮动元素的方向，例如左、右或上。
float-display
：定义在浮动的子元素上是否显示父元素的背景和边框。可以设置显示或不显示背景和边框。
float-offset
：定义浮动的偏移量。可以设置浮动元素相对于父元素的位置偏移量。
float-fallback：定义在某些情况下是否使用回退浮动布局。可以设置是否启用回退浮动布局。

2.代码示例float：left;

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: aqua;
            /* 浮动 左浮动 float：left / right/none */
            float: left;
        }
        .box2{
            width: 500px;
            height: 500px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

3.运行结果展示

可以看到我们给box1设置float：left;以后box2叠放在box1下面，这样我们就实现了box1的左浮动。其他属性值类同，大家可以自己试试看。

三、清除浮动的几种方式

❓不清除浮动会怎么样

当父元素不给高度的时候，内部元素不浮动时会撑开, 而浮动的时候，父元素变成一条线, 造成塌陷。

1.额外标签法

在最后一个浮动标签后，新加一个标签，给其设置clear：both；(不推荐)

a.代码展示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 700px;
            background-color: aqua;
            padding: 20px;
            box-sizing: border-box;
        }
         .left{
            width: 49%;
            height: 260px;
            background-color: pink;
            float: left;
         }
         .right{
            width: 49%;
            height: 260px;
            background-color: blue;
            float: right;
         }
         .clearfix{
            /* 设置这个额外标签的clear属性为 both */
            clear: both;
         }
         .box1{
            height: 50px;
            background-color: red;
         }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <!-- 在浮动元素后添加一个额外的标签 -->
        <div class="clearfix"></div>
        
    </div>
    <div class="box1"></div>
</body>
</html>

b.运行结果展示

c.对比

如果我们不清除浮动那么得到的结果是这样的

这样的布局较为杂乱，不适用，所以我们就需要用到清除浮动来使其更加的规整。

2.使用after伪元素清除浮动（推荐使用）

a.代码展示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 700px;
            background-color: orange;
            padding: 20px;
            box-sizing: border-box;
        }
        .left{
            width: 49%;
            height: 260px;
            background-color: pink;
            float: left;
        }
        .right{
            width: 49%;
            height: 260px;
            background-color: aqua;
            float: right;
        }
        .box1{
            height: 50px;
            background-color: red;
        }
        /* 伪元素清除浮动 */
        .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box clearfix">
        <div class="left"></div>
        <div class="right"></div>
        
    </div>
    <div class="box1"></div>
</body>
</html>

b.运行结果

3.给父元素添加行高（不推荐）

a.代码展示

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            margin: 0 auto;
            box-sizing: border-box;
            width: 700px;
            /* 清除浮动方式：给父元素高，height：500px */
            -ms-high-contrast-adjust: 500px;
            background-color: rgb(255, 152, 152);
        }

        .son {
            float: left;
            width: 300px;
            height: 500px;
            background-color: rgb(105, 133, 255);
        }

        .son2 {
            float: right;
            width: 300px;
            height: 500px;
            background-color: rgb(26, 255, 1);
        }

        .box1 {
            height: 50px;
            background-color: rgb(247, 85, 255);
        }
    </style>

</head>

<body>
    <div class="father">
        <div class="son"></div>
        <div class="son2"></div>
    </div>
    <div>
        <div class="box1"></div>
    </div>
</body>

</html>

b.运行结果

4.父元素添加overflow:hidden; (触发BFC)

❓什么是BFC

BFC全称是Block Formatting Context，意思就是块级格式化上下文。你可以把BFC看做一个容器，容器里边的元素不会影响到容器外部的元素。

a.代码展示

<!DOCTYPE html>
<html lang="zh-CN">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      * {
         margin: 0;
         padding: 0;
      }

      .box {
         width: 700px;
         background-color: orange;
         padding: 20px;
         box-sizing: border-box;
         /* 给父元素添加 overflow：hidden */
         overflow: hidden;
      }

      .left {
         width: 49%;
         height: 260px;
         background: pink;
         float: left;
      }

      .right {
         width: 49%;
         height: 260px;
         background-color: aqua;
         float: right;
      }

      .box1 {
         height: 50px;
         background-color: red;
      }
   </style>
</head>

<body>
   <div class="box">
      <div class="left"></div>
      <div class="right"></div>

   </div>
   <div class="box1"></div>

</body>

</html>

b.运行结果

四、外边距塌陷

❗满足以下条件就会产生外边距塌陷现象：

1），子元素在父元素里面

2），子元素中有margin-top或者margin-bottom值

3) ，如下图

1.添加padding属性

我们给box1添加外边距以后，会出现外边距塌陷的情况，此时我们可以给box2添加padding属性，就可以防止外边距塌陷的情况。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;

        }
        .box1{
            width: 500px;
            height: 500px;
            background-color: aqua;
           
             padding: 1px; 
           
        }
        .box2{
            width: 400px;
            height: 400px;
            background-color: blue;
            margin-left: 20px;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
  
</body>
</html>

运行结果

2.添加边框

同样的，我们还可以为box1添加边框，也可以防止外边距塌陷，运行结果是相同的。

border: 1px solid #f90;

3.添加overflow属性值为hidden

这种方式是我们最常用的一种方式，简单快捷，同样也是添加在box1里，可以防止外边距塌陷的问题。

overflow: hidden;

五、外边距合并问题

1）元素垂直方向的外边距会重叠按最大的外边距计算
2）元素水平方向的外边距会合并距离为两元素外边距之和

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
        .box1{
            width: 200px;
            height: 200px;
            background-color: aqua;
            margin: 50px 30px;
            float: left;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: blue;
            margin: 20px 50px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

如下图深蓝色盒子的外边距为50px浅蓝色盒子的外边距为30px,此时两个盒子的外边距合并为80px.

如果两个盒子是垂直排列，那么会按照最大的外边距计算，这里就不进行展示了，大家可以自行尝试一下。

六、结束语

注：文章如果有侵权内容，请及时与作者联系，作者会及时进行修改。。。。

下一章节我们介绍flex布局的使用，快来打卡学习哦。

see you~

辛-夷

关注

34
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
CSS（布局+flex布局）+HTML（一）

布局（layout）即对事物的全面规划和安排，页面布局是对页面的文字、图像或表格进行格式化版式排列。网页布局对改善网站的外观非常重要，又称版式布局，大多数网站会把内容安排到多个列中，就像杂志或报纸那样，网页版面的设计延续了传统纸媒的特点，但又比传统的纸媒更灵活，传统的纸媒由于纸张大小的限制，只能在有限的空间内排列内容，而网页版面的布局，可以根据内容自适应宽度和高度。在 HTML 中，常使用 div 元素来创建多列，使用 CSS 对元素进行浮动、定位等，从而将网页设计稿中的布局样式呈现在网页上。
复制链接

扫一扫