前端之CSS篇(三)——CSS三大特性及盒子模式和边距边框

最新推荐文章于 2024-05-24 17:57:09 发布

今晚务必早点睡

最新推荐文章于 2024-05-24 17:57:09 发布

阅读量1k

点赞数 1

分类专栏：前端文章标签： css 前端 vscode

本文链接：https://blog.csdn.net/m0_57021623/article/details/127145776

版权

前端专栏收录该内容

34 篇文章 10 订阅

订阅专栏

1.CSS的三大特性

CSS有三个非常重要的三个特性：层叠性、继承性、优先性

1.1 层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题。

(1) 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式

(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>CSS层叠性</title>
    <style>
        div {
            color: green;
            font-size: 35px;
        }

        div {
            color: purple;
        }
    </style>
</head>

<body>
    <div>大家晚上好</div>
</body>

</html>

效果如下：(长江后浪拍前浪)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CowNqx4D-1664712454501)(Typora_image/080.png)]

1.2 继承性

在这里插入图片描述
现实中的继承：我们继承了父亲的姓。

CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。简单理解就是：子承父业。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GViOjQTR-1664712454502)(Typora_image/081.png)]

恰当的使用继承可以简化代码，降低CSS样式的复杂性(比如可以给整个body标签设定字体等)

子元素可以继承父元素的样式(text-,font-,line- 这些元素开头的可以继承，以及color属性)

注意：子元素并不是把所有的父类元素都继承，而是以文字相关的某些样式,字体，行高，颜色等这些样式可以继承。
(高度和内外边距不会继承)

1.2.1 行高的继承(继承性的特殊)

body {
  font: 23px/1.5 'Microsoft YaHei';
}

(1) 行高可以跟单位也可以不跟单位

(2) 如果子元素没有设置行高，则会继承父元素的行高为1.5

(3)此时子元素的行高是：当前子元素的文字大小*1.5

(4)body行高1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

执行代码：

<!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>行高的继承</title>
    <style>
        body {
            color: purple;
            /* 行高可以跟单位，行高也可以不跟单位 */
            /* 行高跟单位 */
            /* font: 21px/46px 'Microsoft YaHei'; */
            /* 行高不跟单位 */
            font: 23px/1.5 'Mircosoft YaHei'
        }

        div {
            /* 子元素继承了父元素body的行高1.5 */
            /* 这个1.5就是当前元素文字大小font-size 的1.5倍 */
            /* 即：14×1.5=21px,所以此时div行高是21px。 */
            font-size: 14px;
        }

        p {
            /* 此时p的行高为16×1.5=24px */
            font-size: 16px;
        }

        /* li没有手动指定文字大小，但是会继承父亲的文字大小，ul没指定，继续往上走body,所以父亲的文字大小为23px */
        /* 即li的文字大小为23px,li的行高为23×1.5＝34.5 */
    </style>
</head>

<body>
    <div>今晚月色不错</div>
    <p>今晚月色不错</p>
    <ul>
        <li>没有指定文字大小</li>
    </ul>
</body>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GXVt9OyO-1664712454503)(Typora_image/082.png)]

1.3 优先级

当同一个元素指定多个选择器，就会有优先级的产生。

(1) 选择器相同，则执行层叠性

(2) 选择器不同，则根据选择器权重执行

选择器权重如下表所示：

选择器	选择器权重
继承或者*	0，0，0，0	0
元素选择器	0，0，0，1	10
类选择器，伪类选择器	0，0，1，0	100
ID选择器	0，1，0，0	1000
行内样式 style=“”	1，0，0，0	10000
!important重要的	∞ 无穷大	100000

执行代码：

<!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>CSS优先级</title>
    <style>
        /* 元素选择器  标签选择器 */
        div {
            color: orange;
        }

        /* 类选择器 */
        /* 加!improtant权重最大 */
        .test {
            color: pink !important
        }

        /* id选择器 */
        #demo {
            color: yellow;
        }

        /* style是行内样式表 */
    </style>
</head>

<body>
    <div class="test" id="demo" style="color:purple">你笑起来真好看</div>
</body>

</html>

注意事项：

(1)权重是有4组数字组成，但是不会有进位。

(2)可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推

(3) 等级判断从左到右，如果某一位数值相同，则判断下一位数值。

(4)可以简单记忆法：通配符和继承权重为0，标签选择器为1，类(伪类)选择器为10，id选择器为100，行内样式表为1000，!improtant无穷大。

代码如下：

(5)继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0(重点)

!important 用法
div {
    color:green!important;
}

事项举例：
a标签模式有一个蓝色的下划线的样式

