CSS中的四种定位区别详解
我们都知道，前端开发里面的CSS中常用的定位方式有普通定位，相对定位，绝对定位、固定定位定位这四种。但是很多零基础的前端小白都不知道这4种定位方式都有什么作用和区别，在使...
2020-10-15
解决移动端1px边框最好的方法(推荐)
在移动端开发时，经常会遇到在视网膜屏幕中元素边框变粗的问题。本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法。1px 边框问题的由来苹果 iPhone4 首...
2020-10-15
让CSS flex布局最后一行列表左对齐的N种方法(小结)
引用张鑫旭的一篇文章分享给大家，如果你想进行修改进入链接点到对应的图片生成的链接进入，方可修改。问题描述//html<div class="container"> <div class="list"></div>...
2020-10-15
CSS 列表模型之marker标记的使用
本文主要对::master伪元素、list-item下的list-style-image、list-style-type样式属性进行介绍，并介绍了在实际中如何使用。list-item下还有其他不常用的样式属性这里不做介...
2020-10-15
css counter计数器与content总结
content属性早在css2.1的时候就被引入了，可以使用:before以及:after伪元素生成内容。content属性现在已经得到大部分浏览器的支持，关于content属性的支持情况可以在canius...
2020-10-15
利用transform实现一个纯CSS弹出菜单的示例代码
前言在制作顶部菜单的时候，都会要求制作弹出的二级菜单，早先的做法是用jQuery的来控制二级菜单的显示和过渡动画，但利用CSS3中的transform属性后，这一切都变得异常简单先上效果...
2020-10-15
详解CSS文件中的4种引入方式:行内,内联式,外部式,导入式
CSS引入方式-行内式通过 style这个标签属性,将css键值对直接写入标签内<p style="width: 100px;height: 100px;background: red;"></p> <!--注释:这段代码描述的是一个宽高...
2020-10-15
CSS 容器背景 10 种颜色渐变Demo（linear-gradient()）
语法background: linear-gradient(direction,color-stop1,color-stop2,...); direction：用角度值指定渐变的方向（或角度）。 color-stop1,color-stop2,...：用于指定渐变的...
2020-10-15
纯CSS3+DIV实现小三角形边框效果的示例代码
具体代码如下所示：html代码是这样的<div class="arrow-up"> <!--向上的三角--></div><div class="arrow-down"> <!--向下的三角--></div><div class="arrow-left">...
2020-10-15
Flex布局让子项保持自身高度的实现
在用了Flex布局会发现，当水平排列后，会发现所有子项的高度都变成一样的了。
这是因为Flex 布局会默认： 把所有子项变成水平排列。 默认不自动换行。 让子项与其内容...
2020-10-15
Flex布局实现div内部子元素垂直居中的示例
1、Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。注意，设为Flex布局以后，子元素的float、clear...
2020-10-15
详解flex布局与position:absolute/fixed的冲突问题
之前笔者在开发项目的过程中就遇到了这个坑，flex布局与position:absolute/fixed的冲突问题。后来想到了解决办法，今天就与大家一起交流一下：项目实战：我们现在想做一个头部的导...
2020-10-15
CSS3 input框的实现代码类似Google登录的动画效果
用css3将input框写出类似Google登录页面的动画效果效果一代码如下CSSbody{ background-color:#acacac; } .form-container{ display: block; position: relativ...
2020-10-15
详解flex布局下图片变形的解决方法
flex布局是现在常用的一个布局方式，但是有时候也会导致出现一些小问题。本人在使用flex布局做一个左边头像，右边文字的时候，发现固定图片的宽度时，图片宽度仍然发生了变化。下图...
2020-10-15
使用Flex布局实现头部固定内容区域滚动的方法
页面头部固定布局以前用 position:fixed实现，如今可以用flex布局实现，快捷方便。Flex布局好处：1.不破坏html文档流 2.兼容性更好。display: flex 和 display: -webkit-box 仅是...
2020-10-15
CSS中的两个特殊值用于控制层叠的inherit和initial的方法
在CSS中有两个特殊值可以赋给任意属性，用于控制层叠：inherit和initial。我们来看看这两个特殊值。使用inherit关键字有时，我们想用继承代替一个层叠值。这时候可以用 inherit...
2020-10-15
CSS动态条形加载条效果的示例代码
运用了css变量的知识，直接上代码及其我加的注释<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>展示一个css动态条形加载条</title> <style> /...
2020-10-15
CSS3实现线性渐变用法示例代码详解
前言演示下太老版本浏览器的渐变实现了[IE9-];
IE9以前,渐变都是通过滤镜实现的,大体的写法就是这样;.testDiv { width:400px; height:400px; border:1px solid #f00; /...
2020-10-15
H5中取消a标签在点击时的背景颜色的方法
1、取消a标签在移动端点击时的蓝色a { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; -moz-user-focus: none; -moz-user-select:...
2020-10-15
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
简写属性是用于同时给多个属性赋值的属性。比如font是一个简写属性，可以用于设置多种字体属性。它指定了font-style、font-weight、font-size、font-height以及font-family。...
2020-10-15
CSS心形加载的动画源码的实现
废话不多说上代码，代码很简答，研究一下就明白了，有不明白的可以问我。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/cs...
2020-10-15
使用CSS3实现字体颜色渐变的实现
在使用Animation.css的时候发现它的官网字体会渐变，看了一下他的css很有趣 .site__title { color: #f35626; background-image: -webkit-linear-gradient(92deg, #f35...
2020-10-15
css动画效果之animation的常用样式
animation动画定义一个动画：/*设置一个关键帧，定义动画每一步执行的动作*/@keyframes mybox{ 0%{transform: translate(0,0);} 25%{transform: transla...
2020-10-15
使用css的filter写鼠标滑过效果的实现示例
使用css的filter写鼠标滑过效果<div class="filter-div"> <img class="filter-img" src="../assets/images/01list.png"/></div><style> .filter-div { width: 67p...
2020-10-15
详解css-vars-ponyfill 在ie环境下使用问题（nextjs 构建）
css-vars-ponyfill通过css变量来实现网页换肤的过程中，会出现兼容性问题。 为了解决ie，qq，百度浏览器等兼容性问题，引入css-vars-ponyfill，但是在ie浏览器下，css-vars-ponyfill 的...
2020-10-15
CSS中使用text-align、margin：0 auto居中的示例代码
CSS中使用text-align、margin：0 auto居中在使用text-align或者是margin：0 auto进行居中时，可能会出现无效的情况，下面用两个例子来讲解和解决问题示例1：让内联元素居中使用text-a...
2020-10-15
CSS line-height的如何继承的问题
Line-height的如何继承？ 写具体数值，如30px,则继承该值（比较好理解）写比例，如2/1.5,则继承该比例（比较好理解） 比如body中line-height设为2，则p标签继承line-height为2,则算出...
2020-10-15
浅谈CSS到底会不会阻塞页面渲染
可能大家都知道，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？接下来，我们就一起来分析一下。原理解析那么为什么会出现上面的现象呢？我们从浏览器的渲...
2020-10-15
CSS实现鼠标悬停改变其他标签样式的示例代码
前言：
据我了解目前CSS只能控制悬停时改变该标签下面的兄弟标签和子标签样式，如有大佬有好的方法请指教！
控制其他标签（根据控制标签与被控制标签之间的关系）可分为三种...
2020-10-15
解决line-height=height元素高度但是文字并没有垂直居中的问题
先说下为什么line-height等于元素高度文字却没有垂直居中，其实line-height等于元素高度的时候文本并不是真的居中了，而是看着居中了，当元素高度和font-size差距较大的时候，这种...
2020-10-15
深入浅析CSS 的多种背景及使用场景和技巧
本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料CSS background是最常用的CSS属性之一。然而，并不是所有开发人...
2020-10-15
详解中文字体在CSS样式中font-family对应的英文名称
宋体：SimSun
黑体：SimHei
微软雅黑：Microsoft YaHei
微软正黑体：Microsoft JhengHei
新宋体：NSimSun
新细明体：PMingLiU
细明体：MingLiU
标楷体：DFKai-SB
仿宋：FangSong
楷体：KaiTi
仿...
2020-10-15
纯CSS实现图片百叶窗展示效果示例
首先给大家看一下完成效果主要思路：其实这个百叶窗还是利用了一种障眼法，我们看上去是鼠标移动上去之后，图片展开了，其实这些图片在原地根本没有动，只不过是我们把这些图片放在了...
2020-10-15
css 命名：BEM, scoped css, css modules 与 css-in-js详解
css 作用域是全局的，项目越来越大，人越来越多，命名慢慢成为问题，以下是几种解决命名问题的方案一. BEM以 .block__element--modifier 形式命名，命名有含义，block 可视为模块，有一定...
2020-10-15
CSS八种让人眼前一亮的HOVER效果的示例代码
一.发送效果HTML<div id="send-btn"> <button> // 这里是一个svg的占位 Send </button></div>CSS#send-btn{ display: flex; align-items: center; justify-cont...
2020-10-15
css3实现动画的三种方式
这是一个考验面试者对css的基础知识。css 实现动画主要有3种方式第一种是： transition 实现渐变动画第二种是： transform 转变动画第三种是： animation 实现自定义动画下面具体...
2020-10-15
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
要使用标准的CSS3实现某元素的投影效果，有两个套路，第一个就是使用常见的box-shadow, 第二个就是使用CSS3的filter阴影滤镜drop-shadow，那这两个阴影实现有什么具体的差异呢？一...
2020-10-15
完美解决谷歌浏览器自动填充问题
在谷歌浏览器中，登陆成功后，谷歌浏览器会提示是否记住密码。如果选择记住密码，那么再次登录会出现诸如下边情况：如果产品需求是不希望浏览器自动填充账号密码，那么怎么去除呢？最先...
2020-10-15
看完不迷糊的 CSS 盒子模型介绍
网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物—&mdas...
2020-10-15
flex是什么及flex布局语法教程详解
Flex布局Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，自由的操作容器中元素(项目)的排列方式任何一个容器都可以指定为 Flex 布局。.box{...
2020-10-15
CSS+JS实现水滴涟漪动画按钮效果的示例代码
代码如下所示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...
2020-10-15
CSS 中的六个重要选择器(三秒就可以记住)
来自：https://blog.csdn.net/qq_44761243/article/details/108227213CSS 的选择器有哪些？？？1.通配符（*）也可称作全局选择器或者通用选择器，顾名思义，就是定义所有的元素的样式。常用...
2020-10-15
详解css3中dispaly的Grid布局与Flex布局
Gird布局与Flex布局有一定的相似性，都是对容器的内部项目进行划分。 Flex布局是轴线布局，只能指定项目针对轴线的位置，可以看作成一维布局 Grid布局则是将容器划分成行和...
2020-10-15
CSS中三角形的绘制与巧妙应用实例详解
引网页中常见的一些三角形，无需制作成图片或者字体图标，使用CSS就可以直接画出来。如小米官网中：以及京东网页中的：那么这些三角通过是CSS怎么实现的呢？三角的实现我们可以通过将...
2020-10-15
纯css实现轮播图banner自动轮换效果
话不多说 直接上代码* { margin: 0; padding: 0; } .container { margin:300px auto; height: 400px;...
2020-10-15
让我来教你使用css中的字体图标的方法
首先什么是字体图标呢，那就是表面上是图标，其实它是文字，我们可以就像设置文字一样去设置字体图标，一般可以使用两种方式去设置字体图标，一种是引入css文件，然后设置特殊的class就...
2020-10-15
CSS 首行缩进两个文字
总是在前面加上8个“ ”，因为过去大家对CSS的概念也不太熟悉，也不太重视，这种方法实现虽然比较直接，但是文字多的时候会有很多“ ”充斥在代码中，如果再...
2020-10-15
css 中的background:transparent到底是什么意思有什么作用
有时我在看css时,看到有的css属性定义为background:transparent。意思就是背景透明。实际上background默认的颜色就是透明的属性。所以写和不写都是一样的
有段时间没写文...
2020-10-15
CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)
-webkit-border-radius：苹果；谷歌，等一些浏览器认，因为他们都用的是webkit内核；
-moz-border-radius：moz这个属性 主要是专门支持Mozilla Firefox 火狐浏览器的CSS属性。
在这两...
2020-10-15
CSS自定义select下拉选择框的样式(不用其他标签模拟)
今天群里有人问到怎么自定义select下拉选择框的样式，于是群里就展开了激烈的讨论，刚开始一直就是考虑怎样使用纯CSS实现，把浏览器默认的样式覆盖掉，但最后均因兼容问题处理不...
2020-10-15
