CSS
文章平均质量分 64
Running53
爱好前端开发的一名大学生
展开
-
XSS攻击和CSRF攻击,你怕了吗?
目录XSS攻击一、简述二、XSS的类型1、反射型2、存储型3、DOM型4、总结三、CSRF攻击四、CSRF攻击与XSS攻击的区别本人是一名前端爱好者,写博客主要用于记录下自己的学习过程,如果下方有表述不当的地方欢迎大家在评论区留言指正!希望大家看完这篇文章之后能对XSS攻击和CSRF跨域攻击有个基本的了解!XSS攻击一、简述XSS(Cross-site scripting),给人的第一种感觉好像可以简写为CSS,但由于其容易和层叠样式表(Cascading Style Sheets,CSS)的缩写混原创 2021-08-31 00:51:54 · 949 阅读 · 2 评论 -
Js为什么解除不掉事件绑定?
我们先来谈一下注册事件的方式:1、传统注册事件即利用各种on开头的事件,例如onclick、onmousedown、onmouseover、onmousemove、onmouseup等等诸如此类的事件,我们都会用以下代码块来对某些dom元素进行注册事件:btns[0].onclick = function() { console.log(1);}btns[0].onmousedown= function() { console.log(1);}btns[0].onmou原创 2021-07-14 20:09:33 · 596 阅读 · 0 评论 -
你是否有遇到过服务器渲染(res.render)无效的情况呢?
最近在改进之前做的登录注册功能,最开始做的时候是用的form表单提交将用户输入的账号密码提交到服务端。服务端根据数据处理完之后进行判断,如果在数据库中能够查询到对应的值,则会从登陆页面跳转到首页;如果在数据库中不能查询到对应的值,则依旧会停留在注册页面并提示错误信息。此过程页面的跳转恰好用的是res.render的方式,搭配上ejs模板引擎实现了页面的渲染。res.render('login',{msg:'登录失败!用户名或密码错误!',user:0,playlists:req.playlists,m原创 2021-06-17 12:44:07 · 1063 阅读 · 0 评论 -
window.sessionStorage与window.localStorage的使用方法与区别
window.sessionStorage属性区别:localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。sessionStorage用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。仅刷新页面不会删除数据。1、语法window.sessionStorage//window可以省略。保存数据语法:sessionStorage.setItem(‘key’, ‘value’);或sessionStor转载 2021-06-15 21:43:49 · 2017 阅读 · 0 评论 -
auto到底是什么意思?子盒子在父盒子内实现水平垂直居中的方法大全
我们知道,块级元素即使设置了宽度,也会占满一行,为什么会这样?因为默认的宽度规则是“适应于父级”规则(在水平方向上自动扩充)。即margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right= width of containing block对于绝对定位元素,有以下算式:left+margin-left+border-left-width+padding-left+widt转载 2021-06-15 17:04:44 · 386 阅读 · 0 评论 -
利用CSS实现超出盒子范围的文字转为省略号
只需要对装有文字的盒子加上如下代码即可: /*超出部分隐藏*/overflow: hidden;/*强制在一行*/white-space: nowrap;/*文本超出部分省略*/text-overflow: ellipsis;原创 2021-05-08 19:44:29 · 378 阅读 · 0 评论 -
盒子使用margin或padding后与背景颜色的联系:
我们在学习前端的时候,一定会遇到这样的问题:当我们给盒子设置了宽度、高度以及背景颜色时,这个时候在给它添加padding和margin的属性值,会有什么不一样吗?先简单通俗地介绍一下这两个属性:padding可以理解为内容与边框的距离;margin 可以理解为边框与其他元素的距离。最重要的是:这两者都会撑大我们的盒子!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2021-04-29 20:25:48 · 5929 阅读 · 0 评论 -
form的提交方式:get和post的区别
method属性规定如何发送表单的数据。有两种提交的方法分别为get和post。1、get:提交的数据量要小于1024字节,表单提交时表单域数值(表单请求的信息:账号、密码…)将在地址栏显示。<!DOCTYPE html><html><head> <title>测试get提交数据方法</title></head><body> <center> <form acti转载 2021-04-29 15:58:11 · 317 阅读 · 0 评论 -
如何让 height:100%; 起作用
如何让 height:100%; 起作用分享:当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果。你知道为什么height:100%不起作用吗?按常理,当我们用CSS的height属性定义一个元素的高度时,这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如,如果一个div元素的CSS是height: 100px;,那它应该在页面的竖向空间里占满100px的高度。而跟W3C的规范,百分比的高度在设定时需要转载 2021-04-28 00:10:22 · 150 阅读 · 0 评论 -
display:none会不会导致其所占空间消失?
display:none;的验证结果是该元素所占空间消失,验证例子为:<!DOCTYPE html><html><head> <title>test</title> <style type="text/css"> div{ width:500px; height:500px; } .num1{ b转载 2021-04-28 00:03:55 · 2588 阅读 · 0 评论 -
如何使用前端DOM操作制作一个便签:
大原创 2021-04-27 02:52:04 · 848 阅读 · 2 评论 -
学习使用:before和:after伪元素
学习使用:before和:after伪元素关于::before和::after的学习特别声明:此篇文章由胡均根据Louis Lazaris英文文章原名《Learning To Use The :before And :after Pseudo-Elements In CSS》进行翻译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://coding.smashingmagazine.com/2011/07/13/learning-to-转载 2021-04-11 22:28:34 · 81 阅读 · 0 评论 -
CSS中overflow-hidden的作用
CSS中overflow-hidden的作用顾名思义,就跟它的字面意思一样,当元素内的内容溢出的时候把他溢出的部分给隐藏掉。下面分享我遇到过的一个实例:本来是想要依赖下面的代码做出一个圆角的盒子出来.nav {border-radius:8px;margin:o 4px 3px;}不过里面的小盒子没有设置成圆角的,导致产生了下面的图片:原本大盒子设置好的边框圆角被小盒子覆盖掉,怎么样才能让不用去一个个改动里面的小盒子就能够把边框的圆角显示出来呢?操作很简单,我们只需要在大盒子的样式原创 2021-04-11 21:52:01 · 189 阅读 · 2 评论 -
CSS-flex布局
https://blog.csdn.net/Allenyhy/article/details/81605547?utm_medium=distribute.pc_relevant_t0.none-task-blog-转载 2021-04-09 00:59:49 · 54 阅读 · 0 评论