HTML&CSS Part4

HTML&CSS
Study Notes
发布日期:   2024-02-25

Part.4 CSS属性详述（2）

在第三部分中，我们了解了文字属性，列表属性以及背景属性，在这一部分，咱们继续将css中的属性说完。

浮动属性

相信各位应该已经有所疑惑了，HTML中纵向排列貌似是一件非常简单的事情，但我们如果想要让一些元素在标签页上横向排列，就需要涉及到另一种css的内容， 浮动属性 。

浮动属性在HTML中主要起两个作用：

  • 定义网页中的其它元素围绕某一特定元素显示
  • 让原先纵向排布的元素横向排列

这里希望读者先理解为什么这玩意叫做 浮动 ，它的意思是你可以让一个元素上浮到浏览器的另一个图层上（笔者其实也不确定图层这个说法准不准确，权且这么叫着吧），而下方的元素会顺次上移到原图层空出的位置，以此达到两个元素在同一个x轴的位置显示的效果。

我们首先介绍一下最基本的浮动属性：

浮动属性：float

float: left / center / right;
<!-- 分别表示浮动于左侧 / 中间 / 右侧 -->

因此，我们如果尝试着利用浮动属性，来让三个div横向显示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        .red{
            background: red;
            float: left;
        }
        .green{
            background: green;
            float: left;
        }
        .blue{
            background: blue;
            float: left;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
</body>
</html>

读者可以将这段代码运行尝试一下，我们会发现，我们成功的使得三个色块从左至右的显示了出来，顺序为红 / 绿 / 蓝。

清浮动

问题来了，我们如果将上面代码中最后一个蓝色的div的浮动属性去掉，读者可以想象一下会产生什么效果？

答案是蓝色由于补上了红色和绿色空出的原图层的位置，它会被更高图层的红色方块挡住，这显然是有些难以接受的，它影响了我们后续内容的布局，这个问题在HTML中被称为 高度塌陷 。我们如果不希望蓝色被遮挡，这里有三种解决方案：

  • 固定代码
  • 清浮动

我们一种一种讲：

第一种，所谓固定代码，即将横向布局的内容外再套上一层容器，给这个容器固定一个高度和宽度，使得这个容器能够在原图层占据浮动起来的高度，从而达到解决高度塌陷的目的。

以上面的例子做改动：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
        .red{
            background: red;
            float: left;
            width: 100px;
            height: 100px;
        }
        .green{
            background: green;
            float: left;
            width: 100px;
            height: 100px;
        }
        .blue{
            background: blue;
            width: 100px;
            height: 100px;
        }
        .floating_area{
            height: 100px;
        }
    </style>
    </head>
    <body>
        <div class="floating_area">
            <div class="red"></div>
            <div class="green"></div>
        </div>
        <div class="blue"></div>
    </body>
</html>

可以看到，我们对需要横向排列的两个玩意单独框了起来，而后对最外层的容器进行了高度设置。

第二种，所谓清浮动，是css中提供的一个属性 clear ，它可以使得一个元素左侧或右侧没有浮动元素与它重叠，从而达到解决高度塌陷的效果。

clear: none / left / right / both
<!-- 代表允许有浮动对象 / 不允许左侧有浮动对象 / 不允许右侧有浮动对象 / 不允许有浮动对象 -->

这个属性要正确使用，需要加给 原先被遮挡的元素 ，我们还是以上面的例子做修改：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        .red{
            background: red;
            float: left;
        }
        .green{
            background: green;
            float: left;
        }
        .blue{
            background: blue;
            float: left;
            clear: left;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>

    <!-- 这里其实也可以在蓝色方块上直接加一个什么都没有的div，单独写一个行内样式： -->
    <!-- <div style="clear: left;"></div> -->
</body>
</html>

可以看到，我们为蓝色的方块加上了clear属性，使得它不再被遮挡了。

盒子模型

上面说完了浮动属性的一些基础内容，但我们现在如果想让两个div之间产生一些距离，可能还是有些无能为力（当然，读者可以直接加空的div设置宽度，但多少显得有些繁琐），这时，需要引入css中一个充当基石的模型， 盒子模型 。

盒子模型 ，即把每个内容都看作是一个盒子，这个模型主要包含四部分的内容：

  • 内容模块：盒子内需要显示些什么
  • 内间距：内容模块与边框之间的距离
  • 边框：一个盒子的外壳（有点类似于表格的最外层）
  • 外间距：盒子与盒子之间的距离

我们可以很轻易地想到，在HTML网页这个2D平面内，盒子自然是有上下左右四个方向的，因此，内间距 / 边框 / 外间距都可以进一步细分成四个量。

关于内容模块，其实没什么可说的，就是咱们要展示给读者的内容，在此略过不表。

内边距

在盒子模型中，内边距用属性 padding 进行控制，我们举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            background-color: aqua;
            padding: 20px;
            text-align: justify;
        }
    </style>
</head>
<body>
    <div>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et id, minus unde ad cumque, at animi modi dolorem voluptatibus, delectus voluptates ullam! Facilis autem illo vero distinctio nulla corrupti a!
    </div>
</body>
</html>

读者可以跑一下试试，我们可以很清晰的看到，文字和边框是有一个很明显的间隔的，这就是内边距。

这时，我们又更挑剔了，我们希望能够分别设置内边距，即上下左右分别设置，也有方法：

padding: 20px 30px;
<!-- 只写两个值，代表上下，左右的两个值 -->
padding: 20px 30px 10px;
<!-- 写三个值，代表上，左右，下的三个值 -->
padding: 10px 20px 30px 40px
<!-- 写四个值，代表上，右，下，左的四个值（其实就是顺时针） -->

当然，我们如果就想拿一个属性来控制某一个方向的内边距，也有相应的设置：

padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
<!-- 分别代表上下左右的内边距 -->

需要提一嘴的时，当设置padding时，会导致盒子本身的大小有相应的增大。因此背景色是可以蔓延到内边距的位置的。

与此同时，如果我们需要手动设置某些元素的内边距为0 （比如ul中的左内边距），我们也可以通过这种方式达成目的。

边框

我们继续外延，在内边距的外侧紧跟着一圈边框，也是可以设置的属性，利用 border 进行控制。

border: 5px solid red;
<!-- 第一个属性是边框的宽度 -->
<!-- 第二额属性是边框的样式，有实线（solid）、双实线（double）、虚线（dashed）、
点状线（dotted） -->
<!-- 第三个属性是边框的颜色 -->

与内边距相似的，边框也可以对四个方向分别进行设置：

border-top
border-bottom
border-left
border-right
<!-- 后续跟的值与上述单写border时的形式完全相同 -->

当然，也有另一种写法，即将 border 拆分成 border-width border-style border-color ，而后在每个属性后多写几个值，也能达成分别控制四周的效果，具体逻辑与上文中相同，即：

  • 两个值：上下，左右
  • 三个值：上，左右，下
  • 四个值：上，右，下，左

额外提一嘴，背景色是同样可以延伸到边框处的

外边距

咱们继续外延，紧接着边框的，就是外边距。利用 margin 进行控制。

这里的设置方式与padding几乎一致，同样的紧跟一个宽度；也可以设置1，2，3，4个值，控制的边框也与上方的原则相同；也可以分成 margin-top margin-bottom margin-left margin-right 四个属性进行书写。因此在这里不再详细叙述了，读者可参考上面的padding的写法。

二者明显的不同是背景色无法延伸至外边距处，此外，margin是支持负值的设置的：

<!DOCTYPE html>
<html lang="en">
<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;
            padding-top: 20px;
            padding-bottom: 20px;
            padding-left: 20px;
            padding-right: 20px;
            text-align: justify;
            border: 5px solid red;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            padding-top: 20px;
            padding-bottom: 20px;
            padding-left: 20px;
            padding-right: 20px;
            text-align: justify;
            border: 5px solid red;
            margin-top: -50px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

如上，我们将第二个盒子的上侧外边距设置成了-50px，运行过后可以发现两个盒子纵向重叠到一块了。

除此之外，我们还有一种很常用的横向居中方案：

margin:0 auto;
<!-- 上下外间距为0，左右外间距自动（即居中） -->

好了，我们已经大体搞明白了外边距这个玩意的作用，现在我们需要明确两个很容易碰到的问题：

  • 兄弟关系的盒子的垂直 / 水平外边距问题
  • 父子关系的盒子的外边距问题

咱一个个说：

所谓兄弟关系，就是这俩玩意在html中的地位是相同的，而俩盒子又在水平或竖直方向上相邻。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1, .box2{
            width: 200px;
            height: 200px;
        }
        .box1{
            background: red;
            margin-bottom: 100px;
        }
        .box2{
            background: aqua;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

以上面的这两个盒子为例，我们原本的想象是，第一个盒子下外边距为100px，第二个盒子上外边距为50px，俩盒子应该距离150px才对，但我们发现最终俩盒子只隔了100px。

这个位置就需要额外记忆一下： 竖直方向外边距取最大值

但这个结论对于水平方向并不成立：

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

我们改成这个水平相邻的状况，会发现它们俩之间确实隔了150px，这证明了另一个结论： 水平方向外边距会合并 。

接下来我们谈父子关系的盒子，即外面一个大盒子包着里面一个小盒子。

<!DOCTYPE html>
<html lang="en">
<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: red;
        }
        .box2{
            width: 50px;
            height: 50px;
            background: aqua;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

这边，我们将一个小盒子包在一个大盒子里面，为小盒子设置一个上边距，我们本来想着应该可以达到小盒子与大盒子的边框之间相隔一个距离，但很遗憾，最终显示结果是大盒子距离上边界隔了一段距离，而小盒子仍然显示在大盒子的左上角。

要解决这个问题，有三种方法：

  • 变通方法，给父盒子加一个内边距（padding），缺点在于padding本身会扩大盒子的大小。
  • 给父盒子设置边框，缺点同上，仍然会扩大盒子的大小。（可以把颜色设置为transparent，即透明的）
  • 给子盒子 / 父盒子添加浮动属性，使二者不在同一个图层上。
  • 在父盒子的属性中加入overflow: hidden; 这个方法涉及到BFC相关的内容，在将来的博文中会进一步讲解。

好了，本篇博文主要针对浮动与盒子模型进行了对应的讲解。

这篇博文就到这里~

文章作者: MUG-chen
文章链接: http://mug-chen.github.io/posts/51901.html
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 MUG-chen !
HTML&CSS
  目录