浮动

最新推荐文章于 2023-03-25 16:12:57 发布

一份蛋炒饭

最新推荐文章于 2023-03-25 16:12:57 发布

阅读量56

点赞数

分类专栏：学习文章标签： css

本文链接：https://blog.csdn.net/weixin_52019215/article/details/114604152

版权

学习专栏收录该内容

9 篇文章 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>Document</title>
</head>
<body>
    <!-- border-radius只是会影响盒子的背景,不会影响盒子里面的内容,里面内容还是按照未设置边框时候显示 -->

    <!-- 盒子影子:
          box-shadow: x方向阴影位置(可负) y方向阴影距离(可负) 阴影模糊距离(阴影与盒子的距离) 阴影扩散距离 阴影颜色 阴影显示方向(内:inset,默认是向外outset但是不要写,否则无效)
          box-shadow: 10px 10px [10px] [10px] [rgba(red, green, blue, alpha)] [inset]; tip:[]表示可以不写 -->
          <!-- 阴影不会影响盒子的大小 -->
    <!-- 文字阴影:
          text-shadow: x方向阴影位置 y方向阴影位置 模糊距离 颜色 
          text-shadow:10px 10px 10px rgba(0, 0, 0, .3);-->
    
    <!-- 浮动: -->
          <!-- 网页布局的三种方式:标准流 浮动 定位 -->
          <!-- 标准流:标签按照规定好的默认方式排列（块级元素、行内元素、行内块元素）； -->
          <!-- 浮动:
                    浮动后的块元素之间无间隙      
                    网页布局第一准则:多个块元素垂直排列用标准流                      多个块元素垂直排列用浮动-->
                    <!--概念:float 属性用于创建浮动框，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。  -->
                    <!-- 浮动特性:
                                1 脱离标准流(脱标)
                                2 一行显示且顶部对齐
                                3 具有行内块元素特性(但是彼此之间无间隙)
                                4 脱标的盒子不保留原来的位置,后续盒子会占据它的位置
                                5 浮动的盒子不会压住占据它位置盒子的内容
                                6 浮动只会影响浮动后面的标准流盒子,对其之前的标准流盒子无影响
                                7 如果父级盒子装不下里面浮动的盒子,则浮动盒子会另一行显示
                                8 行内元素(任何元素)可以添加浮动,可以设置宽高
                                9 块级元素如果不设置宽度后添加浮动,则添加浮动后的该块级元素具有行内块元素的特点,其宽度取决于内容的宽度 -->
                    <!-- 清除浮动:
                                1 额外标签法:在浮动盒子最后一个后面添加一个块级元素,然后给这个元素设置clear: both; W3C组织推荐使用
                                2 父元素添加overflow: hidden;
                                3 伪元素清除浮动:
                                       .clearfix::after {
                                           content: '';
                                           display: block;
                                           height: 0;
                                           visibility: hidden;
                                           clear: both;
                                       }
                                       .clearfix {
                                           解决IE6 / 7兼容问题 
                                           *zoom: 1;
                                       } 
                                4 双伪元素清除浮动:
                                       .clearfix::before,
                                       .clearfix::after {
                                           content: '';
                                           display: table;
                                       }
                                       .clearfix::after {
                                           clear: both;
                                       }
                                       .clearfix {
                                           [IE6/7专用]
                                           *zoom: 1;
                                       }
                                       -->
    <style>
        .box {
            box-shadow: 10px 10px 10px 10px rgba(red, green, blue, alpha) inset;
        }
        .textShadow {
            text-shadow: 10px 10px 5px rgba(0, 0, 0, .3);
            /* text-shadow: 5px 5px #558abb; */
            /* text-shadow: #fc0 1px 0 10px; */
            /* text-shadow: white 2px 5px; */
            /* text-shadow: 5px 10px */
        }
    </style>

    <div class="box"></div>
    <p class="textShadow">Far out in the <br>
        uncharted <br>
        backwaters of the<br>
         unfashionable end <br>
         of the western spiral<br>
          arm of the Galaxy...</p>

</body>
</html>

一份蛋炒饭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
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>Doc
复制链接

扫一扫