HTML和CSS基础知识（4）

小程爱敲代码

已于 2024-07-20 08:43:10 修改

阅读量1k

点赞数 15

文章标签： html css 前端

于 2024-06-18 22:10:30 首次发布

本文链接：https://blog.csdn.net/qq_73990369/article/details/139782725

版权

盒子内外边距

（一）、内边距（paddiing）

                padding属性用于设置内边距。是指边框与内容之间的距离。
                padding-top:上内边距
                padding-right:右内边距
                padding-bottom:下内边距
                padding-left:左内边距

1.属性值设置

值的个数	表达意思
1个值	padding：上下左右边距比如padding: 3px; 表示上下左右都是3像素
2个值	padding: 上下边距左右边距比如 padding: 3px 5px; 表示上下3像素左右 5像素
3个值	padding：上边距左右边距下边距比如 padding: 3px 5px 10px; 表示上是3像素左右是5像素下是10像素
4个值	padding:上内边距右内边距下内边距左内边距比如: padding: 3px 5px 10px 15px; 表示上3px 右是5px 下 10px 左15px 顺时针

2.特征

                （1）内边距可以改变内容所在位置
                （2）内边距会改变盒子大小负值无效果
                （3）如果，盒子大小不想被改变宽度高度减去所增加的内边距

代码示例：

<!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>
        .h1{
            width: 220px;
            height: 220px;
            border: 1px solid red;
            background-color: aqua;
            padding: 50px;
        }
        .h2{
            width: 50px;
            height: 50px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="h1">
        <div class="h2"></div>
    </div>
</body>
</html>

结果示例：

（二）、外边距

1.属性

                margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。
                margin-top:上外边距
                margin-right:右外边距
                margin-bottom:下外边距
                margin-left:左外边距
                margin:上外边距右外边距下外边距左外边
                取值顺序跟内边距相同。

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>
    <style>
        .h1{
            width: 220px;
            height: 220px;
            border: 1px solid red;
            background-color: aqua;
        }
        .h2{
            width: 50px;
            height: 50px;
            background-color: black;
            margin: 50px 10px;
        }
    </style>
</head>
<body>
    <div class="h1">
        <div class="h2"></div>
    </div>
</body>
</html>

结果示例：

（三）、外边距实现盒子居中

1.说明

                可以让一个盒子实现水平居中，需要满足一下两个条件：
                1. 必须是块级元素。
                2. 盒子必须指定了宽度（width）
                然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

代码示例：

<!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>
        .h1{
            width: 220px;
            height: 220px;
            border: 1px solid red;
            /* padding: 50px; */
            background-color: aqua;
        }
        .h2{
            width: 50px;
            height: 50px;
            background-color: black;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="h1">
        <div class="h2"></div>
    </div>
</body>
</html>

结果示例：

（四）、清除元素的默认内外边距

为了更方便地控制网页中元素，制作网页时，可使用如下代码清除元素的默认内外边距：

.h2{
    padding: 0;
    /* 清除内边距 */
    margin: 0;
    /* 清除外边距 */
}

注意：行内元素是只有左右外边距的，是没有上下外边距的。内边距，在ie6等低版本浏览器也会有问题。
我们尽量不要给行内元素指定上下的内外边距就好了。

（五）、外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

代码示例：

<!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: blueviolet;
            margin-bottom: -124px;
        }

        .box2{
            width: 200px;
            height: 100px;
            background-color: skyblue;
            margin-top: 0px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

结果示例：

（六）、盒子阴影

说明及属性：

语法格式：box-shadow:水平阴影垂直阴影模糊距离阴影尺寸阴影颜色内/外阴影;

1. 前两个属性是必须写的。其余的可以省略。

2. 默认是外阴影 (outset) ，不用设置，想要内阴影设为 inset 。

3. X轴与Y轴如果有值，就改变了（正值向右向下）

代码示例：

<!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>
        .s1{
            width: 150px;
            height: 150px;
            border: 1px solid red;
            box-shadow: 5px 5px 1px  skyblue;
        }
    </style>
</head>
<body>
    <div class="s1"></div>
</body>
</html>