CSS —— 阴影、浮动

最新推荐文章于 2023-03-15 15:04:23 发布

逃逃日塔灰

最新推荐文章于 2023-03-15 15:04:23 发布

阅读量528

点赞数

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

本文链接：https://blog.csdn.net/sokoooo/article/details/113786108

版权

前端专栏收录该内容

26 篇文章 1 订阅

订阅专栏

CSS —— 阴影、浮动

一、阴影

1. 盒子阴影

1.1 box-shadow：为盒子设置阴影；

1.2 语法格式：

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

        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            box-shadow: 10px 10px 10px 10px black;
        }

1.3 属性值：

① 水平阴影的值越大，阴影越向右，值越小越向左；

② 垂直阴影的值越大，阴影越朝下，值越小越朝上；

③ 模糊程度值越大则越模糊，否则越清晰；

1.4 注意：

① 一般默认的为外阴影；

② 盒子阴影不占用空间，不会影响其他盒子排列；

2. 文字阴影

2.1 text-shadow：设置文本阴影；

2.2 语法格式：

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

        p {
                font-style: 28px;
                color: skyblue;
                text-shadow: 10px 10px 15px #000;
        }

2.3 属性值：

与盒子阴影一样；

二、浮动

1. 概述

1.1 浮动：用float属性创建浮动框，将其移动到一边，直到边缘触及包含块或另一个浮动框的边缘；

1.2 语法格式：

选择器 { float: 属性值;}

        .box {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
        }
        .bbox {
            float: right;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }

1.3 属性值：

2. 浮动的特性

2.1 浮动元素会脱离标准流，称为脱标，不再保留原来的位置；

        .box {
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .bbox {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }

<body>
    <div class="box"></div>
    <div class="bbox"></div>
</body>

2.2 浮动元素会在一行内显示并且元素顶部对齐；

        .box {
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .bbox {
            float: left;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        .obx {
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }

<body>
    <div class="box"></div>
    <div class="bbox"></div>
    <div class="obx"></div>
</body>

2.3 浮动元素会具有行内块元素的特性；

        span {
            float: left;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }

注：任何元素都可以浮动，且若行内元素有了浮动，则不需要转换块级或行内块元素就可以直接给宽度和高度。

2.4 浮动的盒子中间没有缝隙紧挨在一起，若块级盒子没有设置宽度，则默认宽度和父级一样宽，但添加浮动后，大小根据内容决定；

3. 浮动布局注意点

3.1 浮动元素常与标准流父级搭配使用；

具体操作为：先用标准流父元素排列上下位置，之后内部子元素再采取浮动排列左右位置；

3.2 一个元素浮动了，同一父级的其余子元素同样也要浮动（一浮全浮）；

3.3 浮动的元素只会影响浮动盒子后面的标准流，不会影响前面的标准流；

4. 清除浮动

4.1 本质：清除浮动元素造成的影响；

4.2 方法：

① 额外标签法（隔墙法）

选择器 {clear: 属性值;}

② 父级添加 overflow属性

③ 父级添加 after伪元素

④ 父级添加双伪元素

#END（部分截图源于b站pink老师）

逃逃日塔灰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS —— 阴影、浮动

CSS —— 阴影、浮动一、阴影1. 盒子阴影1.1 box-shadow：为盒子设置阴影；1.2 语法格式：box-shadow : h-shadow v-shadow blur spread color inset; div { width: 200px; height: 200px; background-color: skyblue; bo...
复制链接

扫一扫

专栏目录