<!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>权重注意点</title>
    <style>
        /* 父亲的权重为100 */
        #father {
            color: green;
        }

        /* 看标签到底执行那个样式，就先看这个标签有没有直接被选出来 */
        /* p继承的权重为0 */
        /* 所以p执行了自己的标签选择器颜色 */
        p {
            color: red;
        }

        body {
            color: blue;
        }

        /* 此时a样式并没有继承body的样式，没有显示出蓝色， */
        /* 继承的权重为0， a有它自己的样式 */
        /* 这是因为a链接浏览器默认制定了一个样式 蓝色的 有下划线的  a {color:blue;} */
        /* 此时a标签还是自身的蓝色，若要变换样式，需要给它指定一个样式，比如 */
        /* 给body此时更改样式，不影响a的样式 */
        a {
            color: orange;
        }
    </style>
</head>

<body>
    <div id="father">
        <p>你笑起来真好看 </p>
    </div>
    <a href="#">我是单独的样式</a>
</body>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IsLKH3tZ-1664712454504)(Typora_image/083.png)]

1.3.1权重叠加：如果是复合选择器，则会有权中叠加，需要计算权重。

测试:

div ul li	0,0,0,1+0,0,0,1+0,0,0,1	0,0,0,3
.nav ul li	0,0,1,0 +0,0,01 +0,0,0,1	0,0,1,2
a:hover	0,0,0,1 +0,0,1,0	0,0,1,1
.nav a	0,0,1,0 +0,0,0,1	0,0,1,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>权重的叠加</title>
    <style>
        /* 复合选择器会有权重叠加的问题 */
        /* li的权重是0,o,o,1 */
        li {
            color: red;
        }

        /* ul li 权重  0,0,0,1 +o,o,o,1=0,0,0,2 */
        /* 权重更新叠加，但是永远不会有进位问题 */
        ul li {
            color: green;
        }
        /* .nav li 权重 0,0,1,0 + 0,0,0,1 =0,0,1,1 */
        .nav li {
            color: pink;
        }
    </style>
</head>

<body>

</body>
<ul class="nav">
    <li>诸葛亮</li>
    <li>孔明</li>
    <li>卧龙</li>
</ul>

</html>

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rit2J6b1-1664712454505)(Typora_image/084.png)]

测试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>CSS权重练习</title>
    <style>
        li {
            color: red;
        }

        .nav li {
            color: green;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>CSS权重练习</li>
        <li>CSS权重练习</li>
        <li>CSS权重练习</li>
        <li>CSS权重练习</li>
    </ul>
</body>

</html>

答案是绿色，

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lH4XAhRg-1664712454506)(Typora_image/085.png)]

原因：虽然权重有高低，但是继承的权重为0.

代码如下：

<!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>CSS权重练习2</title>
    <style>
        .nav li {
            color: red;
        }

        /* 根据上面代码，此时li为红色 */
        /* 需求1：把第一个li颜色改成 粉色加粗 */
        /* 代码如下 */
        /* .nav .one {
            color: pink;
            font-weight: 700; */
        /* 写成下面代码，只发生加粗效果，颜色不会变化 */
        /* 原因：.nav li  的权重是0,0,1,0_0,0,0,1=0,0,1,0  .one的权重是0,0,1,0, 所以上面代码的权重高 */
        /* 如果想改成粉色，就用.nav .one  权重为 0,0,1,0 +0,0,1,0=0,0,2,0 ,这样才会执行粉色 */
        .one {
            color: pink;
            font-weight: 700;
        }
    </style>
</head>


<body>

</body>
<ul class="nav">
    <li class="one">CSS权重练习2</li>
    <li>CSS权重练习2</li>
    <li>CSS权重练习2</li>
    <li>CSS权重练习2</li>
</ul>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8R7Dzrkl-1664712454508)(Typora_image/086.png)]

2 CSS盒子模型

页面布局要学习三大核心，盒子模型，浮动和定位，学习好盒子模型能非常好的帮助我们布局页面。

透过现象看本质

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G4iIoOmm-1664712454509)(Typora_image/087.png)]

2.1 网页布局过程：

1.先准备好相关的网页元素，网页元素基本都是盒子Box.

2.利用CSS设置好盒子样式，然后摆放到相应位置。

3.往盒子里面装东西。

网页布局的核心本质：就是利用CSS摆盒子。

2.2 盒子模型(Box Model)组成

盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

CSS盒子模型本质上是一个盒子，封装周围的HTML的元素，它包括：边距、外边距、内边距、和实际内容。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PcVlaOLn-1664712454511)(Typora_image/088.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XRPXE0P9-1664712454512)(Typora_image/089.png)]

2.3边框 (border)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bQkYQbGq-1664712454513)(Typora_image/090.png)]

border可以设置元素的边框。边框有三部分组成：边框宽度(粗细)、边框样式、边框颜色。

语法

border : border-width || border-style ||border-color

属性	作用
border-width	定义边框明细，单位是px
border-style	边框的样式
border-color	边框颜色

执行代码:

