css
关注
分享
扫一扫
文章平均质量分 70
崽崽的谷雨
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
展开
-
前端实现浏览器自定义滚动条
前端实现浏览器自定义滚动条原创 2024-03-27 10:30:00 · 8396 阅读 · 0 评论 -
搜索框和按钮缩放时会有缝隙的bug
做一个类似于 百度的搜索框时，浏览器 100% 没什么问题，但是缩放到175% 时按钮和input会出现缝隙。 100%效果图 175%效果图 如上图：明显能看出 有空白的缝隙 产生这个的原因是：当缩放到175%时，应该1.75格代表1像素，但由于硬件层次限制，比如一格用四个物理像素点绘制，0.25格就不绘制，故1.75格中的0.75，只能用三格绘制，未绘制的一格产生了空隙（css 页面缩放边框产生空隙相关）如果是 按钮和 input 之间有缝隙 可以参考：input输入框和bu原创 2022-06-30 17:19:01 · 922 阅读 · 0 评论 -
css flex 布局 space-around 和 space-evenly 之间的区别css flex布局）
css flex 布局 space-around 和 space-evenly 之间的区别css flex布局）flex布局原创 2022-06-20 08:30:00 · 19498 阅读 · 0 评论 -
js+html实现点击按钮列标滚动（scrollTop）
效果图实现点击上下按钮，滚动条滚动。代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-s..原创 2021-07-02 13:33:00 · 1543 阅读 · 0 评论 -
html+js实现切换图片（点击按钮切换）
效果图实现点击按钮切换图片的效果具体代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca..原创 2021-07-02 13:27:11 · 19462 阅读 · 3 评论 -
判断浏览器是否支持某个CSS属性以及获取浏览器信息
前言：css属性兼容性很重要，有的时候必须兼容其他浏览器比如ie和其他各种浏览器。所以我们要知道浏览器是否支持某个属性，可以用下面的方法试试。if( attr in document.documentElement.style){ return true;}else{ return false;} 例如：判断是否支持flex属性<pre name="code" class="javascript">if( 'flex' in document.d.转载 2021-05-19 14:27:19 · 1619 阅读 · 0 评论 -
BFC和IFC以及双边距bug和边距塌陷（折叠）问题
BFCBFC（Block Formatting Context）叫做“块级格式化上下文"布局规则如下：1.内部的盒子会在垂直方向，一个个地放置；2.盒子垂直方向的距离由margin决定， 属于同一个BFC的两个相邻Box的上下margin会发生重叠；（边距折叠margin collapsing 解决和HTML:margin塌陷现象的解决，面试经常问到）3.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；4.BFC的区域不会与float重叠；5.BFC就是页面上的一个隔离的独转载 2021-04-01 09:56:45 · 395 阅读 · 0 评论 -
ie浏览器报strict模式下一个属性不能定义多次
ie原创 2020-12-22 19:36:01 · 777 阅读 · 0 评论 -
css display:“inline-block“错位问题与css超出部分显示省略号
222原创 2020-12-22 19:21:51 · 1777 阅读 · 0 评论 -
css水平垂直居中方案（不限宽高）
水平垂直居中的4种方案(宽高不定)方案中我也给了宽高,但并不是说宽高固定了。而是以为不给宽高无法看到效果。这个方案不固定宽高的是指,用这个方案之后,如果你父元素、子元素的宽高发生了改变,依旧可以保证是水平垂直居中的位置。下面四种方案都是能够实现,当父元素或子元素的宽高发生改变时,依旧维持水平垂直居中布局的方案。html如下：<div class="father"> <div class="son"></div></div>方案1转载 2020-08-20 15:41:11 · 398 阅读 · 0 评论 -
js实现px与rem的换算（移动端）vue/react
1.简单的方法：functionrem(){ document.getElement.style.fontSize=document.getElement.clientWidth/7.5+'px'}window.onload=rem()//文档加载完成执行window.onresize=rem()//当浏览器被重置大小时执行Javascript代码可参考on...原创 2019-12-11 17:39:04 · 2943 阅读 · 0 评论 -
css优先级及加载顺序/权重值以及css继承
1.css的加载方式CSS的引入样式总共有三种：行内样式（内联样式表）、内部样式表、外部样式表。下面分别来介绍这三种样式。1.内联式（行内样式）内联式就是直接在标签里写样式。行内样式只对应用了此样式的标签有效，如果有多个相同的标签要使用相同的样式，那么每一个标签都要引入该样式，会造成很多重复的代码，所以，在实际的应用当中，不建议使用行内样式。（行内样式不容易被浏览器缓存，每次刷新都重新...原创 2019-12-09 17:51:32 · 2516 阅读 · 0 评论 -
css overflow属性及使用方法（场景）
overflow这个属性还是挺实用的比如，一个div展示文字，想让超出部分隐藏就可以使用overflow:hidden,想让显示的画就用overflow:scroll;1.overflow的属性值 描述 visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览...原创 2019-12-02 11:20:12 · 32768 阅读 · 0 评论 -
css calc函数
我最近看别人写的样式发现一个函数calc,于是我查了一下用法。.div { height: calc(100vh - 60px);//用来动态计算div的高度 width: 100%; background: #eaebef; padding: 6px 40px; margin-top: 60px; padding-top: 30px; ...原创 2019-12-02 10:33:25 · 792 阅读 · 0 评论 -
CSS Modules 用法教程（css global）
学过网页开发就会知道，CSS 不能算编程语言，只是网页样式的一种描述方法。为了让 CSS 也能适用软件工程方法，程序员想了各种办法，让它变得像一门编程语言。从最早的Less、SASS，到后来的 PostCSS，再到最近的 CSS in JS，都是为了解决这个问题。本文介绍的CSS Modules有所不同。它不是将 CSS 改造成编程语言，而是功能很单纯，只加入了局部作用域和模块依赖...转载 2019-11-29 16:18:43 · 3374 阅读 · 0 评论 -
css ::before和:befor的用法和区别以及伪元素和伪类的区别
前言：css是前端不可缺少的一部分，也很重要。厉害的前端可以用最简洁的css，实现美观的布局。下面我们来说一下::befor和:befor的用法及区别？在css中，::before 是一个伪类元素，代表生成的内容元素，表示相应元素的可抽象样式的第一个子元素，即：所选元素的第一个子元素。利用::before可以把需插入的内容插入到元素的其他内容之前，并且默认内联显示。::before需要...原创 2019-11-29 16:01:23 · 3761 阅读 · 0 评论 -
js 判断类型的方法（type/instanceof/constructor/Object.prototype.toString）
js判断数据类型的四种方法1.typeof typeof是一个操作符，其右侧跟一个一元表达式，并返回这个表达式的数据类型。返回的结果用该类型的字符串(全小写字母)形式表示，包括number,string,boolean,undefined,object,function,symbol等。typeof ""; //stringtypeof 1; //numbertyp...转载 2019-11-25 14:58:49 · 394 阅读 · 0 评论 -
css flex布局
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}行内元素也可以使用 Flex 布局。.box{ display: inline-flex;}Webkit 内核的浏览器，必须加上-webkit前缀。.box............转载 2019-11-25 14:49:22 · 364 阅读 · 0 评论 -
css display属性及使用方法
1.display的取值浏览器支持IE Firefox Chrome Safari Opera 支持 支持 支持 支持 支持 所有主流浏览器都支持 display 属性。注释：如果规定了 !DOCTYPE，则 Internet Explorer 8 （以及更高版本）支持属性值 "inline-table"、"run-in"、"ta...原创 2019-11-25 14:45:26 · 3016 阅读 · 0 评论 -
css postion属性详解及用法
前言：css是前端的必要及能之一，今天总结一下css中postion属性。1.postion是什么及取值；position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有五个值。static（默认） relative（相对定位） fixed（固定定位） absolute（绝对定位） sticky（动态效果）2.使用方法及场景1.stat...转载 2019-11-25 14:26:20 · 10423 阅读 · 0 评论