web学习笔记2 - CSS基础

CSS基础 自学总结
封面画师：唏嘘的星辰 p站ID：13312138

盒子模型

标准盒子

计算公式：width=margin + border + padding + content

怪异盒子模型

计算公式：width ：100px ，包含内边距 border + content

样式

样式引入方式：行内样式 外联样式 内嵌样式，又称：行内元素，块元素，行内块元素

权重

继承过来的样式优先级是最低的， 字体大小 字体颜色等
标签名选择器优先级要低于类名选择器
类名选择器优先级要低于id选择器
id选择器优先级低于行内样式
行内样式低于！important

权值

!important : 最高
行内样式 : 1000
id : 100
类 : 属性选择器 伪类选择器 10
标签名 : 1
继承过来 : 最低

权重优先级排序：!important > 行内 > id > class = 属性选择器 > 标签名选择器 > 继承过来的属性

选择器

> 父子关系
~ 兄弟关系 后续的兄弟yuans
+ 第一个兄弟元素
[id=i1] 属性选择器
nth-child() 父元素第几个子元素
nth-of-type() 同种类型下第几个子元素

伪元素

::before : 元素前
::after : 元素后
::first-line : 设置文本首行的特殊样式
::first-letter : 设置文本首字母的特殊样式
::selection : 选择器匹配元素中被用户选中或处于高亮状态的部分。
::selection : 只可以应用于少数的CSS属性：color, background, cursor,和outline。

伪类

:hover : 元素被选中
:active : 元素被点击
:visited :　设置访问过的页面链接的样式
:focus　: 选择元素输入后具有焦点

资源引入

src 可以引入本地文件，也可以网络资源

<img id="d1" src="https://img2.baidu.com/it/u=3384430041,4206921743&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=360" alt="">

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

内容溢出

word-break

keep-all 不换行，但是会在空格符号和标点符号处进行换行
break-all 可以在任何单词之间进行换行

overflow

overflow: hidden; 超出的部分直接剪切掉
overflow: scroll; 超出部分出现滚动
overflow-y: scroll; 指的是竖直方向上进行滚动
overflow-x:scroll; 水平方向上超出滚动

精灵图片的作用

精灵图 (雪碧图)：把多张小图设置一张大图片，可以减少图片的大小，在页面加载图片时候，只需要请求一次，减少了请求次数，

transition / animation 区别

transition

transition : 过渡动画，能够过渡的样式：与数字有关样式可以观察到过渡效果

直接设置过渡属性

transition: all 2s linear;
all : 能够过渡的样式都可以看到过渡效果
2s : 过渡时间
linear : 时间函数 速率匀速
ease : 慢速开始，然后变快，然后慢速结束的过渡效果（等于cubic-bezier(0.25,0.1,0.25,1)）
ease-in : 开始时候的慢
ease-in-out : 开始结束的时候慢
cubic-bezier(n,n,n,n) : 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

分开设置过渡属性

transition-property : 过渡属性
transition-duration : 过渡时间
transition-time-function : 过渡函数
transition-delay : 延迟

animation

#div1{
    width: 200px;
    height: 200px;
    background-color: yellow;
    position: relative;
    left: 0;
    top: 0;
    /* 使用关键帧动画的样式 */
    /* 动画名字 动画时间  动画速率 重复次数 infinite无限重复*/
    animation: myAni  2s linear  infinite;
    
}

/* 定义关键帧动画 */
@keyframes myAni {
    /* 0%  动画开始状态*/
    from{   
        left: 0;
        top: 0;
    }
    50%{
        left: 400px;
        top: 0;
    }
    /* 100%  动画结束的状态*/
    to{
        left: 400px;
        top: 400px;
    }
}