PINK老师HTML5+CSS3教程6-优快云博客

本文链接：https://blog.youkuaiyun.com/incandescent__dr/article/details/124913786

本文详细介绍了HTML5中的CSS3特性，包括圆角边框、盒子阴影和文字阴影的使用方法。重点讲解了浮动的概念及其特性，如元素脱离标准流、一行显示、行内块元素特性等，并探讨了浮动在网页布局中的应用和清除浮动的必要性，提供了多种清除浮动的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

PINK老师HTML5+CSS3教程6

前言
一、圆角边框
二、盒子阴影
三、文字阴影
四、浮动
总结

前言

提示：这里可以添加本文要记录的大概内容：

https://www.bilibili.com/video/BV14J4114768?p=165&spm_id_from=pageDriver

提示：以下是本篇文章正文内容，下面案例可供参考

一、圆角边框

border-radius: 10px;
数值越大，弧度越明显
border-radius: length;
可以是px 也可以是百分比（宽度和高度）
可以跟四个值左上右上右下左下
border-radius: 10px 20px 30px 40px;
分开写的话可以写成 border-top-left-radius: 20px;

二、盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset
模糊距离影子是虚还是实
阴影尺寸影子大小
在这里插入图片描述

box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);

三、文字阴影

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

在这里插入图片描述

四、浮动

可以改变元素标签默认排列方式
可以让多个块级元素一行内显示
网页布局第一原则：多个块级元素纵向排列找标准流，横向排列找浮动

1.什么是浮动

选择器{ float:属性值}
float用于创建浮动属性框，将其移动到一边，直到左边缘或右边缘触及包含块及另一个浮动框的边缘
在这里插入图片描述

2.浮动特性

1.浮动元素会脱离标准流（脱标)

脱离标准普通流的控制（浮）移动到指定位置（动）
浮动的盒子不再保留原先的位置

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动特性1</title>
    <style>
        /* 设置了浮动（float）的元素会：
        1. 脱离标准普通流的控制（浮）移动到指定位置（动）。
        2.浮动的盒子不在保留原先的位置 */
        .box1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: rgb(0, 153, 255);
        }
    </style>
</head>

<body>
    <div class="box1">浮动的盒子</div>
    <div class="box2">标准流的盒子</div>
</body>

2.浮动元素会一行内显示并且元素顶部对齐

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动元素特性-浮动元素一行显示</title>
    <style>
        div {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .two {
            background-color: purple;
            height: 249px;
        }

        .four {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div class="two">2</div>
    <div>3</div>
    <div class="four">4</div>
</body>

</html>

3.浮动的元素会具有行内块元素的特性

任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性

代码如下（示例）：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动的元素具有行内块元素特点</title>
    <style>
        /* 任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。 */
        span,
        div {
            float: left;
            width: 200px;
            height: 100px;
            background-color: pink;
        }

        /* 如果行内元素有了浮动,则不需要转换块级\行内块元素就可以直接给高度和宽度 */
        p {
            float: right;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <span>1</span>
    <span>2</span>

    <div>div</div>
    <p>ppppppp</p>
</body>

如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，根据内容来决定
浮动的盒子中间是没有缝隙的，是紧挨在一起的
行内元素同理

4.浮动元素和标准流父级搭配使用

先用标准流的父元素上下排列，之后内部子元素用浮动元素左右排列

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动元素搭配标准流父盒子1</title>
    <style>
        .box {
            width: 1200px;
            height: 460px;
            background-color: pink;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 230px;
            height: 460px;
            background-color: purple;
        }

        .right {
            float: left;
            width: 970px;
            height: 460px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
    </div>
</body>

5.浮动元素两个注意点

1、浮动和标准流的父盒子搭配
2、一个元素浮动了，理论上其余的兄弟元素也要浮动
浮动的盒子只会影响浮动盒子后面的标准流，不会影响千米那的标准流

6.清除浮动

理想状态，让子盒子撑开父盒子，不指定高度
很多父盒子不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0，影响下面的标准流盒子，对排版产生影响
清除浮动本质：清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动，清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流

选择器{clear:属性值}
属性值为left right both 清湖左侧浮动右侧浮动左右两侧浮动
实际开发中只用clear: both
清除浮动的策略：闭合浮动

1.清除浮动方法

1、额外标签法隔墙法
在最后一个子元素后再加一个空的标签块级元素例如div，然后style里clear: both 缺点多了许多无意义标签结构化较差
2、父级添加overflow属性
给父级添加overflow属性值为hidden auto scroll均可
无法显示溢出的部分
3、父级添加after伪元素额外标签法升级
给父元素添加 :clear

        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }
        ...
      <div class="box clearfix">

4、父级添加双伪元素
前后都堵上

        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

        <div class="box clearfix">