HTML/CSS
关注
分享
扫一扫
文章平均质量分 59
想搞全栈的前端
愿君学长松,慎勿作桃李.受屈不改心,然后知君子
展开
-
原生js实现点击复制文本
效果如下核心代码select()方法用于选择该元素中的文本。document.execCommand('copy')执行浏览器复制命令document.execCommand()详细介绍语法bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)返回值一个 Boolean ，如果是 false 则表示操作不被支持或未被启用。注意：在调用一个命令前，不要尝试使用返回值去校验浏览器的兼容性原创 2021-05-18 14:35:24 · 835 阅读 · 0 评论 -
手写js表格表头宽度拖动
github地址如图html代码使用方法：new tableResizable(id)表格需要用一个div包裹住，然后传入div的id<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></titl原创 2021-05-13 18:06:38 · 764 阅读 · 0 评论 -
第一个子元素在未超过父元素高度的情况下设置margin-top导致出现竖向滚动条的问题
分析问题在页面布局时，我们经常会设置html,body的height为100%，让处于最外面的父级元素刚好充满整个屏幕高度，但是，如果此时body下面第一个子元素，刚好设置了margin-top的值，你会发现页面出现了竖向滚动条，问题是这个子元素并没有超过父容器高度也导致出现竖向滚动条，似乎这个margin-top是添加到了父容器上。例子：假如一个页面有一个列表，第一个子元素需要保持和最顶部有一些上边距，于是你设置了这个子元素margin-top:20px，这个子元素的高度并没有超过父元素的高度，但是整原创 2021-05-08 15:03:11 · 1389 阅读 · 0 评论 -
媒体查询加上rem实现页面字体大小自适应
媒体查询加上rem实现页面字体大小自适应实现以375px大小为基准把根字体设为16px通过媒体查询适配不同屏幕大小，加上计算属性和rem实现字体大小自适应代码下面是一套在实际开发中，兼容性较好的实践代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <meta name="viewp原创 2021-04-09 14:40:04 · 2286 阅读 · 0 评论 -
原生js 元素拖拽动态排序
效果github预览拖拽html1、使用拖拽事件的时候，报错‘Cannot set property ‘ondragstart’ of null’：原因：JS的引进放在了head标签里面，浏览器遇到<script>标签的时候会立即执行脚本，这个时候DOM树还没有构建完成，访问不到节点解决：把JS的引进放在body标签底部使用’defer’异步加载js文件，不会影响DOM渲染，js脚本会在DOM渲染完毕后，DOMContentLoaded事件调用前执行defer和async：a原创 2021-04-06 14:18:35 · 3567 阅读 · 0 评论 -
HTML页面空格不显示问题
white-spacewhite-space属性设置如何处理元素内的空白。默认空白会被浏览器忽略。需要显示空白只需要white-space: pre测试原创 2021-03-31 15:48:13 · 3076 阅读 · 0 评论 -
$(‘input‘).checked = true不生效 checked为undefined
$(‘input’).checked = true不生效设置input的checked 不生效，并且获取checked 值为undefined这是因为当前input没有checked 属性，需要设置属性值在再赋值$('input').prop('checked', 'true');原创 2021-03-17 11:05:45 · 1439 阅读 · 0 评论 -
table表头固定表体滚动（动态出内部滚动条）
效果如图代码实现<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <script src="jquery.min.js"></s原创 2021-02-09 15:20:17 · 1084 阅读 · 0 评论 -
纯css绘制斜线表头
效果图如下代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;原创 2021-01-19 09:52:28 · 501 阅读 · 0 评论 -
滚动条美化
滚动条美化/** 滚动条美化 **//*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/::-webkit-scrollbar { width: 6px; height: 8px; background-color: white;}/*定义滚动条轨道 内阴影+圆角*/::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; ba原创 2020-12-24 11:58:53 · 622 阅读 · 0 评论 -
scss基本使用
前言Sass是成熟、稳定、强大的CSS预处理器，而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承了Sass强大的动态功能。特性概览CSS书写代码规模较大的Web应用时，容易造成选择器、层叠的复杂度过高，因此推荐通过SASS预处理器进行CSS的开发，SASS提供的变量、嵌套、混合、继承等特性，让CSS的书写更加有趣与程式化。变量变量用来存储需要在CSS中复用的信...原创 2019-07-13 13:16:08 · 337 阅读 · 0 评论 -
CSS中多种常见居中方法
前言css居中是常见的需求，不同场景需要不同的居中方法，本文讨论多种常见居中方法，如有遗漏欢迎补充。水平居中内联元素给内联元素的父级加text-align:cente;.container{ text-align:center;}块级元素设置左右marign的值为auto.container{ margin:0 auto;}垂直居中1. 内联元素...原创 2019-06-23 16:03:36 · 372 阅读 · 0 评论 -
使用css中的border绘制三角形的方法和原理
实现首先看看怎么实现的贴上代码;<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .sjx{ width: 0px; ...原创 2019-04-14 09:54:29 · 792 阅读 · 0 评论 -
css选择器权重及其计算规则
css选择器文章目录css选择器选择器类型css选择器权重值权重计算方法案例选择器类型ID #idclass .class标签 p通用 *属性 [type=“text”]伪类 ：hover伪元素 ::first-line子选择器、相邻选择器css选择器权重值选择器权重!important权重!...原创 2019-04-23 08:38:40 · 1972 阅读 · 0 评论 -
前端学习路线---避免踩坑，直击公司需求
我自己在学习web前端之前对web的学习路线也是很懵，在网上查了查各种学习路线也是有点慌。今天我就自己的学习过程来聊一聊web各个阶段需要学习的内容，以及怎么样就可以去面试了。初期阶段html+css+javaScript。在我看来html负责网页点基本框架—房梁，毛胚房。css负责网页点美化装饰—房屋的装修。js负责网页的一些特效让其更酷炫—房屋的一些功能性建筑。学完这一部分我们如果可以自...原创 2019-04-03 10:54:30 · 195 阅读 · 0 评论 -
前端必备PS技巧
PS在前端主要有两方面的应用：1：测量图像大小、距离 2：切图测量不用说大家平时开发都需要用，而切图也是前端必备技能。我们作为前端会比UI更清楚我们需要的图片，有时候需要修改也可以自己动手，不必处处麻烦UI，也提高了工作效率。那我们重零开始吧！1.下载工具PS在这里分享一下正版PS安装包，内含注册码的，链接失效了可以下方评论。下载链接：链接：https://pan.baidu.com/...原创 2019-04-01 09:16:17 · 1314 阅读 · 1 评论 -
css控制超出一行内容显示省略号
前言在前端开发过程中，经常会遇到文字超过一行内容的情况，要求隐藏超出部分并且以省略号显示。像这样：实现方法主要依赖下面三个属性实现/* 规定段落中的文本不进行换行： */white-space: nowrap;/* 内容会被修剪，并且其余内容是不可见的。 */overflow: hidden;/* 显示省略符号来代表被修剪的文本。 */text-overflow: ellip...原创 2019-05-24 08:57:12 · 3150 阅读 · 0 评论 -
rem、em的区别与使用方式
前言我们先来看看比较重要的两点：rem与em的本质区别rem(root element)是参照html的font-size,em(element)是参照父元素的font-size使用rem与em的优点以rem/em为单位比px更方便,屏幕尺寸发生变化时只需要更改html/body基数即可,不需要再重新给每个标签写不同的font-sizerem使用rem为单位,系统处理...原创 2019-06-03 13:10:45 · 1442 阅读 · 0 评论 -
clientX,screenX,pageX,offsetX的区别
前言关于clientX,screenX,pageX,offsetX的区别之前也比较迷糊，然后自己写了几个demo算是弄明白了，在这记录一下。定义一、clientX、clientY点击位置距离当前body可视区域的x，y坐标。可以理解为距离浏览器窗口的距离，但注意这里不包括浏览器的导航栏距离只是浏览器内容区域。二、pageX、pageY对于整个页面来说，包括了被卷去的body部分的长度...原创 2019-06-17 12:02:35 · 5188 阅读 · 3 评论 -
浅析BFC原理及作用
什么是BFC块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。怎么创建BFC下列方式会创建块格式化上下文：上面太多了不太好记，主要可以记住以下四种：body 根元素浮动元素：float 除 none 以外的值绝对定位元素：position (absol...原创 2019-06-17 20:07:42 · 249 阅读 · 0 评论 -
遮罩层的简单使用分析
今天我们来聊聊遮罩层的简单使用。遮罩层是基于以下几个属性来实现的：1.z-index定义：z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。简单来说就是谁的z-index属性值高在z轴方向会在更外面。2.opacity作用：规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。3.display这里我们只需要理解这个属性的两个...原创 2019-04-02 10:06:06 · 3832 阅读 · 0 评论