HTML行内元素、块状元素、行内块状元素的区别

  1. 行内元素 display:inline;
  2. 块级元素 display:block;
  3. 行内块级元素 display:inline-block

行内元素：与其它行内元素并排，不能设置宽高，默认的宽度就是文字的宽度

块级元素：单独占一行，能设置宽高，默认宽度承载父级100%

行内块级元素：结合了行内元素和块级元素，可以设置宽高，且不单独霸占一行

CSS3选择器 || 属性匹配选择器

全匹配

1
2
3
4
input[type='text']{
    width: 100px;
    height: 100px;
}
1
2
<input type="text"> <!--只会选中type="text"-->
<input type="password">

开头匹配

1
2
3
4
5
div[class="he"]{
    width: 100px;
    height: 100px;
    background-color: red;
}
1
<div class="hello"></div>

结尾匹配

1
2
3
4
5
div[class $="lo"]{
    width: 100px;
    height: 100px;
    background-color: pink;
}
1
<div class="hello"></div>

包含匹配

1
2
3
4
5
div[class *="h"]{
    width: 100px;
    height: 100px;
    background-color: black;
}
1
<div class="hello"></div>

CSS3选择器 || child

first-child

表示选择列表中的第一个li标签

1
li:first-child{background:#090}

last-child

表示选择列表中的最后一个li标签

nth-child(3)

表示选择列表中的第3个标签

nth-child(2n)

这个表示选择列表中的偶数标签，即选择 第2、第4、第6…… 标签。

nth-child(2n-1)

这个表示选择列表中的奇数标签，即选择 第1、第3、第5、第7……标签。

nth-child(n+3)

这个表示选择列表中的标签从第3个开始到最后。

nth-child(-n+3)

这个表示选择列表中的标签从0到3，即小于3的标签。

nth-last-child(3)

这个表示选择列表中的倒数第3个标签。

DIV点击跳转

1
2
3
  <div onclick="window.open('https://www.baidu.com/')" style="cursor: pointer;">
  点击我跳转百度
</div>
点击我跳转百度 

单行省略

1
2
3
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;

多行省略

1
2
3
4
5
6
flex-wrap: nowrap;
text-overflow: ellipsis; /* 省略号*/
display: -webkit-box; /** 将对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 2; /** 显示的行数 **/
overflow: hidden; /** 隐藏超出的内容 **/

v-show 显示隐藏过渡效果

1
2
3
4
5
6
7
8
<transition name="slide-fade">
		<div id="sl_top" v-show="isTop">
      	<!-- 因为利用滚动条回到顶部，不需要设置herf='#'  -->
		    <a class="text-center" title="回到顶部" @click="handleTop()">
		        <span class="glyphicon glyphicon-plane"></span>
		    </a>
		</div>
</transition>
1
2
3
4
5
6
7
8
9
10
11
.slide-fade-enter-active {
  transition: all 0.2s ease;
}
.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(5px);
  opacity: 0;
}

vue 监听滚动条事件

使用vue监听滚动条事件，来让右下角回顶部按钮显示隐藏。当点击回到顶部，将利用延时器缓缓达到顶部，形成视觉效果。

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
new Vue({
  el:'#app',
  data(){
		return {
      isTop: false, // 点击回到顶部的显隐
      scroll: 0
    }
  },
  mounted() {
      window.addEventListener('scroll', this.menu)
  },
  methods:{
    menu() {
      this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
      // 当距离顶部大于等于300，显示回到顶部按钮，否则隐藏
      if (this.scroll >= 300) {
          this.isTop = true
      } else {
          this.isTop = false
      }
		},
    // 点击回到顶部按钮事件
     handleTop() {
         let top = this.scroll
         const timeTop = setInterval(() => {
             document.body.scrollTop = document.documentElement.scrollTop = top -= 50
             if (top <= 0) {
                 clearInterval(timeTop)
             }
         }, 10)
     }
    
  }
})

隐藏到显示的过渡效果

display 属性不支持 transition 过渡效果。使用 透明度 opacity 配合 visibility。visibility是没有过渡动画的

1
2
3
4
5
6
7
8
9
.copyBtn{
	opacity: 0;
  visibility: hidden;
}
.copyBtn:hover{
	visibility:visible;
	opacity: 1;
	transition: all 1s linear;
}

点击复制内容 || 更改div内容

input输入框的样式是必须存在的，自有输入框才能使用select，可以设置样式，让input消失

1
2
<input id="copy_content" type="text" value=""/>
<div class="copyBtn" id="copy-content1"  onClick="copy(this)" data="icon-home">copy</div>

1
2
3
4
5
6
7
8
9
10
function copy(ElementObj) {
    var clickContent = ElementObj.getAttribute('data');  //获取要复制的值
    var id = ElementObj.getAttribute('id'); // 获取外面的id值
    var inputElement =  document.getElementById("copy_content");  //获取要赋值的input的元素
    inputElement.value = clickContent;  //给input框赋值   
    inputElement.select();//选中input框的内容
    document.execCommand("Copy");// 执行浏览器复制命令
  
    document.getElementById(id).innerHTML = '已复制';
}

背景图片属性实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
a[href *= "weixin.jpg"] i::after{
	content: ''; 
	display: flex;
	opacity: 0;
	visibility:hidden;
	justify-content: center;
	align-items: center;
	width: 150px;
	height: 142px;
	position: absolute;
	left: -80px !important;
	z-index: 999;
	bottom: 120px;
	background-repeat: no-repeat;
	background-position:center; 
	background-image: url('https://cdn.jsdelivr.net/gh/SimpleLifecst/simple@main//wechat_aside.jpg');
	background-size: auto 140px;
	background-color:rgb(252 252 252);
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	border-radius: 3px;
}

图片穿透

1
2
3
img{
	pointerEvents:none;
}

鼠标跟随天使代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function mouseRouser() {
  var body = document.body;
  var img = document.createElement("img");
  img.style.position = "absolute";
  img.style.pointerEvents = "none";
  img.src = "https://cdn.jsdelivr.net/gh/SimpleLifecst/simple@main//angel.gif";
  body.appendChild(img);
  document.addEventListener("mousemove", function (e) {
    var x = e.pageX;
    var y = e.pageY;
    img.style.top = y + "px";
    img.style.left = x + "px";
  });
}
mouseRouser();