CSS的l_css path d="m 950 630 l 950 580 l 511.39 128.43

https://www.gxlsystem.com/qianduan-7505.html 修改滚动条 样式

来判断页面大小引入css不同的样式

<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
    
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640)">

    // 动态修改 css 变量的值
    css
	 $navWidth:var(--navWidth,63px);
	.crotrol {
  		width: $navWidth;
    }
document.getElementsByTagName('body')[0].style.setProperty('--navWidth', e.target.value)

// 更改p标签的内容
<p contenteditable>ss</p> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

更改， 多选框样式

console\.log\(.*?\)


input[type=checkbox] {
  cursor: pointer;
  position: relative;
  font-size: 14px;
}

input[type=checkbox]::after {
  position: absolute;
  top: 0;
  color: #000;
  width: 100%;
  height: 100%;
  display: inline-block;
  visibility: visible;
  padding-left: 0px;
  text-align: center;
  content: ' ';
  border-radius: 3px
}

input[type=checkbox]:checked::after {
   /* 饿了么字体图标， 加上下面的属性 */
  font-family: element-icons;
  content: "";
  background-color: #1785ff;
  color: white;
  font-size: 12px;
  font-weight: 800;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

vue2scss 变量引入css

<template>
  <div :style="cssVars">
    <p class="text">测试文本</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color: "red"
    };
  },
  computed: {
    cssVars() {
      return {
        "--color": this.color
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.text {
  color: var(--color);
}
</style>
————————————————
版权声明：本文为CSDN博主「咲奈」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_21567385/article/details/109590304
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

less布局

@import '地址'
 @定义个名字： 值 	====	@bg-color: #b7d4a8;
.父 {
	height: 200px
	.子{
		color: red;
	}
}
	和上面相等
.父 .子{
	color: red;
}
@media screen and (min-widthwidth  : 800px) { // 在电脑上最大的屏幕宽度是800px
@media screen and (max-widthwidth  : 800px) { // 在电脑上最小的屏幕宽度是800px
    
}

伪类选择器， 用&::
<section>
	<div>
	<div>
<section>

section{ // 伪类选择器
    div{
        &::nth-child(2) {}
    }
}
    
<section>
    <p>
	<div>
	<div>
<section>
    
 section div :nth-of-type(1){
        // 选中了第一个 div 若要是 nth-child 的话， 则不会选中
    }

 &:hover{
            color: 999;
        }
    
    rem 为flexible
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

calc css的运算属性

更改 input 中 placeholder 属性颜色

.asd::-webkit-input-placeholder{
  color:red;
}
.asd::-moz-placeholder{   /* Mozilla Firefox 19+ */
  color:red;
}
.asd:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
  color:red;
}
.asd:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
  color:red;
}
1
2
3
4
5
6
7
8
9
10
11
12

css

px、rpx、em、rem、vw、vh各种像素单位的区别

px：px就是 pixel的缩写，意味像素。px就是一张图片最小的一个点，一张位图就是无数个这样的点构成的，是web开发中最常用的像素单位。
rpx：由微信小程序官方推出的新单位，适用于移动端的 uni-app或者微信小程序的开发。可以根据屏幕宽度进行自适应，1rpx实际上等于相对于屏幕宽度的1物理像素。在设计时可以将1px约等于2rpx。
em：相对单位，参照物是父元素的 font-size字体大小，具有继承的特点。如果自身定义了 font-size属性那么就会按照自身来计算，都没有设置的话，就会按照当前所有浏览器或者设备的默认文字大小来计算调整。一般来说浏览器的默认字体大小为16px，一个完整的页面内，可能每个模块的 em默认值都不想同。
rem：css3中推出的新单位。相对于根元素（html）设置的 font-size属性进行调整，而不会像 em那样依赖于父元素的字体大小而造成页面文字大小不相同的混乱局面。
vw：同样是css3中推出的新单位，是 viewpoint width的缩写，意为视窗宽度。视窗宽度1vw等于是窗宽度的1%。也就是说，如果当前开发浏览器或者设备的宽度为1280px，那么1vw就等于12.8px。在开发设计的过程中，100vw才能真正占据当前屏幕宽度的100%。
vh：和vw同理，是css3中推出的新单位，是 viewpoint height的缩写，意为视窗高度。视窗高度1vh等于是窗高度的1%。计算及使用都与vw相同，这里就不在赘述了。

1
2
3
4
5
6
7

css 奇奇怪怪

生成 https://www.html.cn/tool/css-clip-path/

clip-path

只能在盒子的区域内做剪裁

clip-path --- 裁剪
clip-path： (左上角,左下角,右上角,左下角) -- clip-path： (0 0,0 0,0 0,0 0)
polygon
// 值为多个坐标点组成，坐标第一个值是x方向，第二个值是y方向。
// 左上角为原点，右下角是(100%,100%)的点。
// 梯形
clip-path: polygon(78% 0%, 103% 80%, 2px 80%, 24% 0%);
// 菱形
clip-path: polygon(0px 50%, 50% 0, 100% 50%, 50% 100%)
// 类似于斜切
clip-path: polygon(0% 60%, 20% 0%, 60% 0%, 40% 60%)

ellipse
//值为椭圆的x轴半径，y轴半径，定位椭圆的坐标三部分组成。
//左上角为原点，右下角是(100%,100%)的点。
//at关键字将半径和坐标分开。
// 扁的椭圆
  clip-path: ellipse(30% 20% at 50% 50%)
// 窄的椭圆
clip-path: ellipse(20% 30% at 50% 50%)

inset

//值为(上 右 下 左 round 左上角radius 右上角radius 右下角radius 左下角radius)
//round前面的数值，表示的是距离，如果第一个值为25%，则表示图像在上面从25%开始绘制。
// 叶子
clip-path: inset(25% 0% 25% 0% round 0% 25% 0% 25%)
// 对话框
clip-path: inset(0% 25% 25% 0% round 25% 25% 25% 0%)


font: font-style | font-variant | font-weight | font-size | line-height | font-family;

font-style（字体样式）: normal（正常）、italic（斜体）或oblique（倾斜）;
font-variant (字体变化): normal（正常）或small-caps（小体大写字母）;
font-weight (字体浓淡): 是normal（正常）或bold（加粗）。有些浏览器甚至支持采用100到900之间的数字（以百为单位）;
font-size（字体大小）: 可通过多种不同单位（比如像素或百分比等）来设置, 如：12xp，12pt，120%，1em
line-height（只能在font-size后面以/接上，如果16px/24px，表示字体16px， 24line-height）;
font-family（字体族）: “Arial”、“Times New Roman”、“宋体”、“黑体”等;
font缩写的时候，必须有font-size和font-family两个值，否则不生效，其他值可省略，有默认值。
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

h5 新标签

  <header>：头部标签 
  <nav>：导航标签 在H4中导航栏一般用ul-li标签，H5中可以直接用<nav>标签
  <section>：块级标签
  <article>：内容标签
  <aside>：侧边栏标签
  <footer>：尾部标签
1
2
3
4
5
6

单行溢出隐藏

white-space: nowrap 强制一行
overflow: hidden 溢出隐藏
text-overflow: ellipsis 溢出省略号
1
2
3

text-decoration: none 去除下划线

overflow: {  
    overflow: overlay; // 加滚动条不占用位置
    visible 默认
    auto 加滚动条
    hidden 溢出隐藏
    scoll 总显示滚动条
}; 
// 滚动条颜色{
     ::-webkit-scrollbar {
      background-color: gainsboro;
    }
    ::-webkit-scrollbar-track {
      // background-color: ;
    }
    ::-webkit-scrollbar-thumb {
      background-color: #008aff;
      border-radius: 12px;
    }
    ::-webkit-scrollbar-button {
      background-color: rebeccapurple;
    }
    ::-webkit-scrollbar-corner {
      background-color: #018ef8;
    }   
}

word-spacing:  ; 单词与单词之间的距离

letter-spacing: px; 汉字与汉字之间的距离

transition: 过度的属性， 花费时间， 运动曲线 ， 何时开始 ；

background-position: x轴， y轴; 精灵图设置图片定位

background-size: {
    px, px // x,y轴大小
    cover 完全覆盖， 但图片显示不全
    contain 使用图片宽或者高， 到达父元素的一边， 则不继续拉伸
}

cursor{
    default 小白
    pointer 小手
    move 移动
    text 文本
    not-allowed 禁止
}

filter:grayscale(1) 设置页面元素为黑白色

displate: {
    inline-block; // 转为行内块元素
    inline // 转为行内元素
    block // 此元素将显示为块级元素，此元素前后会带有换行符。
    none // 隐藏。
    flex // flex布局
} 
box-sizing: border-with 盒子大小为 width 的大小

filter: blur(5px) 用来给图片添加模糊处理

outline: none 取消表单轮廓线

fonst: font-style(noraml) fonst-weight font-size/line-height font-family

resize:none 防止拖拽表单文本进行拉大小

background: 颜色 地址 背景平铺(no-repect) 图像滚动(flex) 图片位置/ 图像大小

border-radius :8px; // 使用 border-radius 属性来创建圆角图片:

 // 渐变
background-image: linear-gradient(#e66465, #9198e5); // 上下
background-image: linear-gradient(to right, red , yellow); // 左右
background-image: linear-gradient(to bottom right, red, yellow); // 左上角到右下角

// css 动画
@keyframes 定义名字 {
    0%{...}
    100%{...}
    from {background-color:red;}
    to {background-color:blue;}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

阴影

box-show: 是位于盒子来做阴影

drop-show: 是针对于这个区域里的像素点来做阴影
1
2
3

css变量

:root{ 全局变量， 可以在css文件中任意的一个地方使用
      --you:red;
  }
  用的时候需要加上var() 
.da{
    width: 20px;
    height: 20px;
    color: var(--you);
    background-color: saddlebrown;
}
1
2
3
4
5
6
7
8
9
10

隐藏

!important 优先执行

@import “~@/styles/mixin.scss”; // 直接导入css文件

// 实现元素隐藏
opactive: 0 // 设置透明度为0
display: {
    none 隐藏
    block 显示
}  // 设置透明度为 0, 元素隐藏， 但在网页中依然不占据位置
visibility: {
    hidden 隐藏
    visible 显示
} // 设置透明度为 0 ， 将元素设置为无， 网页中占据位置。
tarnsfrom: scale(0) // 让盒子缩小到 0
z-index: -999 // 设置元素的层级，但需要给元素加上定位
1
2
3
4
5
6
7
8
9
10
11
12

主要用于图片与文字之间的缝隙

vertical-align::{ // 主要用于行内块和行内元素
	buttom // 底线对齐
	middle // 中线对齐
	top // 顶部对其 
}
1
2
3
4
5

flex布局

flex
displate: flex
flex-warp: wrap 子元素大于父元素时换行展示
order: -2; 给子元素加上，数值越小的盒子，越靠前
algin-self:{ 控制某一个盒子侧轴位置展示
    flex-end 底部对齐
}
flex-basis:24% // 为子元素的填充， 写入子元素中
flex-wrap{
    warp 换行
    nowrap 不换行
    设置子元素是否换行
}
	flex-flow： column wrap 同时设置了flex-direction 和 flex-flow
	flex-direction {决定主轴的对齐方向，分别有四个属性：       
        row（默认值）：主轴为水平方向，起点在左端。   
        row-reverse：主轴为水平方向，起点在右端。
        column：主轴为垂直方向，起点在上沿。
        column-reverse：主轴为垂直方向，起点在下沿。
	}
    

	justify-content: { 子元素在主轴对齐方式
        flex-start（默认值）：左对齐
        flex-end：右对齐
        center： 居中
        space-between：两端对齐，项目之间的间隔都相等。
        space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
    }
    
    align-items：{	侧轴上单行使用
        flex-start：交叉轴的起点对齐。
        flex-end：交叉轴的终点对齐。
        center：交叉轴的中点对齐。
        baseline: 项目的第一行文字的基线对齐。
        stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。}

	align-content:{ 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
        flex-start：与交叉轴的起点对齐。
        flex-end：与交叉轴的终点对齐。
        center：与交叉轴的中点对齐。
        space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
        space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
        stretch（默认值）：轴线占满整个交叉轴}

span:nth-child(2){
    align-self: flex-end // 设置最后一个的排列方式
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

grid布局

// 你想要多少行或者列， 就填写相应的属性值得个数， 不填写则自动分配
display: grid;

grid-template-columns：
	grid-template-columns: 100px 100px 100px// 显示为三列每一列的宽度为100px
    grid-template-columns: repeat(5, 100px); // 同上
	grid-template-colunms: repeat(auto-fill, 100px) // auto-fill 则是对应容器大小不一致时， 自动填充响应的内容
	gird-template-colums: repeat(4, 1fr) // 宽度平均分成4等份
	gird-template-colums: 1fr 2fr 3fr // 列宽被分成了六等份， 其中各占1 2 3 份
    grid-templat-colums: 1fr minmax(150px, 1fr) // 设置了最小宽度(150px)，和最大宽度(1fr)
	grid-template-colunms: 100px auto 100px // auto 则表示浏览器自行决定长度问题
  
 /* 分别表示两行的高度 */
	grid-template-columns: 100px 100px; // 属性定义每一列的列宽
	grid-template-rows: 100px 200px; // 属性定义每一行的行高。
    
// 就是每个盒子之间的距离
grid-gap / grid-column-gap
	grid-row-gap: 20px // 属性设置行与行的间隔（行间距）
    grid-column-gap: 10px // 属性设置列与列的间隔（列间距）。
	grid-gap: 20px // 没个盒子之间的距离是20px, 行和宽, grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式
    
    
// 容器的属性 grid-auto-flow
    // 划分网格以后， 容器的子元素会按照顺序，自动放置在每一个网格中。默认的放置顺序是 '先行后列'， 即先填满一行，在开始放入第二行(就是子元素的按顺序排放)
    grid-auto-flow: row; // row 是横着排放, 
    gird-auto-flow: column // column 是竖着排放, 先列后行
    gird-auto-flow: row column // row column 是属性值表示换行的空间可以由下面的元素自行填充
    
// 容器属性 justify-items(水平方向) / align-items(垂直方向)
    justify-items: start | end | center | streach | space-around | space-between | space-evenly
 	align-items: start | end | center | streach | space-around | space-between | space-evenly

// 若设置了一个 3 * 3 的表格 有十个元素就会多出来一个
	grid-auto-rows: 50px // 设置多出来的高
    grid-auto-columns

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

伪元素

https://www.cnblogs.com/dreamingbaobei/p/5062998.html

// 伪元素， 需要加入content： '' , 此为行内元素， 需要 displate 转换
	:: befo 盒子之前加入一个元素
	:: affter 之后加入元素
	content: ''
!属性选择器[]
input[value]{color:red} // 选中带有 value 属性的标签
input[tyoe=text]{} // 选中type = text 的属性
input[att^='val'] // 具有 att 属性且以 val 开头的元素
input[att$='val'] // 具有 att 属性且以 val 结尾的元素
input[att*='val'] // 具有 att 属性所有 val 的元素

!解构伪类选择器
E:first-child // 父元素的第一个子元素
:last-child // 父元素的最后一个子元素
: nth-child(n) // 选择第 n 个元素
n+5 第五个开始， -n-5前五个 2n+1奇数
section div :nth-of-type(1){
    // 选中了第一个 div 若要是 nth-child 的话， 则不会选中
}

::selection { // 鼠标选中的颜色和背景色
  color: red;
  background: yellow;
}

p:first-letter { // 文字首字母大写
    font-size:200%;
    color:#8A2BE2;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

动画

transition: 过度的属性， 花费时间， 运动曲线 ， 何时开始 ；
transition-timing-function: ----
   			ease 默认值，慢速开始，先加速，再减速

                linear 匀速运动

                ease-in 加速运动

                ease-out 减速运动

                ease-in-out 先加速 后减速

                cubic-bezier() 来制定时序函数（贝塞尔曲线）

	- https://cubic-bezier.com ，这是一个贝塞尔曲线的网址，可以自己拖动曲线 获取想要的结果，有兴趣的小伙伴可以试试

animation: move 3s linear 0s infinite  normal none;
// css 动画
@keyframes 定义名字 {
   from === 0%{...}
   to === 100%{...}
}

animation-timing-function:{
    	ease 默认值，慢速开始，先加速，再减速

        linear 匀速运动

        ease-in 加速运动

        ease-out 减速运动

        ease-in-out 先加速 后减速
    
    	steps(10) 步长指定时间函数的间隔数量， 10 步走完这些

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

// 2d 移动转换

transform

transfrom: tarnslate() rotate(45deg) scale(x, y) // 移动 旋转 缩放
transfrom： scale(x, y) // 行内元素无效， 写入几缩放几倍， 放大不影响其他盒子。
transfrom： tarnslate(x, y) // 用于移动盒子， 对行内元素无效
transform: skewX(20deg); // 斜切
transform-origin: left center; 设置盒子旋转的中心、放大的中心点， 跟方位名词。 也可以跟 px 像素单位
opacity: 透明度
1
2
3
4
5
6

3D动画

perspective:200px; 数值越大效果越小， 越小就越大

transform: translateX(px) translateY(px) translateZ(px) 设置在 x y z 轴的位置

translateZ 正的是像眼前移动， 负的是离眼睛远了

transform: translate3d(x, y, z) 设置xyz轴的位置

transform: rotate3d(x, y, z). 设置3d 旋转度数
transform: rotateX(45deg)
transform: rotateY(45deg)
transform: rotateZ(45deg)

transfrom-style: { 子元素是否开启3d空间
    flat 子元素不开启 3d 空间
    preserve-3d 子元素开启3d 空间
}

transdorm: preserve-3d; 子盒子开启立体空间，写给父盒子，给500px
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Vue 动画

在进入/离开的过渡中，会有 6 个 class 切换。

1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3. v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
4. v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6. v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

// vue 进行 v-if 来回切换的时候。 需要给 transition 加上key 来用于 VUe 的区分。
// 过渡模式
//同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了过渡模式 
// in-out：新元素先进行过渡，完成之后当前元素过渡离开。 
// out-in：当前元素先进行过渡，完成之后新元素过渡进入。
 
<transition  name="naaame" mode="in-out">
    <div v-if="ac" class="ad" key="key">
        sadsad
	</div>
    <div v-else class="ac" key="div">
        21313
    </div>
</transition>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

定位

position：{
	relative // 相对定位
	absolute // 绝对定位
	fixed // 固定定位
    sticky // 吸顶效果
}

// 相对定位
它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)。
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。(不脱标，继续保留原来位置)因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。

// 绝对定位
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的 (拼爹型)

// 固定定位
固定定位是元素固定于浏览器可视区的位置，主要使用场景 ： 可以在浏览器页面滚动时元素的位置不会改变
语法：
选择器{ position : flxed; }    
固定定位的特点∶(务必记住)
1．以浏览器的可视窗口为参照点移动元素。

跟父元素没有任何关系
不随滚动条滚动。
2.固定定位不在占有原先的位置。
   固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

H5新特性

// 新增了一些元素
article元素，表示页面中的一块与上下文不相关的独立内容，比如博客中的一篇文章。
aside元素，表示article内容之外的内容，辅助信息。
header元素，表示页面中一个内容区块或整个页面的页眉。
hgroup元素，用于对页面中一个区块或整个页面的标题进行组合。
footer元素，表示页面中一个内容区块或整个页面的页脚。
figure元素，表示媒介内容的分组，以及它们的标题。
section元素，表示页面中一个内容区块，比如章节。
nav元素，表示页面中的导航链接。
mark元素，用来展示高亮的文字。
progress元素，用来展示任何类型的任务的进度。

//新表单元素
tel元素，表示电话号码。
email元素，表示电子邮件地址文本框。
url元素，表示网页的url。
search元素，用于搜索引擎，比如在站点顶部显示的搜索框。
range元素，特定值范围内的数值选择器，典型的显示方式是滑动条。
number元素，只包含数值的字段。

placeholder
当用户还没输入值的时候，输入型控件可以通过placeholder特性向用户显示描述性说明或者提示信息。
<input name="name" placeholder="First and last name">
    
拖放API
draggable属性
如果网页元素的draggable元素为true，这个元素就是可以拖动的。

<div draggable="true">Draggable Div</div>


 // 拖放事件
拖动过程会触发很多事件，主要有下面这些：

dragstart：网页元素开始拖动时触发。
drag：被拖动的元素在拖动过程中持续触发。
dragenter：被拖动的元素进入目标元素时触发，应在目标元素监听该事件。
dragleave：被拖动的元素离开目标元素时触发，应在目标元素监听该事件。
dragover：被拖动元素停留在目标元素之中时持续触发，应在目标元素监听该事件。
drap：被拖动元素或从文件系统选中的文件，拖放落下时触发。
dragend：网页元素拖动结束时触发。
draggableElement.addEventListener('dragstart', function(e) {
console.log('拖动开始！');
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VZamvUTw-1666188459258)(img/image-20220924230213602.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NIUqRXTK-1666188459259)(img/image-20220924230219873.png)]

Bootstart 布局

若要不想用他的标签， 可以直接复制class名， 来进行操作，若要进行二次修改直接给当前标签， 加上 class 类名

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DNGHaN3L-1666188459259)(img/image-20220924230224823.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iYcD0qhq-1666188459260)(img/image-20220924230231834.png)]

栅格系统

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wP7uPvV9-1666188459260)(img/image-20220924230237073.png)]

在栅格系统中， .row 为类名，表示一行。
里面的响应式布局中
1
2

bootstart 列偏移

如果右侧的盒子想要在往右边， 需要用到列偏移
可以用 col-md-offset-4 使得盒子向左偏移了四个
1
2

列排序

如果想要俩个黑子换位置，
col-md-pull-4, 就把盒子向左拉了4
		-push-4 , 把盒子向左推4个
1
2
3

![