css(样式)

wake up　

已于 2022-10-18 16:39:55 修改

阅读量184

点赞数

分类专栏：背诵文章标签：前端 javascript 开发语言

于 2022-10-17 16:51:35 首次发布

本文链接：https://blog.csdn.net/m0_69167751/article/details/127364600

版权

背诵专栏收录该内容

1 篇文章 0 订阅

订阅专栏

transition-property: 指定要执行过渡的属性
transition-duration: 指定过渡效果的持续时间
transition-timing-function: 过渡的时序函数
ease 默认值，慢速开始，先加速，再减速
linear 匀速运动
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速后减速
cubic-bezier(.24,.95,.82,-0.88) 来指定时序函数 https://cubic-bezier.com
steps(2, start) 分步执行过渡效果可以设置一个第二个值：
end ，在时间结束时执行过渡(默认值)
start ，在时间开始时执行过渡
transition-delay: 过渡效果的延迟，等待一段时间后在执行过渡
transition 可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟
transition:2s margin-left 1s cubic-bezier(.24,.95,.82,-0.88);

动画

设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤

@keyframes test {
    /* from表示动画的开始位置 也可以使用 0% */
    from{
         margin-left: 0;
         background-color: orange;
        } 
    /* to动画的结束位置 也可以使用100%*/
     to{
         margin-left: 700px;
         background-color: red;
     }
 }

animation-name: 要对当前元素生效的关键帧的名字
animation-duration: 动画的执行时间
animation-delay: 2s 动画的延时
animation-iteration-count 动画执行的次数 infinite 无限执行
animation-direction指定动画运行的方向
normal 默认值从 from 向 to运行每次都是这样
reverse 从 to 向 from 运行每次都是这样
alternate 从 from 向 to运行重复执行动画时反向执行
alternate-reverse 从 to 向 from运行重复执行动画时反向执行
animation-play-state: 设置动画的执行状态
running 默认值动画执行
paused 动画暂停
animation-fill-mode: 动画的填充模式
none 默认值动画执行完毕元素回到原来位置
forwards 动画执行完毕元素会停止在动画结束的位置
backwards 动画延时等待时，元素就会处于开始位置
both 结合了forwards 和 backwards

变形

transform用来设置元素的变形效果
translateX() 沿着由方向平移
translateY() 沿着y轴方向平移
translateZ() 沿着z轴方向平移平移元素
几种水平垂直双方向居中的方式对比

旋转

通过旋转可以使元素沿着x y 或 z旋转指定的角度
rotateX()
rotateY()
rotateZ()

缩放

对元素进行缩放的函数
scalex() 水平方向缩放
scaleY() 垂直方向缩放
scale() 双方向的缩放

字体

color 用来设置字体颜色
font-size 字体的大小
font-family 字体族（字体的格式）
serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体
font-family 可以同时指定多个字体使用,隔开优先使用第一个无法使用则使用第二个以此类推

图标字体

使用图标时，我们还可以将图标直接设置为字体，font-face的形式来对字体进行引入
直接通过类名来使用图标字体
class=“fas fa-bell”
class=“fab fa-accessible-icon”

行高

line-height来设置行高

字体简写属性

font 可以设置字体相关的所有属性
font-weight 字重
bold 加粗
italic 斜体

文本的样式

text-decoration 设置文本修饰
none 什么都没有
underline 下划线
line-through 删除线
overline 上划线
white-space 设置网页如何处理空白
可选值：
normal 正常
nowrap 不换行
pre 保留空白

overflow: hidden; 多余内容裁剪掉
text-overflow: ellipsis; 文本溢出内容显示省略号

背景

background-image 设置背景图片
background-repeat 用来设置背景的重复方式
repeat 默认值，背景会沿着x轴 y轴双方向重复
repeat-x 沿着x轴方向重复
repeat-y 沿着y轴方向重复
no-repeat 背景图片不重复
background-position 用来设置背景图片的位置
通过 top left right bottom center 几个表示方位的词来设置背景图片的位置,使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center

设置背景的范围background-clip
border-box 默认值，背景会出现在边框的下边
padding-box 背景不会出现在边框，只出现在内容区和内边距
content-box 背景只会出现在内容区
background-origin 背景图片的偏移量计算的原点
padding-box 默认值，background-position从内边距处开始计算
content-box 背景图片的偏移量从内容区处计算
border-box 背景图片的变量从边框处开始计算

background-size 设置背景图片的大小,第一个值表示宽度,第二个值表示高度,如果只写一个，则第二个值默认是 auto
cover 图片的比例不变，将元素铺满
contain 图片比例不变，将图片在元素中完整显示

