CSS —— 阴影、浮动

CSS —— 阴影、浮动

 

目录

CSS —— 阴影、浮动

一、阴影

1. 盒子阴影

2. 文字阴影

二、浮动

1. 概述

2. 浮动的特性

3. 浮动布局注意点

4. 清除浮动

#END(部分截图源于b站pink老师)


 

 

一、阴影

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;
        }

CSS —— 阴影、浮动

1.3 属性值:

CSS —— 阴影、浮动

水平阴影的值越大,阴影越向右,值越小向左

垂直阴影的值越大,阴影越朝下,值越小朝上

模糊程度值越大越模糊,否则越清晰;

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;
        }

CSS —— 阴影、浮动

2.3 属性值:

CSS —— 阴影、浮动

与盒子阴影一样;

 

 

二、浮动

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;
        }

CSS —— 阴影、浮动

1.3 属性值:

CSS —— 阴影、浮动

 

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>

CSS —— 阴影、浮动

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>

CSS —— 阴影、浮动

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

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

CSS —— 阴影、浮动

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

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

 

3. 浮动布局注意点

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

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

CSS —— 阴影、浮动

3.2 一个元素浮动了,同一父级的其余子元素同样也要浮动(一浮全浮)

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

 

4. 清除浮动

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

4.2 方法:

① 额外标签法(隔墙法)

选择器 {clear: 属性值;}

CSS —— 阴影、浮动

CSS —— 阴影、浮动

② 父级添加 overflow属性

CSS —— 阴影、浮动

③ 父级添加 after伪元素

CSS —— 阴影、浮动

④ 父级添加 双伪元素

CSS —— 阴影、浮动

 

#END(部分截图源于b站pink老师)

上一篇:Linux_Joth the Ripper工具、NAMP命令


下一篇:CSS:shadow,mask,column...