CSS 中px、em、rem、%、vw、vh单位之间的区别详解
1 、pxpx就是pixel（像素）的缩写，相对长度单位，相对于屏幕分辨率。2、em参考物是父元素的font-size，具有继承的特点。浏览器默认字体是16px，整个页面内1em不是一个固定的值。字体大...
2020-10-16
CSS变量实现暗黑模式的示例代码
最近微信被苹果逼的开发了 暗黑模式 ，越来越多的网站和应用开始支持了暗黑模式，许多人也喜欢为网站选择暗模式，也许他们更喜欢这样的外观，或者他们想让自己的眼睛免受疲劳。 这...
2020-10-16
利用css样式实现表格中字体垂直居中的方法
利用css样式实现表格中字体垂直居中的方法，具体代码如下所示：有一个自定义表格如下所示，当所返回数据改变时，文字都能自动居中 //html //用两个div做容器 <el-col :sp...
2020-10-16
css用Flex布局制作简易柱状图的实现
以下是一个用Flex布局的柱状图：HTML：<div class="his_box"> <div>成绩分布直方图</div> <div class="histogram"> <div><div>10</div></div> <div><div>8...
2020-10-16
CSS3实现文字描边的2种方法(小结)
问题 最近遇到一个需求，需要实现文字的描边效果，如下图 解决方法一 首先想到去看CSS3有没有什么属性可以实现，后来被我找到了text-stroke 该属性...
2020-10-16
详解CSS中的flex布局
flex布局又称为弹性布局，任何一个容器都可以指定为flex布局声明弹性盒子的几种方式就像前面说的，所有容器都可以指定为flex布局.box{ display:flex;}行内元素也可以使用：dis...
2020-10-16
CSS overflow-wrap新属性值anywhere 用法大全
一、先了解下overflow-wrap属性CSS overflow-wrap 属性其实就是以前的 word-wrap 属性，MDN现在直接把 word-wrap 的文档页跳转到 overflow-wrap 属性的文档页了。由于 overfl...
2020-10-16
CSS3属性 line-clamp控制文本行数的使用
说明：限制在一个块元素显示的文本的行数。-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。为了实现该效果，它需要组合其他...
2020-10-16
css3通过scale()、rotate()实现放大、旋转
一、scale()方法缩放，指的是“缩小”和“放大”。在CSS3中，我们可以使用scale()方法来将元素根据中心原点进行缩放。跟translate()方法一样，缩放scale()方...
2020-10-16
关于CSS中定位的小结
CSS中定位有四种在不同的场景下有不同的作用下面我就大体的介绍一下这四种定位.static静态定位:应用的场景不多,这里不做介绍下面主要介绍一下其他三种常见的定位1.position...
2020-10-16
css区分ie8/ie9/ie10/ie11 chrome firefox的代码
网站兼容性调试实在令人烦心，现在的网站设计人员真的要比以前费力很多，因为网页代码不再是只需满足一个IE6访问就行，而是要满足N多的浏览器访问正常才行。粗略算一下，目前至少要...
2020-10-16
css hack之\9和\0就可能对hack IE11\IE9\IE8无效
每次设计一张网页或一个表单，都被各种浏览器的兼容问题伤透脑筋，尤其是IE家族。在做兼容性设计时，我们往往会使用各种浏览器能识别的独特语法进行hack，从而达到各种浏览器下显示...
2020-10-16
比较好看的css 自定义样式（标题 h1 h2 h3）
效果图博客园中常用的样式/*标题h1 h2 h3样式*/#content { color: black; font: 0.875em/1.5em"微软雅黑", "PTSans", "Arial", sans-serif; font-size: 16px;}#co...
2020-10-16
css之display属性之inline-block布局实现详解
CSS display 属性注释：如果规定了 !DOCTYPE，则 Internet Explorer 8 （以及更高版本）支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-c...
2020-10-16
CSS之定位布局(position，定位布局技巧)
1.什么是定位：css中的position属性，position有四个值：absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设置一些不规则的布局，使用TLBR(top,left,bo...
2020-10-16
css记录文本图标对齐的几种解决方案
开发中遇见图片跟文字放在一行显示是最常见不过的了，两个行内元素的对齐通常也是最令人头疼，有时候明明使用了最常用的对齐方法，却总还是有些许偏差，先来看一个最基本的示例：html...
2020-10-16
css 层叠与z-index的示例代码
层叠与层叠等级HTML 元素是一个三维的概念，除了水平和垂直方向外，还会在“z 轴”上层层叠加。
既然是叠加，就会涉及到先后顺序的问题，规范中称之为“层叠等级&rd...
2020-10-16
CSS 清除浮动与BFC的方法
BFCBFC：块级格式化上下文BFC的布局规则
内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。...
2020-10-16
ie中出现的jquery.form.js拒绝访问,input上传按钮必须主动点击的问题
下面先给大家看下代码<form id="uploadFileForm2" name="uploadFileForm2" enctype="multipart/form-data" method="post"> <div class="upload-wapper mt20"> <i...
2020-10-16
使用 CSS3 中@media 实现网页自适应的示例代码
如今，电脑显示器的屏幕分辨率向越来越大发展，而手机等移动设备终端的分辨率却不可能大到哪里去。越来越多的网站，开始让自己的页面自适合各种分辨率，在小分辨率下显示基本的内容...
2020-10-16
css高度塌陷问题的解决方案
1. 高度塌陷在文档流中，父元素的高度默认被子元素撑开，也就是说子元素多高，父元素就多高。但是， 当为子元素设置浮动后，子元素会完全脱离文档流。此时，将会导致子元素无法撑起父元...
2020-10-16
CSS实现隐藏滚动条并可以滚动内容效果(三种方式)
隐藏滚动条的同时还需要支持滚动，我们经常在前端开发中遇到这种情况，最容易想到的是加一个iscroll插件，但其实现在CSS也可以实现这个功能，我已经在很多地方使用了，下面一起看看这...
2020-10-16
CSS3 不定高宽垂直水平居中的几种方式
1、flex布局.father { display: flex; justify-content: center; align-items: center;}这种方式兼容性不好2、position + transform.son { position: absolute...
2020-10-16
css3 中translate和transition的使用方法
translate和transition一直让我觉得，很牛皮很强大，怎么也学不会，其实是自己比较抗拒去了解她，接口看了不到半个小时的文档，大概了解了下，下面是示例，可以下载下来自己运行下试试<!D...
2020-10-16
浅析CSS3 中的 transition，transform，translate之间区别和作用
transform 和 translatetransform指变换、变形，是css3的一个属性，和其他width，height属性一样translate 是transform的属性值，是指元素进行2D变换，2D变换就是指，元素以当前位置（0,0...
2020-10-16
解决CCS中的margin：top塌陷问题
HTML结构如下：CCS结构如下：页面效果图如下：现在我们可以看到在子元素中明明设置了向右50px和向下50px，可页面显示的效果却只有向右移动的没向下移动的。通常来说，margin是设置元...
2020-10-16
css3 flex实现div内容水平垂直居中的几种方法
一、flex-direction: （元素排列方向）※ flex-direction:row （横向从左到右排列==左对齐）※ flex-direction:row-reverse （与row 相反） ※ flex-direction:column （从上往下排列==顶...
2020-10-16
css3媒体查询中device-width和width的区别详解
1.device-width定义：定义输出设备的屏幕可见宽度。不管你的网页是在safari打开还是嵌在某个webview中，device-width都只跟你的设备有关，如果是同一个设备，那么他的值就不会变。...
2020-10-16
CSS样式不起作用(史上最全解决方法汇总)
在我们写页面时，有时会发现自己写的css样式无法生效，导致这种现象的原因有很多，下面列举一些常见的原因希望可以帮到你，欢迎评论区补充。浏览器缓存问题如果你反复检查认为代码...
2020-10-16
纯CSS实现“文本溢出截断省略”的几种方法
在我们的日常开发工作中，文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ，但在实现上却有不同的区分，是单行截断还是多行截断？多行的截断...
2020-10-16
svg+css 或者js制作打钩的动画效果
之前老板让做一个登陆后 可以显示一个打钩的效果 百度死活搜不到 今天在B站看到的一个视频居然有 根据需求改进了一下废话不多说先看效果！html代码<!DOCTYPE html><html lang...
2020-10-16
CSS样式的分类介绍(基础知识)
css样式的分类1.内部样式----内联样式使用的是style标签<style type="text/css">/* 样式 */</style>多学一招：把页面的公共样式（不多的情况下）写在style标签中2.行内样式直接写...
2020-10-16
使用css实现特殊标志或图形
1. 前言由于图片占的空间比较大，且图片越多，越不好管理，所以有些时候，我们可以使用一些简单的标签样式来实现简单的图形标志来替代图片。2. 实例展示：三角形示例示例代码：<style t...
2020-10-16
CSS盒子居中的常用的几种方法(小结)
第一种：用css的position属性<style type="text/css"> .div1 { width: 100px; height: 100px; border: 1px solid #000000;...
2020-10-16
详解CSS标签中的显示模式
标签的显示模式（重点）div和span标签​1.样式完全相同，标签不同，显示的结果完全不同​2.每个div会独占一行，多个span会并列一排1.块元素特点：宽度默认是100%，高度默认是0，...
2020-10-16
一文了解CSS 标签显示模式
标签的类型(显示模式) HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。一、块级元素(block-level) 每个块元素通常都会独自占据一整行或多整行，可以...
2020-10-16
CSS适配iPhone全面屏的方法
一、media query方式/*iPhone X 适配*/@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { .fixed-bottom{...
2020-10-16
css样式引入方式及优缺点介绍
三种css的引入方式1.行内样式优点：书写方便，权重高缺点：没有做到结构样式相分离<div style="width: 100px" height:100px></div>2.内部样式优点：结构样式相分离缺点：分离不彻底...
2020-10-16
css解决浮动导致父元素高度坍塌的几种方法
以前布局经常会用到float进行布局，但是我们都知道使用浮动布局会存在一个问题-导致父元素高度坍塌那我们一起来探究一下解决这个问题的方法！就先从文档流开始吧一.定位的分类...
2020-10-16
浅析CSS中的4种引入方式及优先级
第一：CSS的4种引入方式CSS的4种引入方式是：行内样式、内嵌样式、链接样式、导入样式1.行内样式最直接最简单的一种，直接对HTML标签使用style=""，例如：<p style="color:#F00; "></...
2020-10-16
详解关于浮动元素float使其父元素高度塌陷的原因及解决方法
浮动元素使其父元素高度塌陷我们经常会遇到一种情况，给一个元素设置浮动之后 float:left/right;，如果该元素的父元素有背景颜色，那么会发现父元素的背景颜色消失了；如果父元素有...
2020-10-16
CSS实现动态图片的九宫格布局的实例代码
前提条件： content="width=750"<meta name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi,viewport-fit=cover">效果图如下： 需求分析高宽：1...
2020-10-16
深入理解CSS中的vertical-align属性和基线问题
vertical-align属性主要用于改变行内元素的对齐方式，对于行内布局影响很大，如果不了解的话，我们开发调整样式的时候很容易出错。网上关于这个属性的原理说得很是复杂，看一眼就让...
2020-10-16
使用css属性屏蔽鼠标事件的方法(鼠标点击可穿透上层元素)
起源：前几天测试发来一个需求，内容要求看图：看到这个需求，我有点懵逼。现在的情况是只有点击日期内容框空白区域时，才会响应点击事件显示下拉日期菜单。而这个icon图标我是绝对定...
2020-10-16
CSS前端页面渲染优化属性will-change的具体使用
前言当触发scroll、resize这类的滚动事件时，被触发的频率非常高，间隔也特别近。如果事件中涉及到大量的位置计算、DOM操作、元素重绘等工作，并且这些工作无法在下一个scroll事...
2020-10-16
网站变灰色兼容代码 包括图片 支持所有浏览器
一般在全国哀悼日，大地震的日子，清明节，我们都会让自己的网站全站灰色，以表示对逝者的悼念。那么下面分享几种方法1、直接body中加入代码即可实现这种效果很简单，只需要一句css代...
2020-10-16
网站变黑白灰色的4种代码详细讲解
2008.5.12四川汶川大地震，带走了很多生命，令人惋惜，为了表示对遇难同胞的深切哀悼，国务院决定2008年5月19日至21日为全国哀悼日。在此期间，许多网站将风格改为“黑、白、灰&...
2020-10-16
修改CSS样式实现网页灰色(没有颜色只有浅色黑白)的几个方法整理
一般在清明节，全国哀悼日，大地震的日子，以及一些影响力很大的伟人逝世或纪念日的时候，身为站长的我们都会让自己的网站的全部网页变成灰色（黑白色），以表示我们对逝者的悼念。那么今...
2020-10-16
一段css让全站变灰的代码总结
为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世通报的深切哀悼，国务院今天发布公告，决定2020年4月4日（明天）举行全国性哀悼活动。在此期间，全国和驻外使馆下半旗致哀，全...
2020-10-16
CSS3 中filter（滤镜）属性使用详解
最近在修改内网门户的时候，恰好遇到了需要使用滤镜的地方；刚开始用的是两张图片；鼠标滑过背景变成渐变；图标切换；但是后台配置了图标后；导致鼠标滑过图标不能正常切换；于是就想到了...
2020-10-16