<!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>盒子模型之边框</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            /* border-width  边框的粗细 一般情况下都用px */
            border-width: 5px;
            /* 实线边框 */
            /* border-style: solid; */
            /* 虚线边框 */
            /* border-style: dashed; */
            /* 点线边框 */
            border-style: dotted;
            /* border-color 设置边框颜色 */
            border-color: aquamarine;

        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1d0hsZdM-1664712454514)(Typora_image/091.png)]

CSS边框属性允许你指定一个元素边框的样式和颜色。

边框简写：

border: 1px solid red; 没有顺序

边框分开写法：

border-top: 1px solid red;  /* 只设定上边框，其余同理 */

执行代码：

<!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>边框的复合写法</title>
    <style>
        .nav {
            width: 100px;
            height: 60px;
            /* border-width: 5px;
            border-color: aqua;
            border-style: dashed; */
            /* 边框的复合简写 */
            /* border: 5px aqua dashed */
            /* 也可以分开设定，只设定上边框 */
            border-top: 5px dashed purple;
            /* 设定下边框 */
            border-bottom: 8px orange dotted;
            /* 设定左边框 */
            border-left: 20px solid green;
            /* 设定右边框 */
            border-right: 12px rosybrown solid;
        }

        /* 测试案例：请给一个200*200的盒子，设置一个上边框为红色，其余边框为蓝色(注意边框的层叠性) */
        .test {
            width: 200px;
            height: 200px;
            /* 运用了层叠性 */
            border: 5px solid blue;
            /* 层叠性指示层叠了上边框 */
            border-top: 5px solid red;
            /* 如果把bord-top和border变换位置，则显示四个边都是蓝色 一般先写大的，后写小的 */


        }
    </style>
</head>

<body>
    <div class="nav"></div>
    <div class="test"></div>
</body>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9hrLg3WC-1664712454516)(Typora_image/092.png)]

2.4 表格的细线边框

border-collapse 属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。

语法：

border-collapse:collapse;

border	[ˈbɔːdə®]	边境; 边界; 边疆; 国界; 边界地区;
collapse	kəˈlæps]	(突然)倒塌; 在这里译为合并

border-collapse: collapse; 表示相邻边框合并在一起

执行代码：

<!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>今日小说排行榜</title>
    <style>
        /* 表格指定大小 */
        table {
            width: 500px;
            height: 30px;
        }

        /* 表格和单元格,表头单元格指定边框 */
        table,
        td,
        th {
            border: 1px solid skyblue;
            /* 合并相邻的边框 */
            border-collapse: collapse;
            font-size: 14px;
            /* 所有文字居中对齐 */
            text-align: center;
        }
    </style>
</head>

<body>
    <table align="center" width="500px" height="30px" border=1 cellspacing="0">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键字</th>
                <th>趋势</th>
                <th>进入搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>

        </thead>
        <tbody>

            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="https://img0.baidu.com/it/u=3088610651,3841531735&fm=253&fmt=auto&app=138&f=JPEG?w=466&h=500"
                        width="20" height="20"></td>
                <td>345</td>
                <td>123</td>
                <td><a href="https://tieba.baidu.com/index.html">贴吧</a>&nbsp;<a
                        href="https://image.baidu.com/">图片</a>&nbsp;<a href="https://baike.baidu.com/">百科</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>盗墓笔记</td>
                <td><img src="https://img0.baidu.com/it/u=3088610651,3841531735&fm=253&fmt=auto&app=138&f=JPEG?w=466&h=500"
                        width="20" height="20"></td>
                <td>124</td>
                <td>675432</td>
                <td><a href="https://tieba.baidu.com/index.html">贴吧</a>&nbsp;<a
                        href="https://image.baidu.com/">图片</a>&nbsp;<a href="https://baike.baidu.com/">百科</a></td>
            </tr>


        </tbody>


    </table>

</body>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rTm6Y2GZ-1664712454517)(Typora_image/093.png)]

2.5 边框会影响盒子实际大小

边框会额外增加盒子的实际大小。因此我们有两种方案解决：
(1) 测量盒子大小的时候，不量边框

(2) 如果测量的时候包含了边框，则需要width/height减去边框宽度

代码示例：

<!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>边框会影响盒子的实际大小</title>
    <!-- 需求：我们需要一个200*200的盒子，但是这个盒子有10像素的红色边框 -->
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: rgba(11, 243, 231, 0.333);
            /* 再加一个红色边框 */
            border: 10px red solid;
        }
        /* 此时整个盒子变成220*220 */
    </style>
</head>

<body>
    <div></div>
</body>

</html>

2.6 内边距（padding)

padding属性用于设置内边距，即边框与内容之间的距离。

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

代码如下：

<!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>盒子模型之内边距</title>
    <style>
        div {
            width: 200px;
            height: 180px;
            background-color: rgb(235, 220, 12);
            /* 左边距移动20px */
            padding-left: 20px;
            /* 上边距移动30px */
            padding-top: 30px;

        }
    </style>
</head>

