css
文章平均质量分 82
IT 哈
这个作者很懒,什么都没留下…
展开
-
详解16个CSS新特性(2021最新版-上)
2021 CSS 的新特性和之前两年的相比有相似也有不同,本文就带大家看看今年的 CSS 到底说了什么。简介如果您有关注过这两年的 CSS 发展状态报告(2019年和2020年)的话,不难发现,在报告中有专门关于 CSS 新特性一项的介绍。图片by 2020 年 CSS 发展状态报告(https://2020.stateofcss.com/en-US/features/)是不是有种似有相识的感觉,或者有一些又是那么的陌生。对于我而言,这些都不陌生。不过我想说.转载 2021-09-30 18:03:26 · 2720 阅读 · 0 评论 -
50天用JavaScript完成50个web项目,我学到了什么?
所有示例源码地址:https://github.com/eveningwater/my-web-projects/tree/master/js1.Expanding Cards效果如图所示:1.png 源码[1] 在线示例[2] [ ] 知识点总结: CSS:弹性盒子布局中的flex属性:让所有弹性盒模型对象的子元素都有相同的长度,且忽略它们内部的内容。JavaScript:利用[].filter.call()方法可快速实现简单的选项卡切换。如上述示例源码:转载 2021-09-09 13:15:20 · 359 阅读 · 0 评论 -
1062- 49 个常用 CSS 样式清单整理
1、文字超出部分显示省略号单行文本的溢出显示省略号(一定要有宽度)p{width:200rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}多行文本溢出显示省略号p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflo...转载 2021-08-27 09:08:00 · 200 阅读 · 0 评论 -
Flexbox 布局
概述在 flexbox 出现之前,布局的主力一直是 float 和 position,虽然他们表现得很是优秀,但是对于一些复杂或灵活的布局它们还是有些能力不及。比如下面这两种要求:剩余宽度的自动分配 分布对齐(现在已经有了独立的CSS Box Alignment Module)为了能更好的解决这些问题,新的布局技术 flexbox 应时而生,当然其诞生也并非一帆风顺,而是经历了两次浴火焚身,最终才得以带领布局走向华丽新篇。和从前的布局不一样,flexbox 的布局由两层结构组成,父元素设置.转载 2021-07-23 16:53:47 · 1451 阅读 · 0 评论 -
10种水平垂直居中对齐方式(史上最全)
重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居中的方式大概有下面这些,本文将逐一介绍一下,我将本文整理成了一个github仓库,欢迎大家star仅居中元素定宽高适用absolute + 负margin absolute + margin auto absolute + calc居中元素不定宽高absolute + transform lineheight writing-.转载 2021-03-29 23:35:48 · 3185 阅读 · 0 评论 -
1px像素问题(一):真正原因
一、前言关于,前端1px像素的问题,网上已经有很多相关的文章了,但是,关于这个问题的原因网上没有几个说到点子上的,甚至还大谈dpr。。。比如什么dpr是2时css1px在移动端是2px物理像素所以变粗了,那请问css2px在移动端变成了4px那为什么没有变粗的问题,为什么只有1px才有视觉效果变粗的问题???因为这个问题和dpr没有任何关系,dpr可以用来解释不同手机呈现页面的精细度的差异,但并不能解释1px问题。二、真正的原因:我们做移动端页面时一般都会设置meta标签viewport的con转载 2021-03-21 22:55:27 · 667 阅读 · 0 评论 -
rem布局
remr–代表root根,也就是指html。em–相对单位,也就是相对于html的字体大小单位。没有设定html大小的情况下,1rem=16px,因此下方的div为160px*160pxrem的应用比如说,现在有一个设计稿1000px。因为每个人打开的时候,设备不同,或者浏览器设定的分辨率不同,使得需要在不同分辨率下打开。假定屏幕大小为1000px,我们需要10rem来铺满整个屏幕,只需要设定1rem=100px;若屏幕大小为500px,依然需要10rem来铺满屏幕,则设定1rem=转载 2021-03-21 20:25:28 · 649 阅读 · 0 评论 -
浮动的清除 -- 四种方法
浮动的清除 -- 四种方法前言 -- 一个父亲不能被自己浮动的儿子,撑出高度。开胃小菜来看一个实验:现在有两个div,div身上没有任何属性。每个div中都有li,这些li都是浮动的。我们本以为这些li,会分为两排,但是,第二组中的第1个li,去贴靠第一组中的最后一个li了。第二个div中的li,去贴第一个div中最后一个li的边了。原因就是因为div没有高度,不能给自己浮动的孩子们,一个容器。清除浮动方法1:给浮动的元素的祖先元素加上高度如果一个元素要浮动,那么它的祖先转载 2021-03-17 22:10:06 · 22581 阅读 · 3 评论 -
你会用到的 15 个前端小知识
1. css 一行文本超出...overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2.多行文本超出显示...display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;3.IOS 手机容器滚动条滑动不流畅overflow:auto;-webkit-overflow-scrolli...转载 2020-11-28 00:04:24 · 152 阅读 · 0 评论 -
富文本原理了解一下?
富文本原理了解一下?缘起最近产品想让我在富文本里加个旋转图片的功能,我一想????,就觉得事情并不简单,因为印象中好像没见过这种操作。果然,经过一番百度之后,确实没怎么看到相关信息,这也就意味着要自己动手丰衣足食了????。但我自己对富文本又没什么了解,所以顺带稍微看了下富文本的实现方式,特此来沉淀一下,还是那句话不喜勿喷哈????。ok,这里先简要说下为什么会有富文本这种东西吧????!大概可能也许是因为有一天产品用着用着textarea感觉太单调了,单纯的文字已经无法表达他们内心的需求????转载 2020-11-18 19:18:00 · 1220 阅读 · 0 评论 -
一个Vue媒体多段裁剪组件
一个Vue媒体多段裁剪组件changelog2020.04.20 修复若干bugs; 优化部分动画; 优化交互方式。前言近日项目有个新需求,需要对视频或音频进行多段裁剪然后拼接。例如,一段视频长30分钟,我需要将5-10分钟、17-22分钟、24-29分钟这三段拼接到一起成一整段视频。裁剪在前端,拼接在后端。网上简单找了找,基本都是客户端内的工具,没有纯网页的裁剪。既然没有,那就动手写一个。代码已上传到GitHub欢迎Stargithub.com/fengma1992/…废.转载 2020-11-16 16:55:32 · 601 阅读 · 0 评论 -
模拟可编辑div输入域同时输入文字表情
近期遇到了模拟可编辑div输入域同时输入文字表情的需求,本来还觉得很好做,但是在具体实施的过程中遇到了一点问题。第一个比较简单的问题是表情和对应字符的映射关系,这部分比较好做,没有用富文本框也没有用编辑器,做了表情和相应字符的对应关系只有就可以实现这个需求。第二个问题在解决过程中就比较棘手了,因为是自己模拟输入域,所以对于在文字中加入表情后光标的定位及后续的输入是有要求的,就是得符合正常的输入习惯。这个问题的核心就是对于node节点的操作和光标对象的熟悉程度及其内部属性和方法的使用。对于前端开发者来转载 2020-11-07 22:08:44 · 363 阅读 · 0 评论 -
利用 javascript 实现富文本编辑器
近期项目中需要开发一个兼容PC和移动端的富文本编辑器,其中包含了一些特殊的定制功能。考察了下现有的js富文本编辑器,桌面端的很多,移动端的几乎没有。桌面端以UEditor为代表。但是我们并不打算考虑兼容性,所以没有必要采用UEditor这么重的插件。为此决定自研一个富文本编辑器。本文,主要介绍如何实现富文本编辑器,和解决一些不同浏览器和设备之间的bug。准备阶段在现代浏览器中已经为我们准备好了许多API来让 html 支持富文本编辑功能,我们没有必要自己完成全部内容。contenteditabl转载 2020-11-07 22:05:07 · 2507 阅读 · 0 评论 -
深入理解css3中的flex-grow、flex-shrink、flex-basis
flex为css的布局带来了新的时代,作为一个重构工程师,我们再也不用局限于float和position,特别是在移动端,我们可以利用flex轻松实现以往float和psition很难实现甚至是无法实现的布局。 本文主要讲解flex的三个子属性:flex-grow、flex-shrink、flex-basis。他们只是博大精深的flex中的一部分,本文默认你对flex已经有初步的了解,如果不了解,建议先看看这里:http://www.w3cplus.com/blog/666.html。flex布局发生在转载 2020-11-01 16:39:09 · 488 阅读 · 0 评论 -
使用Canvas实现一个在线发牌游戏 [纯前端、附源码]
写在开头 一位作者开源了这个游戏,纯前端实现,原生Canvas 希望大家给他点个star,源码地址:https://github.com/leeseean/sic-bo 这个项目克隆很慢,因为比较大,如果你想知道怎么克隆快,可以看今天公众号第二条推文 《如何把github的clone速度提升到1MB/S》 为什么要推荐这个项目 在我看来,这个作者是有一定技术实力的,对canvas理解和使用,以及浏览器渲染机制,都是比较了解的,还有原生dom操作能力都可以 里面大转载 2020-07-01 13:33:26 · 858 阅读 · 0 评论 -
图片上传总结(IE9拜拜)
增加图片发送功能一、需求(1)点击图片 Icon,出现文件上传框,选择图片;(2)验证图片类型及大小,本地预览的同时上传到服务器;(3)上传完之后进行发送,同消息发送(本文不涉及)。二、DOM节点预备图片Icon(展示,用于点击) 文件上传标签 <input type="file" />(隐藏)可选项:form 表单(隐藏):如果不使用 formData,可通过表单上传 iframe(隐藏):如果不使用 ajax,可用于存放图片上传之后返回的数据(被称为隐藏 i..转载 2020-06-11 16:28:00 · 298 阅读 · 0 评论 -
我踩了富文本编辑的坑
初次接触富文本编辑是在去年校招的时候,当时选了葡萄城校招编程中的一道,写一个富文本编辑器。然后,我就写了一个 demo:textEditor,实现了一些很简单的功能。最近,工作上有了富文本编辑的需求,正好趁此机会,可以好好研究一下了,有意思的同时也将寄几带入了深坑。WangEditor 算是目前做的比较好的开源的富文本编辑器,阅读它的源码真的是解决了我很多问题呢,感谢大神~~以下是对自己踩坑的记录,项目背景是仿网易七鱼访客端IM。仿网易七鱼聊天室一、两个主要对象对于富文本编辑器的操作,主转载 2020-06-11 14:43:18 · 1011 阅读 · 0 评论 -
定位input的光标,设置光标的位置
最近遇到一个需求,用户在输入框里输入文本的时候,每输入一个字符都要转换成大写,看起来比较简单,但是输入完后在中间插入删除的时候,每添加或者删除一个字符的时候input框的光标自动跑到字符最后面,操作起来很是麻烦下面在网上找的各种资料,整理的一些方法,经过一些尝试终于解决了,记录下来,此方法依赖于jquery。注释掉的部分 可以自行删除。以下是demo<html><head> <meta http-equiv="Content-Type" cont转载 2020-06-09 16:13:58 · 4936 阅读 · 0 评论 -
html元素contenteditable属性如何定位光标和设置光标
最近在山寨一款网页微信的产品,对于div用contenteditable属性做的编辑框有不少心得,希望可以帮到入坑的同学。废话不多说了,我们先来理解一下HTML的光标对象是如何工作的,后面我会贴完整的DEMO代码,不用急,先去理解,才能做出更加好的输入体验。在HTML里面,光标是一个对象,光标对象是只有当你选中某个元素的时候才会出现的。当我们去点击一个输入框的时候,实际上它会产生一个选中对象-selection(就是我们可以看到的文字变成蓝色的那个区域),selection在火狐浏览器可以直接用转载 2020-06-09 16:11:24 · 6129 阅读 · 2 评论 -
输入框插入表情的实现
输入框插入表情的实现HTML5在普通的 textarea 中,只能显示普通的文本。如果简单的输入文本,textarea 便足以胜任。但是实际情况往往要复杂得多。简单版本的插入表情常见的版本一般都是使用 textarea,然后表情使用某种约定的文本格式代替,比如“你好啊[微笑]”。在呈现的时候,通过固定的文本解析方法将内容中的表情文本替换成图片。新浪微博中发微博的输入框就是如此。但是,在这有一点需要注意,如果只是简单的在文本的最后插入表情之类的预定好的文本格式,只需获取到到 tex...转载 2020-06-09 16:08:50 · 5154 阅读 · 0 评论 -
前端基础篇之CSS世界
小刚老师 基本概念 盒模型四大金刚 好基友`line-height`和`vertical-align` 流的破坏 层叠规则 弹性布局 网格布局 文本控制 元素的显示与隐藏 基本概念这些基本概念有些可能不易理解但却都很重要,如果看完还是很不理解的话需要自己谷歌或百度,网上关于这些概念的文章不少。流“流”又叫文档流,是css的一种基本定位和布局机制。流是html的一种抽象概念,暗喻这种排列布局方式好像水流.转载 2020-05-09 09:00:08 · 283 阅读 · 0 评论 -
css实现居中布局的解决方案
html示例代码如下:<div class="parent"> <div class="child">Demo</div></div>上面的parent元素是居中元素的外部div元素,里面的child元素就是要去做居中的元素,这两个元素的大小都是不固定的水平居中上面html示例代码水平布局效果示意图如下所示:为了能让大家...转载 2020-04-26 16:44:05 · 216 阅读 · 0 评论 -
纯CSS实现点击展开全文功能
纯CSS实现点击展开全文功能2020-04-11CSS787View看标题大家不难猜到我今天要实现的功能,正如你打开我的博客文章,在正文下面看到的按钮,点击展开全文。以前我写过类似的代码,可以去看看:纯CSS3制作TAB选项卡的两种方式CSS:checked伪类选择器思路是使用checkbox的:checked来做隐藏和显示。跟上面这个CSSTab使用radio来实现是差不...转载 2020-04-26 08:57:10 · 4402 阅读 · 0 评论 -
css flex布局详解
1,flex布局是个什么东西?官方说法:Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。民间说法:flex 就是一种布局方式,类似于 block,inline-block等。2,flex涉及的概念Flex的基本作用就是让布局变的更简单,比如“垂直居中”等,当然不止这个,要说清楚flex有什么作用首先要...转载 2020-04-21 21:43:07 · 455 阅读 · 0 评论 -
解决【display:flex布局】遇上 【position: absolute / fixed 】的失效问题
问题描述:有个这样的页面,页面是通过flex布局的,现在想将头部( 我的订单栏 )固定,那么我们第一反应就是添加定位呀,position : fixed。但是问题来了,position可以添加,但是添加之后,页面变成这样了(如下所示),也就是设置的display:flex 失效了,不起作用。position 一般常用的属性值有三种: relative 、 absolute 、...转载 2020-04-17 09:18:43 · 8185 阅读 · 0 评论 -
90个前端开发面试必问基础大总结
大家好,我是练习时长一年半的前端练习生,喜欢唱、跳、rap、敲代码。转眼又到了金三银四的时节,相信很多小伙伴已经在为自己心仪的公司做准备,本文是笔者一年多来对前端基础知识的总结和思考,这些题目对自己是总结,对大家也是一点微薄的资料,希望能给大家带来一些帮助和启发。成文过程中得到了许多大佬的帮助,在此感谢恺哥的小册[1]、神三元同学的前端每日一问[2]以及许多素未谋面的朋友们,让我等萌新也有机会在前...转载 2020-04-15 13:35:08 · 2721 阅读 · 0 评论 -
CSS之浮动布局(float,浮动原理,清除/闭合浮动方法)
1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置2.浮动的原理:使当前元素脱离普通流,相当于浮动起来一样,浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘3.浮动的生成:使用css属性float:left/right/none 左浮动/右浮动/不浮动(默认)4.浮动的影...转载 2020-04-14 09:32:28 · 210 阅读 · 0 评论 -
CSS布局指南
在过去几年中,CSS布局已经发生了巨大的变化,现在我们开发网站的方式也发生了巨大变化。现在我们有需要可选的CSS布局方式来开发我们的网站,这也就要求我们对这些方式能作出正确而双合适的选择。在这篇文章中,将会介绍各种CSS布局的基本使用方式以及使用的目的。如果你还是CSS方面的新手并且又想了解什么才是最好的布局方式,那么这篇文章正是你所需要的。如果你是一位比较有经验的开发者,想要了解一些关于CS...转载 2020-04-13 13:43:46 · 223 阅读 · 0 评论 -
深入理解css之float
div> <img src="./card.jpg" alt="" class="float"> <p class="content">文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕</p></div>float的特性一个元素设置了float属性,会表现出如下特性:包裹性 块...转载 2020-04-13 12:45:54 · 222 阅读 · 0 评论 -
垂直居中(总结)
垂直居中(总结)在工作中我们经常会遇到垂直居中的情况这里我对自己常用的垂直居中进行了总结1、line-height 仅限单行文本且高度已知的标签使用, 所有样式先清除 * {maigin:0; padding: 0}) HTML模版代码:<!DOCTYPE html><html lang="en"><head> <...转载 2020-04-13 12:02:45 · 396 阅读 · 0 评论 -
CSS实现三栏布局(5种)
CSS实现三栏布局(5种)常见的布局方式: float布局、Position定位、table布局、弹性(flex)布局、网格(grid)布局那么我们就是用以上5种方式完成三栏布局,不过前提是左右宽度(假如左右宽度为300px),整个高度已知(假如高度为100px),中间宽度自适应1、float布局: float最初的设计的初衷是为了解决文字环绕的问题,即给一个图片设置flo...转载 2020-04-13 12:01:11 · 663 阅读 · 0 评论 -
CSS3伪类和伪元素的特性和区别
前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link、visited等,伪元素较常见的比如:before、:after等。其实上面提到的这些伪类和伪元素都是CSS1和CSS2中的概念,CSS1和CSS2中对伪类的伪元素的区别比较模糊,甚至经常有同行将:before、:after称为伪类。CSS3对这两个概念做了相对较清晰...转载 2020-04-13 11:48:48 · 236 阅读 · 0 评论 -
CSS的伪类和伪元素
之前介绍了8种选择器,基本上可以应对大部分的开发需求,但是如果不会使用伪类和伪元素,就跟下面的图差不多,后面会摔的。伪元素和伪类虽然不是特别常用,但是,很好用,可以帮你省掉很多无用功,效果还好。下面直接进入正题,尽量用最小的篇幅让人明白如何使用它们。...1.伪元素和伪类的区别伪元素和伪类都是为了给一些特殊需求加样式,定义上基本一致。 伪类像类选择器一样给已存在某个元素添加...转载 2020-04-13 11:43:48 · 688 阅读 · 0 评论 -
CSS 浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。CSS 浮动请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘:再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流...转载 2020-04-13 11:29:34 · 136 阅读 · 0 评论 -
这可能是史上最全的css布局教程
标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题。所谓布局,其实包含两个含义:尺寸与定位。也就是说,所有与尺寸和定位相关的属性,都可以用来布局。大体上,布局中会用到的有:尺寸相关的盒子模型,普通流、浮动、绝对定位三种定位机制,CSS3中的transform、弹性盒子模块、试验中的grid模块。逛园子的时候经常可以看到浮动布局,inline-block布局,弹性盒布局这几个...转载 2020-04-13 10:52:16 · 1156 阅读 · 0 评论 -
关于css的float
什么是浮动?CSS中的一些元素是块级元素,表示它们会自动另起一行。举个例子,如果你创建了两个段落,每个段落都只有一个单词。这两个单词不会靠在一起,而是会各自占据一行。另一些元素是行内元素,表示它们和前面的内容位于相同的一行。举个例子,<a>可以出现在另一个元素中,比如<p>,这不会产生多余的空格或者出现换行。欺骗这种布局模型的一种方式是使用浮动,浮动可...转载 2020-04-10 17:30:05 · 185 阅读 · 0 评论 -
如何提升你的CSS技能,掌握这20个css技巧即可[完整版]
前言随着前端开发越来越关注效率:通过选择器的使用和简化代码来快速加载渲染。像Less、SCSS这样的预处理器在工作的时候,需要绕的路较长,而直接使用css速度会更快。这里涵盖了20个css技巧来帮助你减少重复规则和复写,在布局中标准化样式流程,不仅可以帮助你高效地创建自己的框架,而且可以解决许多常见的问题。如果您对CSS比较陌生,看看这篇文章《CSS选择器如此之多,你了解多少?》1...转载 2020-04-10 16:55:22 · 452 阅读 · 0 评论 -
CSS3线性、径向渐变、旋转、缩放、动画实现王者荣耀匹配人员加载页面
前言日子总是像从指尖流过的细沙,在不经意间悄然的滑落。转眼2019年第一季度已经过去了,提前祝大家愚人节快乐,当心被人愚弄哦(就算被愚弄也不要生气啦)。先来看看今天要实现的效果原图:玩过王者的应该都熟悉,这个页面的效果。为什么要实现这个效果了?第一:王者这么火,电竞这么火。第二:主要还是来学习 CSS3 的线性、径向渐变、旋转、缩放以及动画。图形解析1、背景(径向渐变)...转载 2020-04-10 16:53:26 · 678 阅读 · 0 评论 -
使用font-size:0解决设置inline-block引起的空白间隙问题
使用font-size:0解决设置inline-block引起的空白间隙问题一、空白间隙问题在进行页面布局的时候为了页面代码所谓整洁刻度,往往会设置缩进或是换行,但是元素display为inline-block或是inline时,行内元素虽然没有设置 margin值,这些换行或是缩进。还是会出现空白间隙。如下所示:HTML部分<div id="box1">1&l...转载 2020-04-10 15:43:43 · 750 阅读 · 0 评论 -
CSS before和after伪元素
CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,它们是以CSS选择器的形式出现的,具有标签的表现效果,但是呢又不是真正的标签元素,所以叫做“伪元素”。下面就说一下常见的两个伪元素before和after。一、伪元素基本用法 在CSS选择器中加上相应伪类选择符就可以了,像这样:#example: before或者#example: after,这里是使用...转载 2020-04-10 11:20:33 · 593 阅读 · 0 评论