当前位置：首页 > article >正文

CSS入门学习笔记（二）

article 2025/2/12 0:54:05

学习视频：https://www.bilibili.com/video/BV1zN2UYoEEo/

浮动
- 浮动的几种应用效果
- - 设置img浮动，去掉空隙
  - 设置div重叠，位于上下层
  - 多个div水平排列
  - 宽度不足时，会自动换行
  - li元素水平排列
- 浮动的副作用
- 解决副作用——清除浮动
- - 方法1：为父元素设置高度
  - 方法2：受影响元素添加clear属性
  - 方法3：overflow清除浮动
  - 方法4：伪对象方式
定位
- 相对定位
- 绝对定位
- 固定定位
- 总结
- z-index
CSS3新特性
- 圆角border-radius
- 阴影box-shadow
- 动画
- 媒体查询
- - 设置meta标签
  - 媒体查询语法
雪碧图
字体图标

浮动

浮动，就是增加一个浮层来放置内容。
可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面：

在这里插入图片描述

通过float属性定义元素往哪个方向浮动（只有左右浮动，没有上下浮动），
任何元素都可以浮动，浮动后元素脱离文档流。
float属性有两个值：left和right。

浮动的几种应用效果

设置img浮动，去掉空隙

    <style>
        img{
            float: left;
            width: 200px;
        }
    </style>
</head>
<body>
    <img src="girl.png" />
    <img src="girl.png" />
</body>

设置div重叠，位于上下层

