前端部分内容的整理（供自己看哟）

最新推荐文章于 2024-11-11 23:45:17 发布

快乐的二进制鸭

最新推荐文章于 2024-11-11 23:45:17 发布

阅读量183

点赞数

文章标签： css html vue.js

本文链接：https://blog.csdn.net/qq_41973526/article/details/118156360

版权

这里写自定义目录标题

1.在less中实现继承的两种方式。

如：two继承one
（1）extend
.one {width:110px }
.two:extend(one){}
(2) &:extend
.two{&:extend(.one }
(3) 直接套
.two{.one();}

2.page与client，offset的区别

（1）page在ie不支持，要是不考虑兼容性情况下，一般用page
(2)page指鼠标在页面中的位置：与滚动条有关，client指鼠标在盒子中的位置。与滚动条无关
（3）offset跟client也就差不多。

3.文字超出…显示

首先设置所在盒子的宽度，
overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap；

4.vue中如何使点击的元素添加类名以及对应内容的显示，隐藏

思路：在for循环中，通过给点击的tab绑定类名，给绑定的类名给个状态，通过类名状态与自己下标进行比较，相等则类名生效，同时给要显示的元素将通过v-show，当点击元素的下标与自身所给的状态一致，则会显示。
在这里插入图片描述

5.after伪元素的一些其他使用

after伪元素除了可以用来清除浮动，添加一个标签。其content还可以是文字，符号，空。如果是文字等，可以不用管display,width,height。
要取消伪元素最后一个伪元素的样式：

 li:{
	&:last-child:after{
	  display:none
   }
}```
6.同元素在不同位置的下标的遍历
（1）

```css
<div class="one">
    <ul>
        <li class="son1"></li>
    </ul>
</div>
<div class="two">
    <ul>
        <li class="son1"></li>
    </ul>
</div>
<div class="three">
    <ul>
        <li class="son1"></li>
    </ul>
</div>

jquery:

<script>
	var $li = $(".son1")
    $li.each(function(ind,ele){
        $(this).on("click",function(){    //$(this)代表当前操作的元素
            console.log(ind)   //ind代表当前操作元素的下标
        })
    })
</script>
//在这种情况下直接使用$(this).index()是无效的。

（2）同类名元素在同一个父元素中

```css
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>```
<script>
 var $div = $("div")
        console.log($div)
        $div.on("click",function(){
            console.log($(this).index())
        })
        //这类的就可以直接使用$(this).index()
</script>

6.flex布局

1.父元素：display：flex
（1）水平对齐方式
justify-content:space-between;从两端对齐
justify-content:space-around；使四周间隔相等。
justify-content:center；从中间开始对齐
（2）垂直对齐方式
align-items:center 元素位于盒子的中心。
align-items:flex-start 元素位于盒子上方头部
align-items:flex-end 元素位于盒子尾部

7.h5实现拖拽

<div id="one" draggable="true"></div>
<script>
var app = document.querySelector("#one)
app.addEventListener("dragend",function(e){
	this.style.cssText = `left:${e.clientX}px;top:${e.clientY}px`
})
</script>

8.cookie

cookie需要name,value,以及过期时间
(1)封装cookie

function setCookie(name,value,day){
	//这里主要是设置过期时间
	var date = new Date()
	var date.setDate(date.getDate() + day)
	//然后把设置好的date转换为字符串
	var expires = date.toGMTString()
	//设置cookie用到document.cookie
	document.cookie = `${name} = ${value},expires=${expires}`
}
setCookie(name,'兴兴',1)

（2）获取cookie

function getCookie(name){
	//首先获取到所有的cookie,以数组形式展示
	var cookies = document.cookie
	//对数组进行拆分
	var cookieArr = cookies.split
}

9.日期对象

10.XHTML

xhtml是以xml格式编写的html。可扩展超文本标记语言
注意点：标签必须小写，闭合，正确嵌套，还要有一个根元素。
属性小写，属性值需要用“”包裹起来。

11.离线存储

（1）manifest
在html标签属性中添加manifest=“xxx.manifest” 或者是manifest=“xxx.appcache”。然后创建manifest或是appcache文件。

CACHE MANIFEST

# 你需要缓存哪些资源
CACHE:
img.css
/img/2.jpg
/img/4.jpg
/img/6.jpg

NETWORK:
*
# 代表所有没有确定缓存的资源，都不进行缓存

FALLBACK:
/img/2.jpg /img/7.jpg

（2）appcache

11.状态码

1xx:消息
2xx:成功
3xx:重定向
4xx:客户端错误
5xx:服务器错误
100：客户端应该继续发送其余请求
200：请求成功
201：请求被创建完成，同时新的资源被创建
202：供处理的请求已被接受，但是处理未完成。
301：永久重定向
302：临时重定向

12.属性选择器

选择为title属性的元素添加样式

[title]{
	color:red;
}

选择为title为father的元素添加样式

[title=father]{
	color:red;
}

大多用于input中

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}