<body>
    <div>盒子内容是content
        盒子内容是content
        盒子内容是content
        盒子内容是content</div>
</body>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sPqOciaw-1664712454519)(Typora_image/094.png)]

padding属性(简写属性)可以有一到四个值。

值的格式	表达意思
padding:5px;	1个值，代表上下左右都有5像素内边距
padding:5px 10px;	2个值，代表上下内边距是5像素，左右内边距是10像素
padding:5px 10px 20px;	3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素
padding:5px 10px 20px 30px;	4个值，上是5像素，右10像素，下20像素，左30像素顺时针

执行代码：

<!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>盒子模型之内边距复合写法</title>
    <style>
        div {
            width: 600px;
            height: 200px;
            background-color: rgb(233, 177, 233);
            /* 内边距混合写法，一个值表示上下左右都是该值 */
            /* padding: 15px; */
            /* 两个值 代表 上下   左右 */
            /* padding: 20px 10px; */
            /* 三个值，代表 上   左右  下 */
            /* padding: 15px 30px 5px; */
            /* 四个值，代表 上  右 下   左 */
            padding: 20px 40px 60px 20px;
        }
    </style>
</head>

<body>
    <div>盒子内容是content盒子内容是content盒子内容是content盒子内容是content盒子内容是content盒子内容是content</div>
</body>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qOPiFrzu-1664712454520)(Typora_image/095.png)]

当我们给盒子指定padding值之后，发生了2件事情：

(1) 内容和边框有了距离，添加了内边距

(2) padding影响了盒子实际大小

也就是说，如果盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jRug76RE-1664712454522)(Typora_image/096.png)]

2.7 内边距会影响盒子的实际大小

如何解决，盒子大小已经设定好，修改内边距，会撑大盒子的问题？

解决办法：

如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可

代码如下：

<!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>内边距会影响盒子实际大小</title>
    <style>
        /* 需求，盒子200*150的大小不变，增加20px的内边距 */
        div {
            /* width: 200px; */
            width: 160px;
            /* height: 150px; */
            height: 110px;
            background-color: rgb(128, 211, 236);
            padding: 20px;
        }
    </style>
</head>

<body>
    <div>padding会影响盒子实际大小padding会影响盒子实际大小padding会影响盒子实际大小padding会影响盒子实际大小</div>
</body>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-da9yp5Zk-1664712454523)(Typora_image/097.png)]

2.7.1 案例：新浪导航案例-padding影响盒子好处

padding 可以撑开盒子，我们可以做非常巧妙的应用

因为每个导航栏里面的字数不一样多，我们可以不用给每个盒子宽度了，之间给padding最合适。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mAx8E3di-1664712454523)(Typora_image/098.png)]

给盒子设定padding,可以让所以的导航栏模块内边距相等。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aHQnomaF-1664712454525)(Typora_image/099.png)]

场景：遇到导航栏里面的文字字数不一样多的时候，最好使用padding.

案例的相关取值：

(1) 上边框为3像素，颜色为#ff8500

(2) 下边框为1像素，颜色为# edeef0

(3)盒子高度为41像素，背景颜色为#fcfcfc

(4) 文字颜色为#4c4c4c

案例代码如下：

<!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>新浪导航</title>
    <style>
        .nav {
            /* 高度为41px */
            height: 41px;
            /* 设置背景 */
            background-color: #fcfcfc;
            /* 上边框 */
            border-top: 3px solid #ff8500;
            /* 下边框 */
            border-bottom: 1px solid #edeef0;
            /* 垂直居中显示    行高等于height时，文字可以垂直居中*/
            line-height: 41px;
        }

        .nav a {
            /* a直接设定高度不会生效，因为a属于行内元素，需要转化为行内块元素 */
            /* height: 41px; */
            /* 设置下面两个代码，内容会竖着显示
            display: block;
            height: 41px; */
            display: inline-block;
            height: 41px;
            font-size: 12px;
            /* 文字颜色改变 */
            color: #4c4c4c;
            /* 去掉超链接的下划线 */
            text-decoration: none;
            /* 设置内边距，上下0像素，左右20像素 */
            padding: 0 20px;

        }

        .nav a:hover {
            /* 当鼠标经过的时候，改变背景色 */
            background-color: rgb(129, 236, 231);
            /* 当鼠标经过的时候， 改变文字颜色 */
            color: #ff8500;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
        <a href="#">其他</a>
        <a href="#">我知道</a>


    </div>
</body>

</html>

效果展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hnomoCFE-1664712454526)(Typora_image/100.png)]

2.7.2 案例：小米导航案例修改—padding影响盒子大小计算

padding内边距可以撑开盒子，有时候也会让我们去修改宽度。

所以小米侧边栏这个案例，文字距离左侧的距离不应该用text-indent这样不精确。

实际开发中的做法是给padding值，这样更加精确。

执行代码

