CSS 实现 图片鼠标悬停折叠效果
CSS 实现 图片鼠标悬停折叠效果1. 实现要点 折叠是由多个块级元素来完成的; 图片是以背景图片的方式呈现出来的; 给每个块级元素设置同一张背景图片，通过backgroun...
2020-11-26
纯CSS实现markdown自动编号的示例代码
问题的由来第一次关注这个标题编号的问题应该回溯到本科毕业论文的时候了，当时还单独涉猎过这个主题，Word 有个很好的特性级联标题，一次设置好之后，后续只要设置标题样式就能按...
2020-11-26
css 实现圆形渐变进度条效果的示例代码
实现思路 最外面是一个大圆（渐变色） 内部里面绘制两个半圆，将渐变的圆遮住(为了看起来明显，左右两侧颜色不一样,设置为灰蓝) 顺时针旋转右侧蓝色的半圆，下面渐变的圆会...
2020-11-26
css3+贝塞尔曲线实现可伸缩input搜索框效果
话不多说，上效果图。核心代码就是 transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) all 1s; 通过 transition 属性的 cubic-bezier（贝塞尔曲线） 在过渡效果上加了个缓冲效...
2020-11-26
CSS使用BEM命名规范实践
当你看到一个class的时候，你想得到什么信息？ 这个class用在什么地方，作用是什么？ 是否在其他地方也有使用该class，修改会不会引起其他地方的样式问题？ class 是否在js中...
2020-11-26
解决搜索框和搜索按钮button边框不能重合的问题
今天在用百度页面做练习的时候突然发现，尽管设置了搜索框和button的margin值和padding值各为0，他们俩的边框还是不能重合（不想用position）无奈之下问了老师，老师说设置他俩的父元...
2020-11-26
css一些不常见但很有用的属性操作大全
1、自定义文本选择::selection { background: red; color: black;}2、去掉video的controls中的下载按钮video::-internal-media-controls-download-button { display:n...
2020-11-26
CSS中width和height的默认值auto与%案例详解
结论 width的%：定义基于包含块（父元素）宽度的百分比宽度，会突破父级的限制 width的auto：尽量被父级包裹 height的%：基于包含它的块级对象的百分比高度，会突破父级的限制...
2020-11-26
css实现鼠标放上去时图片过渡转换动画效果
代码<div class="test"> <div></div> <div></div> </div> .test{ width: 200px; height: 200px; margin-top: 200px; margin-left: 300px; overflow: hidden...
2020-11-26
详解CSS标签模式display属性
代码如下所示：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <...
2020-11-26
css为什么要放在head标签中
思考: css为什么要放在head标签中, 而不能像javascript一样置于body标签尾部?Talk is cheap, show me the code.OK, 那我们通过写一些代码来得出结果在这里先说chrome控制台...
2020-11-26
CSS实现两个元素相融效果(粘滞效果)
记得前几年手机版淘宝左下角有个狠有意思的圆形按钮，点击后会出现几个小按钮，并且出场动画很有意思，后面才知道这种效果叫“粘滞”效果，如图：
那这种效果到底用了什么...
2020-11-26
纯 CSS 实现点击展开阅读全文功能
记要开发文章展示列表界面时, 想通过展示部分文章头内容达到基本信息概览的需求即可, 并展示 【点击展开阅读全文】 的按钮以获取详情内容。参考了文章 caibaojian.com/css-...
2020-11-26
详解CSS边距重叠与解决方案探究
最近复习了一下CSS相关的知识点，对于CSS中经典的边距重叠问题进行了梳理总结，目的是检验复习效果，也希望对他人有所帮助，疏漏之处还请各位前端老鸟们不吝赐教。提出问题：在使用CS...
2020-11-26
CSS3实现左上角或右上角显示提醒圆点的示例代码
效果图（如果想要三角形请点击这里）： 代码： <html><head> <style type="text/css"> .message_s { position: relative; cursor: pointer;...
2020-11-26
使用CSS伪元素控制连续几个元素的样式方法
用CSS伪元素控制元素的时候经常性的需要改变一些元素的样式，网上有许多博客都说了如何去控制一个的改变，但是我在实际写的过程中，发现更多时候是需要控制多个连续元素的改变。...
2020-11-26
编程式处理Css样式的示例代码
编程式方法的好处 1.全局控制，避免样式散乱2.代码简洁，开发快速 函数式编程大量使用函数，减少了代码的重复，因此程序比较短，开发速度较快3.接近自然语言，易于理解 函数式编程的自...
2020-11-26
css实现文字在背景图片之上
效果：<div class="imgs"> <!-- 背景图 --> <div class="background"> <img :src="item.voteTime ? imgSrc1:imgSrc2" width="100%" height="100%" alt="" /> </div> <...
2020-11-26
Chrome的最小字体12px限制最终解决办法
相信不少做网站的用户会有这样一个问题，Chrome 默认最小字体是12px（最新版英文也有此问题），这个是 Chrome 为了更好显示中文设计的，但是这样一来就会出现某些上标、下标字体过大，...
2020-11-26
CSS将img图片填满父容器div并自适应容器大小
当一个页面中引入多张图片时候，会碰到图片尺寸不一致，单要求显示成一致的大小，我们直接设置图片尺寸会导致图片变形，这就是我们遇到的问题，看下解决方法<div> <img src="...
2020-11-26
button内flex垂直居中竟然不居中的解决
问题描述按钮样式为图标+文字，在使用flex布局写垂直居中时，iphone7手机上文字和图标却没有居中，居左显示。代码如下（已精简）：<button> <img src="./refresh.png" alt /> {{ conf...
2020-11-26
详解常用css样式(布局)
兼容css3新属性在css3中，我们可以使用prefixfree.min.js这个插件来自动为css3的相关属性加上兼容浏览器属性，使我们不用为每个css3新属性再加上属性（需要用到大量css3的项目时...
2020-11-26
如何使用css实现数据热点效果
效果如下：分析1.这里看到的大概有三个圈 围着点在做放大动画所以我们写四个盒子 点+3个圈<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name=...
2020-11-26
CSS实现鼠标滑过卡片上浮效果的示例
原理hover 的时候对元素设置阴影：box-shadow，使其样式与常态不同。box-shadow 表达式参见 MDN：/* x偏移量 | y偏移量 | 阴影颜色 */box-shadow: 60px -16px teal;/* x偏移量 |...
2020-11-26
CSS常用的封装方法汇总
1. pc-reset PC样式初始化/* normalize.css */html { line-height: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */}b...
2020-11-26
css实现隐藏滚动条并可以滚动内容的实例代码
前言当页面的html结构嵌套的盒子很多的时候，可能会导致一个页面中含有多个垂直滚动条。
这样的话很影响页面的样式，所以我们需要隐藏滚动条的同时还支持滚动，下面就是利用css实...
2020-11-26
CSS伪类:empty让我眼前一亮(实例代码)
最近看过我文章的都知道：我最近在负责一个微信小程序的项目，在其中遇到了很多有趣的事和一些“奇思妙想”。本文的背景就是某天早上我看着wxml文件中一堆wx:if/else...
2020-11-26
css利用负margin实现平均布局的示例
对于平均分布的布局，我们一般使用负margin的方法。如下图，就是平均布局。一般这种情况，我们都是在父元素和子元素之间加上一层div，然后，给这个div设置负margin-right，值为两个子元...
2020-11-26
纯css3实现横向无限滚动的示例代码
本文示例都是用小程序写的，但是不影响要实现的功能。wxml装图片的盒子多复制一份，让循环图片的首尾相接<view class="scrollbox dis-flex"> <view class="imgItem dis-flex...
2020-11-26
css之Display、Visibility、Opacity、rgba和z-index: -1的区别
我们在网页中经常需要控制一些元素的隐藏、透明等属性<style> .d1{ display: none; } .d2{ visibility: visible; } .d3{ opacity: 0; }...
2020-11-26
CSS线性渐变的凹面矩形过渡动效的实现
本文聊一聊线性渐变的凹面矩形过渡动效的难点和思路，主要介绍凹面矩形实现、给凹面矩形加线性渐变、线性渐变背景色的过渡。如果有更好的实现方案，欢迎在评论区和我讨论。上图...
2020-11-26
CSS实现表格首行首列固定和自适应窗口的实例代码
今天校招笔试题要求实现一个首行首列固定，宽度自适应窗口变化，但窗口缩小到一定宽度不能再缩小，出现水平滚动条…
当时我写错了，我一时想不起改用什么办法首行首列固定，用...
2020-11-26
纯 CSS 实现蜡烛融化(水滴)的示例代码
实现效果实现思路融化效果是利用 filfilter 的 contrast 和 blur 实现的。
在父元素中设置 contrast 并在子元素中设置 blur 即可实现两者相融的效果。代码<!DOCTYPE html><...
2020-11-26
使用CSS实现盒子水平垂直居中的方法(8种)
原始代码：center.html：<!DOCTYPE html><html lang="Zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...
2020-11-26
CSS清楚浮动clear:both的实例代码
今天给大家讲一下清楚浮动，在讲清除浮动前，需要了解什么是浮动，这里我就不给你大家详细介绍浮动了。
浮动也就是脱离文档流，脱离文档流了，那父级的宽高就不能被子集撑开，所以我们...
2020-11-26
浅谈缩减SCSS 50%样式代码的14条实战经验
前言Sass是CSS3语言的扩展，它能帮你更省事地写出更好的样式表，使你摆脱重复劳动，使工作更有创造性。因为你能更快地拥抱变化，你也将敢于在设计上创新。你写出的样式表能够自如地...
2020-11-26
css属性width默认值width: auto与width: 100%区别详解
width: auto 子元素（包括content+padding+border+margin）撑满整个父元素的content区域。 子元素有margin、border、padding时，会减去子元素content区域相对应的width值...
2020-11-26
详解在table设置max-width以及min-width兼容问题和解决方案
在table中设置min-width和max-width属性<table> <tr><td>1</td><td>2</td></tr></table>table{min-width:60%;min-width:100%;}但是chrome不兼容max-width，ie7两者都不兼容。...
2020-11-26
Blazor中的CSS隔离问题
1.环境VS 2019 16.9.0 Preview 1.0.NET SDK 5.0.1002.前言CSS一旦生效，就会应用于全局，所以很容易出现冲突。为了解决这个问题CSS隔离就顺势而生。Blazor诞生于2018年，至今为止...
2020-11-26
overflow:auto的用法详解
在开始正文前，我介绍一下overflow和flex布局的某些用法。
overflow：auto；如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。
flex中的属性
display: flex;
flex-direc...
2020-11-26
Typora代码块配色和标题自带序号的实现代码
效果：标题自带序号，代码块配色，代码块左上角仿mac图标先打开主题文件夹文件>偏好设置>外观>打开主题文件夹然后编辑base.user.css（如果没有就新建一个）文件将以下代码加入即可/*...
2020-11-26
CSS实现宽度自适应宽高16:9的矩形的示例
前面我们讲了怎么做一个自适应宽高1:1的正方形
https://www.freexyz.cn/css/753385.html
现在我们来讲讲做自适应16:9的矩形要怎么做
第一步先计算高度，假设宽100%，...
2020-11-26
css怎么实现图片半透明效果
属性介绍：opacity 属性设置元素的不透明级别。语法：opacity: value|inherit;属性值： value 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。 inherit 应该从父元素继承 opa...
2020-11-26
css中的块级元素和行内元素（内联元素）有哪些
行内元素（内联元素）* a - 锚点* abbr - 缩写* acronym - 首字* b - 粗体(不推荐)* bdo - bidi override* big - 大字体* br - 换行* cite - 引用* code - 计算机代码(在引用源...
2020-11-26
css怎么设置滚动条宽度
方法思路如下：在CSS中使用::-webkit-scrollbar伪类选择器来设置滚动条样式，并在此伪类选择器中通过width属性设置滚动条的宽度。::-webkit-scrollbar CSS伪类选择器影响了一个...
2020-11-26
css怎么更改超链接颜色
css设置超链接的方法： a:link ：是未被访问的样式，可以在里面加很多东西，比如说去掉下划线，换颜色等功能都能在这里实现； a:visited ：是已被点击后的样式，也可以在里面加很多元素，可...
2020-11-26
css怎样让两个div重叠
重要属性介绍：position 属性规定元素的定位类型。属性值： absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "rig...
2020-11-25
css是层叠什么表，可以使网页表现和内容分离？
css是层叠样式表，可以使网页表现和内容分离。在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML...
2020-11-25
css中的空元素有哪些
首先，css规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的diaplay值，如div的display默认值为“block”，则为“块级”元素；span默认display...
2020-11-25
css强制文字不换行代码是什么
css强制文字不换行实现代码强制不换行，直接使用white-space:nowrap即可。CSS设置不转行:overflow:hidden隐藏white-space：normal默认pre换行和其他1653空白字符都将受到保护no...
2020-11-25
