Html内外宽度已经清除浮动基础笔记

最新推荐文章于 2024-03-16 20:07:31 发布

红豌豆

最新推荐文章于 2024-03-16 20:07:31 发布

阅读量85

点赞数

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

本文链接：https://blog.csdn.net/qq_64353584/article/details/122591380

版权

本文介绍了HTML中关于浮动的基础知识，包括宽度剩余法、盒子模型和盒子阴影。详细讲解了浮动效果如何使文字环绕，并探讨了浮动的特性及应用，如改变浮动元素模式、实现一系列宽度居中和不同样式布局。同时，文章强调了清除浮动的重要性，讨论了通过清除盒子浮动、BFC和伪元素after及双伪元素方法来解决浮动带来的问题。

摘要由CSDN通过智能技术生成

宽度剩余法

   <!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 type="text/css">
                div{
                    width: 300px;
                    height: 50px;
                    border: 1px solid hotpink;
                }
                /*不指定子类元素的宽度值*/
                h3{
                    margin-left: 30px;
                    background-color: purple;
                }
            </style>
        </head>
        <body>
            <div>
                <h3>稳住，别浪队友</h3>
            </div>
        </body>
        </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 type="text/css">
                div{
                    width: 300px;
                    height: 50px;
                    border: 1px solid hotpink;
                }
                /*不指定子类元素的宽度值*/
                h3{
                    margin-left: 30px;
                    background-color: purple;
                }
            </style>
        </head>
        <body>
            <div>
                <h3>稳住，别浪队友</h3>
            </div>
        </body>
        </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 type="text/css">
                h1{
                    font-size: 100px;
                    text-shadow: 10px 3px 3px rgba(99, 100, 33, 0.8); /*水平距离 垂直距离 模糊距离 阴影颜色*/
                }
                div{
                    width: 200;
                    height: 200px;
                    border: 1px solid rebeccapurple;
                    /*box-shadow: 5px 5px 3px 4px rgba(200, 195, 99, 0.6);*/ /*水平距离 垂直距离 模糊距离 阴影尺寸  阴影颜色 内外阴影[inset outset]*/
                    box-shadow: 0 15px 30px rgba(0, 0, 0, .4);

                }
            </style>
        </head>
        <body>
            <h1>稳住，我们能赢</h1>
            <div></div>
        </body>
        </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 type="text/css">
                div{
                    width: 300px;
                    height: 300px;
                    background-color: hotpink;
                    margin: 100px;
                    background: url(shui.jpg) 0 0 no-repeat;
                    font-size: 30px;
                    text-align: center;
                    line-height: 300px;
                    color: rgba(255, 255, 255, 0.7); /*颜色半透明*/
                    border-radius: 50%; /*变为一个圆角*/
                    box-shadow: 5px 5px 10px 16px rgba(255, 255, 0255, .4) inset , 5px 4px 10px rgba(0, 0, 0, 0.3); /*盒子阴影内阴影*/
                }
            </style>
        </head>
        <body>
            <div>水晶图片</div>
        </body>
        </html>

float 浮动
文字环绕

<!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 type="text/css">
                div{
                    width: 500px;
                    height: 500px;
                    border: 1px solid hotpink;
                    margin: 0 auto; /*盒子居中*/
                    font-size: 20px;
                    overflow: hidden;
                }
                img{
                    float: right; /*浮动。实现文字环绕效果*/
                }
            </style>
        </head>
        <body>
            <div>