<!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>简单小米侧边栏</title>
    <stYle>
        /* 把a转换为块级元素 */
        a {
            color: aliceblue;
            font-size: 14px;
            background-color: lightslategrey;
            display: block;
            /* width: 300px; */
            width: 270px;
            height: 40px;
            /* 去掉超链接的下划线 */
            text-decoration: none;
            /* 首行缩进两个字      这个写法不准确 */
            /* text-indent: 2em; */
            /* 此时内边距设置30px,此时整个盒子变成330，要想保持原来的盒子大小，需要更改width的大小 */
            padding-left: 30px;
        }

        /* 鼠标经过a给链接设置背景颜色 */
        a:hover {
            /* 这边用color只是改变字体颜色，不改变背景颜色，应该用background-color */
            /* color: orange; */
            background-color: orange;

        }
    </stYle>
</head>

<body>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
    <a href="#"></a>
</body>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mHLrUiqO-1664712454531)(Typora_image/101.png)]

重点：

如何盒子本身没指定width/height属性，则此时padding不会撑开盒子大小。

执行代码：

<!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>padding不会影响盒子大小的情况</title>
    <style>
        h1 {
            /* 如果给一个盒子不指定宽度，则默认是它父亲一样宽，h1的父亲是body,body就是浏览器的宽度。 */
            /* 此时不要写 */
            /* width: 100%; */
            /* 这样会超出 */
            height: 200px;
            background-color: rgb(94, 226, 175);
            padding: 30px;
        }

        div {
            width: 300px;
            height: 100px;
            background-color: rgb(73, 43, 207);

        }

        div p {
            /* 按道理，因为p没有指定像素，p的宽度会继承div的宽度 增加padding，则p会超过父亲div的像素  实际却不会*/
            padding: 30px;
            background-color: orange;
            /* 但是p没有超出  不要写 */
            /* width: 100%; */
            /* 这样会超出 */
        }
    </style>
</head>

<body>
    <h1></h1>
    <div>
        <p>孩子</p>
    </div>
</body>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tbSnyzeJ-1664712454533)(Typora_image/102.png)]

2.8 外边距(margin)

margin属性用于设置外边距，即控制盒子和盒子之间的距离。

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

外边距的简写和padding的简写一样。(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>盒子模型之外边距</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: rgb(214, 194, 101);
        }

        /* 给第一个盒子底部增加20px */
        /* .one {
            margin-bottom: 20px;
        } */
        /* 给第二个盒子上面增加20px */
        /* .two {
            margin-top: 20px;
        } */
        /* 给第二个盒子上下左右都增加20px */
        .two {
            margin: 20px;
        }
    </style>
</head>

<body>
    <div class="one">1</div>
    <div class="two">2</div>
</body>

</html>

效果如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yT0ysDtX-1664712454534)(Typora_image/103.png)]

2.9 外边距典型应用

外边距可以让盒子水平居中，但是必须满足两个条件

(1) 盒子必须指定了宽度(width).

(2) 盒子左右外边距都设置了auto.

语法：

.header { width:960px; margin:0 auto;}

常见的写法，以下三种都可以：

(1) margin-left:auto; margin-right:auto;

(2)margin:auto;

(3)margin:0 auto;

auto	[ˈɔːtəʊ]	汽车;
margin	[ˈmɑːdʒɪn]	边缘; 页边空白; 白边; 在这里指外边距

执行代码：

<!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>块级盒子水平居中对齐</title>
    <style>
        .header {
            width: 900px;
            height: 200px;
            background-color: orange;
            /* 水平居中 */
            /* margin: 0 auto; */
            /* 上下为100px，左右还是auto */
            margin: 100px auto;
            /* 只要实现左右为auto,就可以实现居中对齐 */
        }
    </style>
</head>

<body>
    <div class="header">想要把盒子水平居中</div>
</body>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jRfWpcRZ-1664712454535)(Typora_image/104.png)]

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center即可

执行代码：

<!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>块级元素的居中对齐</title>
    <style>
        div {
            width: 900px;
            height: 300px;
            background-color: rgb(54, 231, 163);
            /* 让盒子水平居中 */
            /* margin: 0 auto; */
            /* 让盒子上下为50px，左右还为auto */
            margin: 50px auto;
            /* 此时盒子居中了，但是里面文字没有居中 */
            /* 要让行内元素或者行内块元素水平居中给其父元素添加 text-align: center 即可; */
            text-align: center;

        }

        a {
            color: blue;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div>
        <!-- 行内元素的水平居中对齐 -->
        <a href="#">我想居中对齐</a>
    </div>
    <div>
        <!-- 行内块元素的水平居中对齐 -->
        <img src="../access/bjt.jpg" width="45px" height="45px" alt="这是一张图片">
    </div>

</body>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-48MPFCIy-1664712454537)(Typora_image/105.png)]

2.10 外边距合并

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

主要有两个情况：

(1) 相邻块元素垂直外边距的合并(兄弟级)

