为何要使用css预处理器？
背景CSS 自诞生以来，基本语法和核心机制一直没有本质上的变化，它的发展几乎全是表现力层面上的提升。最开始 CSS 在网页中的作用只是辅助性的装饰，轻便易学是最大的需求；然而如...
2020-09-29
CSS盒模型详解（含操作题）
盒子模型，英文即box model。无论是div、span、还是a都是盒子。但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己...
2020-09-29
CSS3如何创建简单动画？(案例介绍)
CSS3如何创建简单动画？下面本篇文章通过案例来介绍使用CSS3创建简单动画的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。1.简易加载中 @keyframes my...
2020-09-29
使用SASS怎么创建可重用CSS
Sass 是一个CSS预处理程序，至今使用广泛，它之所以流行，是因为它修复了几个CSS缺陷：Sass 也是 Bootstrap 4 运行的基础。这意味着为了理解如何操作引导代码而学习Sass是非常有帮...
2020-09-29
CSS学习之浅谈尺寸样式属性（height和width属性）
尺寸样式属性介绍# 属性 值 含义 height auto：自动，浏览器会自动计算高度length：使用px定义高度%：基于包含它的块级对象的百分比高度 设置元素高度 ...
2020-09-29
css设置毛玻璃效果方法介绍
比如我们需要将下图中页面中间的文字区域变成毛玻璃效果，首先想到的是给其设置一个透明度，并添加模糊滤镜：.content { background-color: rgba(0,0,0,0.3); -webkit-filt...
2020-09-29
CSS中的Media媒体查询深入理解
媒介类型在CSS2中，媒体查询只使用于<style>和<link>标签中，以media属性存在media属性用于为不同的媒介类型规定不同的样式screen 计算机屏幕（默认值）tty 电传打字机以及使用等宽...
2020-09-29
深入学习border-sizing属性
box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。它有content-box、border-box和inherit三种取值。inherit指的是从父元素继承box-sizing表现形式，不再冗赘...
2020-09-29
CSS学习之了解”标准文档流”
标准文档流介绍 我们在制作HTML网页的时候，都必须遵循一个流的规则如：从左至右、从上至下规则。 让我们进入HTML网页的标准文档流基本原理实践。 代码块<!DOCTYPE html><ht...
2020-09-29
使用CSS制作导航菜单的方法
下面我们来通过几个实例来介绍一些使用css制作导航菜单的方法，希望大家可以更加直观的了解如何使用css制作导航菜单。方式一：直接编写代码实现代码如下：<html> <head> <t...
2020-09-29
css中关于尖角处理的细节
在各种网站里面，我们会经常看到类似于这样的尖角：它实现的方式有多种，哪种才是最简单的？哪种才是最优秀的？首先我声明一下，我还不清楚这个东西具体叫什么名字（哪位知道还望告知），暂且...
2020-09-29
网页中如何设置默认图片？方式介绍
现在网页中图片随处可见，但避免不了有时会出现图片资源失败的情况，在谷歌浏览器中就会显示这样<img src="logo.jpg" alt="logo">这里的alt属性是为了当图片加载失败时告诉用户...
2020-09-29
CSS中z-index属性的使用方法和示例介绍
z-index属性介绍 只有设置了定位我们才会使用到该z-index属性，如：固定定位、相对定位、绝对定位。 定位元素默认的z-index属性值是0。 如果2个定位的元素都没有设置z-index...
2020-09-29
浅谈CSS3中新增的结构伪类和伪元素
结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果。 结构伪类选择器属性说明表 属性 描述 E:first-child 匹配E元素的第一个子元素。 ...
2020-09-29
css设置文本两端对齐的方法
text-align直接设为justify就行了，text-justify的情况就复杂了，可能有人对它还不熟悉。IE的取值如下： auto :允许浏览器用户代理确定使用的两端对齐法则 inter-word :通过增...
2020-09-29
CSS如何设置文本和元素阴影效果？（代码示例）
文本阴影介绍 在CSS中使用text-shadow属性设置文本阴影，该属性一共有4个属性值如：水平阴影、垂直阴影、（清晰度或模糊距离）、阴影颜色。 text-shadow属性值说明，在文本阴影实践中...
2020-09-29
纯css如何实现按钮的水滴动画效果？
前言大家平时应该经常见到这种特效，很炫酷不是吗这是谷歌Material Design中最常见的特效了，市面上也有很多现成的js库，用来模拟这一特效。但是往往要引入一大堆js和css，其实在已...
2020-09-29
CSS怎么用来管理js事件？
CSS是一门很神奇的语言，很多和它不相干的功能却能起到很显著的效果，有些在js看起来实现都有一定的工作量，CSS一句属性就能轻而易举的解决，下面来看几个例子（主要和js事件相关）。原...
2020-09-29
CSS如何实现粒子按钮动画效果?
在码代码的时候会发现，很多东西都是殊途同归的，方法千千万，能解决问题的都是好办法，不一定非要把代码写的特别高深，这样反而后来的人看不懂，维护根据头疼。所以用最简单通俗的代码...
2020-09-29
一些容易被忽略CSS特性
大小写不敏感虽然我们平时在写CSS的时候都是用小写，但其实CSS并不是大小写敏感的.test{ background-COLOR:#a00; width:100px; height: 100px;}虽然把background-co...
2020-09-29
常用CSS书写技巧介绍
我们需要针对不同的浏览器去写不同的CSS，让它能够兼容不同的浏览器，在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,...
2020-09-29
怎么使用纯css来实现一个加号效果？（附代码）
实现下图的加号效果：若想实现这个效果， 只需一个div元素即可搞定。需要用到css的为了before和after， 以及border特性。先设置一个div便签<div class="add"></div>再设置一个边...
2020-09-29
CSS实例之如何实现滚动图片栏效果？（代码示例）
网站上可以经常看到有一些图片进行持续不断的滚动，这个效果可以通过css的动画效果来实现。主要原理是通过动画向左移动。首先给出两组一样的图片（同一行上），让整体图片向左移动...
2020-09-29
纯CSS是怎么实现图片左右翻转的？
CSS 翻转图片主要用到的技术除了3D翻转和定位 ，还用到了一个属性 backface-visibility：visable|hidden;该属性主要是用来设定元素背面是否可见。效果图如下：具体的步骤如下：1、...
2020-09-29
CSS Hack详解
CSS Hack主要分为属性标记法和选择器前缀法两种：属性标记法【IE6-】对于IE6-浏览器主要使用下划线_和中划线-这两种字符_color:blue;
-color:blue;【IE7-】对于IE7-浏览器可...
2020-09-29
借助CSS Grid Generator快速上手Grid布局
CSS Grid Generator
CSS Grid Generator是一个由Sarah Drasner创建的免费工具。它是一个可视化设计工具，允许咱们创建一个基本的 grid 布局，然后就可以使用生成对应的代码，帮助...
2020-09-29
css模块命名规范（推荐）
css命名规范： 头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体佈局宽度：wrapper 左右中：left right center 登录条：loginb...
2020-09-29
CSS代码规范(推荐)
一、语法1.1 注意（1）用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。（2）为选择器分组时，将单独的选择器单独放在一行。（3）为了代码的易读性，在每个声...
2020-09-29
less常用语法介绍
变量@变量插值@mySelector: banner;.@{mySelector} { font-weight: bold;}延迟加载变量是延迟加载的，在使用前不一定要先申明.brass { @var: 2; three: @var; //...
2020-09-29
纯css如何实现自适应标题浮动效果？（代码示例）
源码展示：<!doctype html><html><head><meta charset="utf-8"><title>纯css实现自适应标题浮动效果</title> <style> body { background-color:#FAFAF...
2020-09-29
浅谈css的布局模型和常见代码缩写与长度单位
知识点一：css布局模型：布局模型是建立在盒模型基础之上，在网页中，元素有三种布局模型：1.流动模型（Flow）2.浮动模型 (Float)3.层模型（Layer）。一、流动模型：默认的网页布局模式。也就是...
2020-09-29
CSS怎么引入页面？三种引入方式与其优先级介绍
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如p{font-size:12px;color:red;font-weight:bold;}文字大小、...
2020-09-29
浅谈css精灵图(图片合成技术)
css精灵图(雪碧图、图片合成技术)1、什么是css精灵图（sprite）？css精灵图（sprite）直译为“CSS精灵”，也被称为通常被解释为“CSS图像拼合”、“CSS贴图定...
2020-09-29
CSS如何绘制放大缩小关闭按钮效果？(附代码)
如图所示：使用CSS 绘制上述三个按钮：<template> <div> <button>缩小</button> <button>放大</button> <button>关闭</button> </div></template><script>export de...
2020-09-29
css如何实现流程导航效果？三种方法介绍
css实现流程导航效果，具体内容如下所示：::tip 使用纯css实现线上 流程导航效果。 本文统一采取 flex 布局 ,你也可以采用其他布局实现，核心原理不变 :::方法一：利用裁剪（该方法IE...
2020-09-29
svg+css3如何实现动态波浪球效果？（代码实例）
一根矢量的波浪<svg viewBox="0 0 560 20" class="wave-animation__water-wave wave-animation__water-wave--front">
<use xlink:href="#wave"></use>
</svg>
<svg id="wav...
2020-09-29
css如何实现信纸/同学录效果？（附代码）
实现思路：网格背景，由css3的线性渐变来实现。纸上的打孔，由圆和圆柱组成，多个打孔，可以由box-shadow的平铺来实现。实际代码：<!DOCTYPE html><html><head> <meta charset="UTF-8"...
2020-09-29
css3如何给背景图片加颜色遮罩？
在开发中，有时遇到需要给背景层加颜色遮罩的项目，现在特定总结一下给背景图层加颜色遮罩的方法。方法一：通过定位叠加(注意层级)<p class="wrap1"> <p class="inner"> </p>...
2020-09-29
CSS如何实现半透明边框与多重边框效果？
场景一：实现半透明边框：由于CSS样式的默认行为，背景色的渲染范围是 content+padding+border。半透明边框被主调色影响, 实现的效果为解决方案：使用background-clip 属性规定背景...
2020-09-29
css布局之实现垂直居中的方法介绍
css实现垂直居中的方法如下：1、利用line-height实现居中，这种方法适合纯文字类的；<!-- css --><style>.parents { height: 400px; line-height: 400px; width: 400px; bord...
2020-09-29
CSS3如何实现图片抽屉式效果？（附代码）
首先，我们来看一下效果：这个效果实现原理很简单：只要你掌握css3动画和过渡相关知识就行，不用js代码；HTML代码：<div> <ul id="list"> <li > <a h...
2020-09-29
负margin会产生什么影响？在web布局中的应用
今天整理些margin：负数会对哪些元素或者定位产生影响、margin为负值在web布局中的应用做下总结。（不能说最全，我已经尽力收集整理）一、margin为负值产生的影响对于自身的影响当...
2020-09-29
浅谈margin负值的用法
1、为负margin“平反”我们在CSS中都会使用margin，但将margin设置成负数，那可能就不大好处理了。在网页设计中，人们对负margin用法的态度大相径庭，有的人非常喜欢，而有...
2020-09-29
浅谈CSS样式中的*、_符号、!important
CSS样式中的!important、*、_符号!important、*、_其实没什么用，皆是用来设置样式的优先级，但是样式的优先级你可以自行排好其先后位置来设置，然而你还是要看懂的。我们知道，CSS...
2020-09-29
css如何实现文本两端对齐？两种方法介绍
css之文本两端对齐的两种解决方法说起文本对齐，大家都知道text-align，最常用的有left、right、center，今天我们说一下justify，也就是文本两端 对齐。说起来简单，但是有些小坑大家...
2020-09-29
为什么要清除浮动呢？清除浮动的几种方法介绍
标准流：盒子会各占整行位置。子盒子若是标准流，父盒子虽然没有高度，但是会撑开父盒子高度。浮动：盒子浮了起来，不会占据原来的位置，若父盒子没有定义高度，则不会撑开父盒子，父盒 子...
2020-09-29