<head>
    <style>
        .top{
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
            float: left;
        }
        .bottom{
            width: 300px;
            height: 200px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="bottom"></div>
</body>

在这里插入图片描述
也可以设置float为right，使其向右浮动。

多个div水平排列

<head>
    <style>
        div{
            width: 100px;
            height: 100px;
            float: left;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: green;
        }
        .box3{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

在这里插入图片描述

宽度不足时，会自动换行

在上面基础上，给body设置宽度：

        body{
            width: 250px;
        }

则由于宽度不够，第三个盒子自动换行了：
在这里插入图片描述
如果宽度为50px，则变成垂直排列了：

在这里插入图片描述

li元素水平排列

<head>
    <style>
        li{
            float: left;
            margin-left: 50px;
        }
    </style>
</head>
<body>
    <ul>
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
        <li>导航4</li>
    </ul>
</body>

效果：
在这里插入图片描述

浮动的副作用

使用浮动前，在一个灰色div内有三个小的红色div盒子：

<head>
    <style>
        .container{
            width: 500px;
            height: 400px;
            background-color:#aaa;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color:red;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>

在这里插入图片描述

现在想让三个div水平排列，并且随着宽度变化可以自动换行，于是使用浮动，也就是为box类添加float: left;，得到效果图如下：

在这里插入图片描述
发现灰色背景的div不见。调试可发现该div高度为0，所以不可见。

由此产生了问题：浮动导致父元素高度塌陷。（浮动不会参与父元素高度的计算）

可以再添加一个非浮动的子元素，则父元素的高度只是按这个非浮动子元素的高度进行计算。

也就是添加了p样式，以及div内外两个p元素：

        p{
            background-color: aqua;
        }
        
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <p>Hello world!</p>
    </div>
    <p>Hello world!</p>

在这里插入图片描述

总结一下浮动的副作用：

浮动元素会造成父元素高度塌陷
后续元素会受到影响

解决副作用——清除浮动

方法1：为父元素设置高度

为父元素设置高度300px：
在这里插入图片描述
存在问题：父元素内部的子元素仍会被浮动元素遮挡、父元素高度写死了不灵活。

方法2：受影响元素添加clear属性

为父元素内部的p元素添加clear属性（为了简洁，就为所有p都添加了clear属性）：

        p{            
            clear: both;
        }

在这里插入图片描述

clear属性有三个值：left、right、both，可以选择清除某一个方向的浮动，也可以都清除。

使用clear属性后，也可以同时为父元素添加高度，效果如下：

在这里插入图片描述

方法3：overflow清除浮动

父元素可以不设置高度，而是为父元素添加属性overflow和clear：

        .container{
            width: 500px;
            /* height: 300px; */
            background-color:#aaa;
            overflow: hidden;
            clear: both;
        }

效果（父元素外部的会排在父元素下方，而父元素内部的还是会被挡住）：

在这里插入图片描述
如果想让父元素内部元素不被浮动元素挡住，则同时使用方法2，为内部的p元素添加clear:both。

方法4：伪对象方式

为父元素添加伪类after，设置空的内容，设置为块级元素，并使用clear: both：

        .container{
            width: 500px;
            /* height: 300px; */
            background-color:#aaa;
        }
        .container::after{
            content: '';
            display: block;
            clear: both;
        }

效果图和方法3的效果图一样。

定位

position属性指定了定位的类型：

relative，相对定位
absolute，绝对定位
fixed，固定定位

绝对定位和固定定位会脱离文档流，设置定位后，可以使用left、right、top、bottom四个属性调整位置。

相对定位

相对定位，是在文档流内调整位置。

<head>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: #18e709;
            opacity: 0.4;
            position: relative;
            top:10px;
            left:50px;
        }
    </style>
</head>
<body>
    <p>Hello world!</p>
    <div></div>
</body>

在这里插入图片描述

绝对定位

绝对定位则脱离了文档流。

在上面代码基础上，修改position为absolute，效果图：

在这里插入图片描述
不像浮动（都是在一层中），每一个元素的绝对定位都是单独的一层。所以如果要实现多个元素的压盖，则可以使用绝对定位。

固定定位

与绝对定位的区别：当内容多出现滚动条，随着页面滚动，固定定位的元素不会滚动，而是始终在一个位置处。

总结

设置定位后，相对定位和绝对定位是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档。

<head>
    <style>
        html, body{
            margin: 0;
        }
        .container {
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
            position: relative;
            margin: 20px;
        }
        .box {
            width: 100px;
            height: 80px;
            background-color: red;
            position: absolute;
            left: 20px;
        }
    </style>
</head>

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

在这里插入图片描述

z-index

z-index表示堆叠顺序。

当发生堆叠时，z-index的值越大，堆叠顺序越高，越排在上层显示。

CSS3新特性

圆角border-radius

    <style>
        div{
            width: 100px;
            height: 50px;
            background-color:aquamarine;
            border-radius:20px;
        }
    </style>
</head>
<body>
    <div></div>
</body>

在这里插入图片描述

在这里插入图片描述
设置宽高相同且border-radius值为50%（大于50%时的效果和50%一样），则变成圆形：

        div{
            width: 100px;
            height: 100px;
            background-color:aquamarine;
            border-radius: 50%;
        }

在这里插入图片描述

阴影box-shadow

在这里插入图片描述
box-shadow第一个值是水平偏移距离，例如设置为10px，则向右偏移10px：

        div{
            width: 200px;
            height: 140px;
            background-color:aquamarine;
            border-radius: 10px;
            margin: auto auto;
            box-shadow: 10px 0 0 #999;
        }

在这里插入图片描述
如果是-10px，则向左偏移10px：

在这里插入图片描述

同理，box-shadow第二个值是垂直偏移量，正值向下偏移，负值向上偏移。

通常习惯设置两个正值，即向右向下偏移。

box-shadow: 10px 10px 0 #999;

在这里插入图片描述

box-shadow第三个值是模糊距离（应该是在偏移的基础上再向外渐变一定距离），例如分别设置为5px、10px、20px，则效果：

在这里插入图片描述

动画

动画，使元素从一种样式逐渐变化为另一种样式的效果。

使用@keyframes关键词（后面紧跟着动画名称）创建动画，一种是使用百分比（可以写很多个百分比，支持多种变化），一种是只有from/to（只有开始和结束，只有两种变化）：

    <style>
        @keyframes myAnimi {
            from{
                background-color: antiquewhite;
            }
            to{
                background-color: aqua;
            }
        }

        @keyframes myAnimi2 {
            0%{
                background-color: antiquewhite;
            }
            50%{
                background-color: aqua;
            }
            100%{
                background-color: blue;
            }
        }
    </style>

然后调用动画：

        div{
            width: 100px;
            height: 100px;
            background-color: azure;
            animation: myAnimi 2s linear 0s infinite;
            animation-play-state: running;
        }

在这里插入图片描述

可以添加鼠标悬浮时动画暂停：

        div:hover{
            animation-play-state: paused;
        }

媒体查询

媒体查询能在不同的设备条件下使用不同的样式。

设置meta标签

使用设备的宽度作为视图宽度步兵禁止初始的缩放，在head标签里加入meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width，宽度等于当前设备的宽度
initial-scale=1.0初始的缩放比例，默认设置为1.0
maximum-scale=1允许用户缩放到的最大比例，默认设置为1.0
user-scalable=no用户是否可以手动缩放，默认设置为no

下面对比一下添加和不添加上面meta标签的区别，首先绘制一个div：

        div{
            width: 300px;
            height: 300px;
            background-color: red;
        }

下图上面是保留meta标签，下面是去掉meta标签的效果对比：
在这里插入图片描述
第二张图中的300px不是真正的300px，而是根据pc端的页面进行缩放了，不是按照原比例显示的。

媒体查询语法

        /* 小于768px时 */
        @media screen and (max-width: 768px) {
            div {
                background-color: red;
            }
        }
        /* 大于等于768px，小于996px */
        @media screen and (min-width: 768px) and (max-width: 996px){
            div {
                background-color: green;
            }
        }
        /* 大于等于996px时 */
        @media screen and (min-width: 996px) {
            div {
                background-color: blue;
            }
        }

雪碧图

CSS Sprite也叫做CSS精灵图/CSS雪碧图，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中。

例如有下面一张图，里面有很多小图：

在这里插入图片描述

只需要向服务器请求一次，获得该大图，前端再根据需要选择具体某些小图，从而减少对服务器的请求次数。

原理：

通过background-image引入背景图片
通过background-position把背景图片移动到自己需要的位置

    <style>
        span{
            width: 90px;
            height: 90px;
            display: block; 
            background-image: url(icons.png);
            border: 1px solid #000;
        }
        .icon{
            background-position: -17px -27px;
        }
        .icon2{
            background-position: -136px -27px;
        }
    </style>
</head>

<body>
    <span class="icon"></span>
    <span class="icon2"></span>
</body>

在这里插入图片描述

字体图标

优点：

轻量性：加载速度快，减少http请求
灵活性：可以利用CSS设置大小颜色等
兼容性：网页字体支持所有现代浏览器，包括IE低版本

到阿里巴巴矢量图标库下载图标代码：

注册账号并登录
搜索图标、选择图标
将图标添加到购物车
下载图标代码，获得压缩包
将压缩包解压

例如，解压后得到如下文件：

在这里插入图片描述

打开里面的html文件，可以看到有几种引用图标的方式，此处采用font-class 引用的方式：

引入项目下面生成的 fontclass 代码

<link rel="stylesheet" href="./iconfont.css">

挑选相应图标并获取类名，应用于页面

<span class="iconfont icon-xxx"></span>

然后可以像修改字体一样修改图标：

    <style>
        .myicon{
            font-size: 40px;
            color: red;
        }
    </style>
</head>

<body>
    <span class="iconfont icon-jianzhuye myicon"></span>
</body>