(2) 嵌套块元素垂直外边距的塌陷(父子级)

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

当上下相邻的两个块元素(兄弟关系)相遇时，如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则它们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ELgIhwNq-1664712454538)(E:/frontend/html_css/Typora_image/113.png)]

执行代码：

<!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>
        /*1. 先构造两个盒子 */
        .one,
        .two {
            width: 200px;
            height: 200px;
            background-color: orange;
        }

        /* 2.让第一张图产生100px的底侧外边距 */
        .one {
            margin-bottom: 100px;
        }

        /* 3.让第二张图产生200px的顶侧外边距 */
        .two {
            margin-top: 200px;
        }

        /* 此时两个盒子却相距200px,不是300px */
        /* 这种现象叫做外边距合并现象，以两个取值中较大的为准 */
    </style>
</head>

<body>
    <div class="one">第一张图</div>
    <div class="two">第二张图</div>
</body>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7JGQIKU4-1664712454541)(E:/frontend/html_css/Typora_image/106.png)]

解决办法：

尽量只给一个盒子添加margin值。

2.10.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>嵌套块元素合并问题</title>
    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: rgb(48, 152, 238);
            /*1. 让父元素往下移动50px */
            margin-top: 50px;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: rgb(245, 61, 153);
            /* 2.再让孩子往下移动100px  */
            margin-top: 100px;
            /* 此时父元素跟着下面，这个称为父元素的塌陷问题 */
            /* 此时谁移动的多，就用谁的取值作为塌陷值 */
        }
    </style>
</head>

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

</html>

效果图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gSXabUqY-1664712454541)(E:/frontend/html_css/Typora_image/107.png)]

对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NOQXtCxG-1664712454545)(E:/frontend/html_css/Typora_image/112.png)]

解决方案：

(1) 可以为父元素定义上边框

(2) 可以为父元素定义上内边距

(3) 可以为父元素添加overflow:hidden.

还有其他方法，比如浮动，固定，绝对定位的盒子不会有塌陷的问题，后期总结

执行代码：

<!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>嵌套块元素合并问题</title>
    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: rgb(48, 152, 238);
            /*1. 让父元素往下移动50px */
            margin-top: 50px;
            /* 解决方案1，给父元素定义上边框 */
            /* border: 1px solid purple; */
            /* border: 1px solid transparent */
            /* transparent表示透明 */
            /* 解决方案2，给父元素定义上内边距 */
            /* padding: 1px; */
            overflow: hidden;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: rgb(245, 61, 153);
            /* 2.再让孩子往下移动100px  */
            margin-top: 100px;
            /* 此时父元素跟着下面，这个称为父元素的塌陷问题 */
            /* 此时谁移动的多，就用谁的取值作为塌陷值 */
        }
    </style>
</head>

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

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6MWETSEK-1664712454546)(E:/frontend/html_css/Typora_image/108.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eCOm8TfP-1664712454549)(E:/frontend/html_css/Typora_image/109.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hVkP6aWc-1664712454550)(E:/frontend/html_css/Typora_image/110.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0DH7vGwE-1664712454558)(E:/frontend/html_css/Typora_image/111.png)]

2.11 清除内外边距

网页元素很多都嗲有默认的内外边距，而且不同浏览器默认的也不一定。因此我们在布局前，首先要清除下网页元素的内外边距

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

注意：

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级元素和行内块元素就可以了。

执行代码：

<!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>清除内外边距</title>
    <style>
        /* 清除内外边距 这也是css的第一行代码 */
        * {
            margin: 0;
            padding: 0;
        }

        span {
            background-color: rgb(27, 189, 67);
            /* 此时左右有效果，上下没有 */
            margin: 20px;
        }
    </style>
</head>

<body>
    123
    <ul>
        <li>有些标签本身就自带内外边距</li>
    </ul>
    <span>行内元素尽量只设置左右的内外边距</span>
</body>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pptHXwiP-1664712454562)(E:/frontend/html_css/Typora_image/114.png)]

3.PS的基本操作

因为网页美工大部分效果图都是利用ps(Photoshop)来做的，所以我们一行大部分切图工作都是在PS里面完成的。

(1) 文件–>打开：可以打开我们要测量的图片

(2) Ctrl+R: 可以打开标尺，或者视图–>标尺

(3) 右击标尺，把里面的单位改为像素

(4) Ctrl + 加号(+) 可以放大视图，Ctrl+减号(-)可以缩小视图。

(5) 按住空格键，鼠标可以变成小手，拖动PS视图。

(6) 用选区拖动，可以测量大小

(7)Ctrl + D 可以取消选区，或者在旁边空白处点击一下也可以取消选取。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YDZdyc5i-1664712454566)(E:/frontend/html_css/Typora_image/115.png)]

综合案例1：产品模块布局

(图片只是样例)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FMRtF6rC-1664712454571)(E:/frontend/html_css/Typora_image/116.png)]

