常用的css

 

css

1.行内块元素转换

 display: inline-block;

2.背景颜色

 background-color

3.边框

border: 1px solid 

4.字体大小

font-size

5.取消背景重复平铺

background-repeat: no-repeat

6.设置背景图片是否固定

background-attachment: scroll;

7.设置背景的位置，两个取值，x和y轴的位置，用空格隔开

background-position: 100px 100px;

8.在x轴上重复 在y轴上重复

background-repeat: repeat-x/Y;  

9.设置背景图片的尺寸，两个取值，宽 高，取值为cover铺满元素

 background-size:cover

10.设置浏览器边框]

padding: 0;margin: 0;

11.默认取值，背景图片会跟随滚动

background-attachment: fixed;

12.外边距

margin   auto 自动设置编剧

13.内边距

padding

14.溢出隐藏

overflow: hidden

15.嵌套型外边距塌陷的解决方法

 overflow: hidden
​
​

16..边框变圆

border-radius: 50px;  50园的半径
17.

17.边框透明

border-color:  transparent

18.浮动

float:

19.取消浮动问题

::after ::before  伪元素选择器::before和::after
content:"";          
display: block;  默认是行内元素
height: 0;
visibility: hidden; 隐藏元素33..
clear: both;
 伪元素

20.怪异盒子模型

box-sizing: border-box;

21.相对定位

position relative

22.绝对定位

position absolute

23.静态定位

position: static;   默认定位

24.固定定位

position: fixed

25.粘性定位

position sticky    不脱离文档流

26.精灵图

background-image: url

27.精灵图位置

background-position:   px   px;

28.字体根据高居中

 line-height: ;

29.字体居中

text-align: center;

30.取消列表前缀

list-style: none;

31.取消边框

border: none;

32.取消点击边框

   outline: none;

33.下划线

text-decoration: underline;

34.取消超链接下划线

text-decoration: none;

35.移动

transform: translate(100px,200px）   x轴 和y轴移动的距离

36.缩放

transform: scale

37.倾斜

transform: skew(30deg);    deg度数

38.过渡

 transition: all 3s ;                    all全部使用
 transition: all 3s ease 0s;             先减速后加速
 transition: all 3s ease-in-out 0s;      以慢速开始和结束
 transition: all 3s ease-out 0s;         以慢速结束
 transition: all 3s ease-in 0s;          以慢速开始
 transition: all 3s linear 0s;           匀速

39.动画移动

@keyframes move     设置动画名
0%{transform: translateX、y(0xp);}   动画移动开始 按xy运动
可连续设置移动地点    可用from   to 代替百分比
100%{transform: translateX(1000px);}  动画结束
animation-name: move;            引用动画 
animation-duration: 3s;         动画运动时间
 

40.运动曲线

 animation-timing-function: ease       默认先快后慢

41，运动何时开始

animation-delay

42.运动几次

 animation-iteration-count: infinite;     无限循环    count 次数

43.反方向回去

animation-direction: alternate;
要和42连用

44.运动后的状态

  animation-fill-mode:backwards    默认回到起始状态
  animation-fill-mode:forwards     停在最终位置

45.动画是否运动或停止

 animation-play-state: paused;   停止

46.渐变色

background-image: linear-gradient()

47.旋转

 transform:rotate();

48.下一个节点开始

animation:       step-start

49.上一个节点结束

animation:       step-end

50.背景线性渐变

background:linear-gradient(-225deg red 30% ....)   渐变方向  颜色   位置   不取反向默认向下，取值deg向上   颜色最少俩

51.重复性线性渐变

background-image: repeating-linear-gradient()

50.径向渐变

background-image:radial-gradient

51.目标伪类选择器

#b:target{   对超链接设置    id是超链接连接的id

52.状态伪类选择器

#a:checked~#d      
  
  对表单使用   inpu type=“radio”   用法和hover同样  连接同级小弟可用  ~ 选择器进行连接

53按钮透明度

 opacity: 0;

54.视频播放

video src="../img/oceans.mp4"  导入视频

55.设置视频播放

autoplay="autoplay"
muted="muted"     禁音播放

56.显示播放控件

controls="controls"

57.视频循环

loop="loop"

58.预加载图片

poster="../img/"

59.弹性盒子

display: flex;    为父容器设置 里面的子元素 float  clear  vertical-align失效

60.常见属性

1.1  flex-direction: row;   设置主轴方向   主轴x 侧轴y 默认为轴
1.2  flex-direction: row-reverse;  反转
1.3  flex-direction: column;   y为主轴
1.4  flex-direction: column-reverse;   y轴翻转 
​
​
2.1   justify-content: ; 设置主轴的排列，先确定主轴
2.2  justify-content: flex-start;   默认x主轴  左对齐
2.3  justify-content: flex-end   右对齐 
2.4  justify-content: center;    居中对齐
2.5  justify-content:space-around;  平均分配空间外边距相等
2.6  justify-content:space-between;   两边贴边再分配剩余空间
2.7  justify-content:space-ecenly;   
​
3.0  换行
3.1  flex-wrap:nowrap ;  默认子元素不换行，装不开缩小子元素宽度
3.2  flex-wrap: wrap     子元素换行
​
4.0  侧轴
4.1  align-items: center;   侧轴居中
4.2  align-items: flex-start  侧轴左对齐
4.3  align-items: flex-end  侧轴右对齐
4.4  align-items: stretch;  沿着侧轴拉伸，子元素不设置高度
​
​
5.0多个行  出现换行   按照y  侧轴
5.1  align-content：flex-start    换行后多行侧轴左对齐
5.2  align-content：flex-end      换行后多行侧轴右对齐 
5.3  align-content：center       换行后多行 侧轴居中
5.4  align-content：space-between;  换行后多行两边贴边再分配剩余空间
5.5  align-content： space-around   换行后多行平均分配空间外边距相等 
​
​
子属性：
    flex 1        
    flex-grow:1   等分父级空间，设定分配的剩余空间的份数 默认取值0
    flex-shrink   承受压缩比例
    flex-basis   未分配剩余空间之前所占主轴空间大小
    align-self  单独改变某一个项目的对齐方式
    order  项目的排列顺序  值越小越靠前 可以取负数

61.字重

 font-weight: 200;

62.变形中心

transform-origin: ;

63.沿字对齐

anlign-utmes：baseline

64.单位

em 根据父级改变
rem   根据HTML改变

65.

 flex-basis: 1;

66.网格布局

display: grid;
     1    grid-template-columns: ;  网格布局 
     2   grid-template-rows: ;    设置列数与列宽
     3   grid-auto-rows: 100px;    自动设置
     4   grid-gap: 5p  网格的间距
     5  grid-column-gap:  ;   列的间隙 
    6  grid-row-gap: ;   行的间隙           
  合并    给子元素
   grid-column: span;
   
  

67.媒体查询

@media screen and (max-width: 756px)
#box {
    background-color:
}               查询宽度做出变化
​
​
<style media=" screen and (min-width: 500px) ">
        /* 方式二：在style标签中使用media */
        #box {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
        }
    </style>   在style  中引用     
   
   可以引用link 布局
   

67字体阴影

text-shDOw

68盒子阴影

box-shadow

69