background-attachment 背景图片是否跟随元素移动
scroll 默认值背景图片会跟随元素移动
fixed 背景会固定在页面中，不会随元素移动

渐变

渐变background-image
线性渐变，颜色沿着一条直线发生变化linear-gradient()
渐变的方向
to left
to right
to bottom
to top
deg deg表示度数
turn 表示圈
repeating-linear-gradient() 可以平铺的线性渐变

径向渐变

radial-gradient() 径向渐变(放射性的效果)

默认情况下径向渐变的形状根据元素的形状来计算的
正方形 --> 圆形
长方形 --> 椭圆形

我们也可以手动指定径向渐变的大小
circle
ellipse

radial-gradient(大小 at 位置, 颜色位置 ,颜色位置 ,颜色位置)
大小：
circle 圆形
ellipse 椭圆
closest-side 近边
closest-corner 近角
farthest-side 远边
farthest-corner 远角
位置：
top right left center bottom

定位的简介

position属性来设置定位
static 默认值，元素是静止的没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位

浮动

float 属性来设置元素的浮动
none 默认值，元素不浮动
left 元素向左浮动
right 元素向右浮动
margin: 0; 清除外边距默认样式
padding: 0; 清除内边距默认样式

网页的布局

创建头部
<header></header>
创建网页的主体
<main></main>
左侧导航
<nav></nav>
中间的内容
<article></article>
右边的边栏
<aside></aside>
网页的底部
<footer></footer>

高度塌陷的问题

开启BFC将overflow设置为一个非visible的值
overflow:hidden 开启其BFC 以使其可以包含浮动元素
clear
left 清除左侧浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
both 清除两侧中最大影响的那侧
.clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，当你在遇到这些问题时，直接使用clearfix这个类即可

盒模型

内容区（content）
内边距（padding）
边框（border）
外边距（margin）

内容区（content）

width 设置内容区的宽度
height 设置内容区的高度

盒子模型_边框(border)

边框的宽度 border-width
边框的颜色 border-color
边框的样式 border-style solid
solid 表示实线
dotted 点状虚线
dashed 虚线
double 双线

盒子模型_内边距(padding)

padding-top
padding-right
padding-bottom
padding-left

盒子模型_外边距(margin)

argin-top
上外边距，设置一个正值，元素会向下移动
margin-right
- 默认情况下设置margin-right不会产生任何效果
margin-bottom
- 下外边距，设置一个正值，其下边的元素会向下移动
margin-left
- 左外边距，设置一个正值，元素会向右移动
margin也可以设置负值，如果是负值则元素会向相反的方向移动

盒子的水平布局

元素在其父元素中水平方向的位置由以下几个属性共同决定
margin-left 左外边距
border-left 左边框
padding-left 左内边距
width 宽度
padding-right 右内边距
border-right 右边框
margin-right 右边距
三个值可设置为auto
width
margin-left
maring-right
如果某个值为auto，则会自动调整为auto的那个值以使等式成立

垂直方向的布局

overflow 属性来设置父元素如何处理溢出的子元素
visible，默认值子元素会从父元素中溢出，在父元素外部的位置显示
hidden 溢出内容将会被裁剪不会显示
scroll 生成两个滚动条，通过滚动条来查看完整的内容
auto 根据需要生成滚动条

行内元素盒模型

display 用来设置元素显示的类型
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 将元素设置为行内块元素
行内块，既可以设置宽度和高度又不会独占一行 //不推荐使用
table 将元素设置为一个表格
none(隐藏) 元素不在页面中显示
visibility 用来设置元素的显示状态
可选值：
visible 默认值，元素在页面中正常显示
hidden 元素在页面中隐藏不显示，但是依然占据页面的位置

盒子尺寸

box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）
可选值：
content-box 默认值，宽度和高度用来设置内容区的大小
border-box 宽度和高度用来设置整个盒子可见框的大小
width 和 height 指的是内容区和内边距和边框的总大小

轮廓和圆角

outline 用来设置元素的轮廓线，用法和border一模一样
轮廓和边框不同的点，就是轮廓不会影响到可见框的大小(不会影响布局)
border-radius: 用来设置圆角圆角设置的圆的半径大小*/
border-top-left-radius: 左上角
border-top-right-radius: 右上角
border-bottom-left-radius: 左下角
border-bottom-right-radius: *右下角

border-radius 可以分别指定四个角的圆角
四个值左上右上右下左下
三个值左上右上/左下右下
两个个值左上/右下右上/左下

将元素设置为一个圆形
border-radius: 50%;