执行代码：

<!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>综合案例-产品模型</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f5f5f5;
        }

        .box {
            width: 298px;
            height: 415px;
            background-color: #fff;
            /* 让块级盒子水平居中对齐 */
            margin: 100px auto;
        }

        .box img {
            /* 图片宽度跟盒子大小一样宽 */
            width: 100%;
            height: 200px;

        }

        .review {
            height: 70px;
            font-size: 14px;
            /* 给个padding值，因为没有width属性，所以padding不会撑开盒子的宽度 */
            padding: 0 28px;
            /* 因为这个盒子有高度height属性，如果设置padding-top时会撑大盒子，所以用margin-top */
            margin-top: 30px;
        }

        .appraise {
            font-size: 12px;
            color: #b0b0b0;
            margin-top: 20px;
            padding: 0 28px;
        }

        .info {
            font-size: 14px;
            /* 盒子与盒子之间的距离，最好用margin */
            margin-top: 15px;
            padding: 0 13px;
        }

        .info h4 {
            /* 把h4块元素变为行内块元素 */
            display: inline-block;
            /* 让文字不加粗 */
            font-weight: 400;
        }

        /* .info h4 a {
            color: #000;
            text-decoration: none;
        } */
        a {
            /* 超链接去下划线并改变颜色 */
            color: #000;
            text-decoration: none;
        }

        .info span {
            color: #ff6677;
        }

        .info em {
            font-style: normal;
            color: #ebe4e0;
            margin: 0 3px 0 3px;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="../access/horse.jpg" alt="这是一张图片" title="这是一匹马">
        <!-- 快捷键p.review -->
        <p class="review">此马非凡马，房星本是星。向前敲瘦骨，犹自带铜声。</p>
        <p class="appraise">来自于唐代李贺的评价</p>
        <div class="info">
            <h4><a href="#">在白云间欢腾，天地一切一览无余</a></h4>
            <em>|</em>
            <span>99.9元</span>
        </div>
    </div>
</body>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jI0Re9ol-1664712454574)(E:/frontend/html_css/Typora_image/117.png)]

总结：

(1)标签都是有语义的，合理的地方用合理的标签，比如产品标题用h,大量文字段落就用p

(2) 类名就是给每个盒子起了一个名字，可以更好的找到这个盒子，选取盒子更容易，后期更容易维护。

(3)margin和padding大部分情况都是可以混用的，但是根据实际情况，总有更简单的方法实现

(4)多运用辅助工具，比如屏幕画笔，ps等。

综合案例2:快报模板

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dkcdXHI1-1664712454575)(E:/frontend/html_css/Typora_image/118.png)]

执行代码：

<!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>新闻快报模块</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            /* 去掉页面中所有li前面的小圆点 */
            list-style: none;
        }

        .box {
            width: 248px;
            height: 163px;
            border: 1px solid #ccc;
            /* 把盒子移动到画面中央,让左右都为auto就可以了 */
            margin: 100px auto;
        }

        .box h3 {
            height: 32px;
            /* 点线dotted */
            border-bottom: 1px dotted #ccc;
            font-size: 14px;
            /* 取消加粗 */
            font-weight: 400;
            /* 让表头文字垂直居中，口诀就是行高等于盒子的高度 */
            line-height: 32px;
            /* 让文字水平居中用下面的代码 */
            /* text-align: center; */
            padding-left: 15px;
        }

        .box ul li a:hover {
            /* 鼠标经过的时候，链接下面出现下划线 */
            text-decoration: underline;
        }

        .box ul li a {
            font-size: 12px;
            color: #666;
            /* 去掉超链接下划线 */
            text-decoration: none;
        }

        .box ul li {
            height: 23px;
            /* 垂直居中 */
            line-height: 23px;
            /* 因为li没有指定宽度，所以不会撑开盒子 */
            padding-left: 20px;
        }

        .box ul {
            margin-top: 7px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h3>品优购快报</h3>
        <!-- 快捷键ul>li*5>a -->
        <ul>
            <!-- 按照shift+alt+鼠标左键，可以一下选五个 -->
            <li><a href="#">[特惠]降价大促销</a></li>
            <li><a href="#">[特惠]降价大促销</a></li>
            <li><a href="#">[特惠]降价大促销</a></li>
            <li><a href="#">[特惠]降价大促销</a></li>
            <li><a href="#">[特惠]降价大促销</a></li>
        </ul>
    </div>
</body>


</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AkkBQggk-1664712454576)(E:/frontend/html_css/Typora_image/119.png)]

4.圆角边框

在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变成圆角了。

border-radius属性用于设置元素的外边框圆角。

语法：

border-radius:length;

border	[ˈbɔːrdər]	边境; 边界; 边疆; 国界;
radius	[ˈreɪdiəs]	半径(长度); 桡骨; 周围;

