CSS基础

最新推荐文章于 2024-03-13 17:05:22 发布

先模仿再超越

最新推荐文章于 2024-03-13 17:05:22 发布

阅读量323

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_51220629/article/details/124461360

版权

1. 垂直对齐方式

1.1 了解基线

浏览器文字类型元素排版中存在用于对齐的基线（baseline）

问题：当图片和文字在一行中显示时，其实底部不是对齐的：

1.2 垂直对齐方式

那么如何解决行内/行内块元素垂直对齐问题？

使用属性名：vertical-align：

项目中 vertical-align 可以解决的问题：

1. 文本框和表单按钮无法对齐问题

2. input和img无法对齐问题

3. div中的文本框，文本框无法贴顶问题

4. div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题

5. 使用line-height让img标签垂直居中问题

2. 光标类型

设置鼠标光标在元素上时显示的样式

属性名：cursor

3. 边框圆角

让盒子四个角变得圆润，增加页面细节，提升用户体验

属性名：border-radius

常见取值：数字+px 、百分比

赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！

常见情景：

➢ 画一个正圆：

1. 盒子必须是正方形

2. 设置边框圆角为盒子宽高的一半 → border-radius:50%

➢ 胶囊按钮：

1. 盒子要求是长方形

2. 设置 → border-radius：盒子高度的一半

4. overflow溢出部分显示效果

溢出部分：指的是盒子内容部分所超出盒子范围的区域，比如：

使用场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……

属性名：overflow

5. 元素本身隐藏

场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏

常见属性：

1. visibility：hidden

2. display：none

➢ 区别：

1. visibility：hidden 隐藏元素本身，并且在网页中占位置

2. display：none 隐藏元素本身，并且在网页中不占位置

➢ 注意点：开发中经常会通过 display属性完成元素的显示隐藏切换

display：none；（表示隐藏）、 display：block；（表示显示）

6. 过渡（重点）

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画：是从一个状态渐渐的过渡到另外一个状态可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持（ie9以下版本）但是不会影响页面布局。

我们现在经常和 :hover 一起搭配使用。

使用方法：transition: 要过渡的属性花费时间运动曲线何时开始;（后面两个可以省略）。

1.属性：想要变化的 css 属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all 就可以。

2. 花费时间：单位是秒（必须写单位）比如 0.5s

3. 运动曲线：默认是 ease （可以省略）

4.何时开始：单位是秒（必须写单位）可以设置延迟触发时间默认是 0s （可以省略）

<!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>
    <style>
        /* 过渡配合hover使用, 谁变化谁加过渡属性 */
        div{
            width: 400px;
            height: 400px;
            background-color: pink;
            /* 宽度400, 悬停的时候宽度200, 花费1秒钟 */
            /* transition: width 1s, background-color 2s; */

            /* 如果变化的属性多, 直接写all,表示所有 */
            transition: all 2s;
        }
        div:hover{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

7. 透明度

7.1 基本使用

场景：让某元素整体（包括内容）一起变透明

➢ 属性名：opacity

➢ 属性值：0~1之间的数字

1：表示完全不透明

0：表示完全透明

➢ 注意点：

opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……

7.2 CSS三角

场景：在网页中展示出小三角形时，除了可以使用图片外，还可以使用代码完成。

➢ 实现原理：利用盒子边框完成

➢ 实现步骤：

1. 设置一个盒子

2. 设置四周不同颜色的边框

3. 将盒子宽高设置为0，仅保留边框

4. 得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明

拓展：通过调整不同边框的宽度，可以调整三角形的形态

<!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>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /* border-top: 10px solid pink;
            border-left: 10px solid blue;
            border-right: 10px solid red;
            border-bottom: 10px solid yellow; */
            border: 10px solid pink;
            border-left-color: blue;
            border-right-color: red;
            border-bottom-color: yellow;
        }
        .box2 {
            margin: 50px auto;
            width: 0;
            height: 0;
            border: 20px solid transparent;
            border-bottom-color: pink;
        }
        .jd {
            position: relative;
            width: 150px;
            height: 350px;
            background-color: pink;
        }
        span {
            position: absolute;
            /* 设置为-10px的原因是通过bottom设置的向上三角，其上面还有top所以是两个border宽度才能定位在盒子上面 */
            top: -10px;
            right: 20px;
            width: 0;
            height: 0;
            /* 为了兼容性 */
            font-size: 0;
            line-height: 0;

            border: 5px solid transparent;
            border-bottom-color: pink;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>

    <div class="jd">
        <span></span>
    </div>
</body>
</html>

显示结果：