radius半径(圆的半径)原理：(椭)圆与边框的交集形成圆形效果。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-umI4Me8d-1664712454578)(E:/frontend/html_css/Typora_image/120.png)]

参数值可以为数值或百分比

如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写50%

该属性是一个简写属性，其实后面可以跟四个值，分别代表左上角、右上角、右下角，左下角。

分开写分别是

border-top-left-radius	左上角
border-top-right-radius	右上角
border-bottom-right-radius	右下角
border-bottom-left-radius	左下角

执行代码：

<!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>圆角边距</title>
    <style>
        div {
            width: 300px;
            height: 280px;
            background-color: rgb(17, 180, 192);
            /* 把这个矩形盒子变成圆角 */
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ppA1XA6z-1664712454579)(E:/frontend/html_css/Typora_image/121.png)]

拓展：

执行代码：

<!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>圆形边框常用写法</title>
    <style>
        .yuanxing {
            width: 200px;
            height: 200px;
            background-color: rgb(167, 197, 34);
            /* 变成圆形  1.让它的半径等于这个正方形边长的一半 */
            /* border-radius: 100px; */
            /* 变成圆形   2.就是宽度和高度的一半，等价于100px */
            border-radius: 50%;
        }

        .juxing {
            width: 300px;
            height: 100px;
            background-color: rgb(190, 30, 182);
            /* 圆角矩形设置为高度的一半 */
            border-radius: 50px;
        }

        .radius {
            width: 200px;
            height: 200px;
            background-color: rgb(250, 8, 8);
            border-radius: 10px 20px 30px 40px;
            display: inline-block;
        }

        .test {
            width: 200px;

            height: 200px;
            background-color: rgb(200, 233, 14);
            /* 两个数值的对角线的关系 */
            border-radius: 10px 40px;
            display: inline-block;
        }

        .test_test {
            width: 200px;
            height: 200px;
            background-color: rgb(26, 206, 230);
            /* 设三个值，分别是左上，右上左下，右下 */
            border-radius: 10px 30px 50px;
            display: inline-block;
        }

        .single {
            width: 200px;
            height: 200px;
            background-color: rgb(247, 243, 197);
            /* 只让左上角显示20px */
            border-top-left-radius: 20px;
        }
    </style>
</head>

<body>
    1.圆形的做法
    <div class="yuanxing"></div>
    2.圆形矩形的做法
    <div class="juxing">radius后面跟一个值</div>
    3.可以设置不同的圆角
    <div class="radius">radius后面跟四个值</div>
    <div class="test">radius后面跟两个值</div>
    <div class="test_test">后面跟三个数值</div><br>
    4.可以单个角设置
    <div class="single">单个角设置</div>
</body>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sD9XNKpa-1664712454581)(E:/frontend/html_css/Typora_image/122.png)]

5.盒子阴影

CSS中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影效果。

语法：

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需。水平阴影的位置。允许负值
v-shadow	必需。垂直阴影的位置。允许负值
blur	可选。模糊距离 (影子的虚实)
spread	可选。阴影的尺寸
color	可选。阴影的颜色。请参阅CSS颜色值。
inset	可选。将外部阴影(outset)改为内部阴影。

注意：

(1) 默认的是外阴影(outside),但是不可以写这个单词，否则导致阴影效果无效

(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>盒子阴影</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: rgb(26, 151, 182);
            /* 让盒子上下100px，居中显示 */
            margin: 100px auto;
            /* 水平阴影 垂直阴影  模糊距离  阴影尺寸  阴影颜色 */
            /* box-shadow: 10px 10px 10px 10px black; */
            /* 将阴影调整为半透明色 */
            /* box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .3); */
            /* 默认外阴影，不可以写outside,写上不起效果。    可以改为内阴影 */
            /* box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .4) inset; */
            /* 也可以只设置水平阴影和垂直阴影 其他都是默认值 */
            /* box-shadow: 10px 10px; */
        }

        /* 原先盒子没有影子，当我们鼠标经过盒子就添加阴影效果 */
        div:hover {
            box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .4);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WnUqaNRu-1664712454582)(E:/frontend/html_css/Typora_image/123.png)]

6.文字阴影

在CSS中，我们可以使用text-shadow属性将阴影应用于文本。

语法：

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离
color	可选。阴影的颜色。参阅CSS颜色值。

执行代码：

<!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>文字阴影</title>
    <style>
        div {
            width: 400px;
            font-size: 35px;
            color: orange;
            /* 正常值是400，加粗是700 */
            font-weight: 700;
            /* 添加文字阴影 */
            text-shadow: 5px 5px 6px rgba(0, 0, 0, .4);
            /* 用外边距实现居中显示 用下面代码没实现，有待研究 */
            /* 发现问题：盒子必须要指定宽度，才可以实现居中 */
            margin: auto;

        }
    </style>
</head>

<body>
    <div>脚踏实地，仰望星空</div>
</body>

</html>