CSS - 教程之家

280浏览

0评论

css实现网页右下角点赞小卡片效果（实例代码）

效果实现HTML先准备一个干净的 html 页面，写好节点：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid...

2020-10-15

168浏览

0评论

CSS 选择所有子元素添加样式的方法

方法：以实际项目中less为例：.lk-toolbar { .el-input { width: 169px; margin-right: 10px; } > * { margin-bottom: 20px; }}上面代码成功...

2020-10-15

730浏览

0评论

CSS子元素跟父元素的高度一致的实现方法

绝对定位方法：（1）将父元素设置为相对定位，不写父元素的高度时，会随着左边的子元素高度变化而变化.parent { /*关键代码*/ position: relative; /*其他样式*/ width: 800px; colo...

2020-10-15

161浏览

0评论

css子元素相对父元素进行定位的实现

解决方案在父元素中加入position:relative;
子元素中加入position:absolute; right:20px;代码html结构<div id="div1"> <div id="div2"></div></div>css#div1{ width:500px;...

2020-10-15

276浏览

0评论

纯CSS让子元素突破父元素的宽度限制

在写样式中，我们可以经常看到这样的情况代码如下<div style="width: 300px;border: 4px solid #000;margin: 20px;padding: 2px;"> 父元素 <div style="border: 1px so...

2020-10-15

159浏览

0评论

CSS实现子元素div水平垂直居中的示例

div基本布局<div class="main"> <div class="center"></div> </div>css样式1. 配合定位与margin：auto父元素加相对定位，子元素加绝对定位 .main{ width: 300px; heig...

2020-10-15

488浏览

0评论

详解CSS 子元素相对于父元素固定定位解决方案

基本概念绝对定位(absolute)：设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的...

2020-10-15

272浏览

0评论

CSS 使用规则总结

一.缩写规则
关于边距 margin（4边）：
1px 2px 3px 4px (上、右、下、左)
1px 2px 3px （省略的左等于右）
1px 2px (省略的上等于下)
1px （四边都相同）
简化所有：
*/ body{margi...

2020-10-15

216浏览

0评论

css内联样式可以改么？

css内联样式可以改。下面本篇文章给大家介绍一下修改内联样式的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。以前写html有个不好的习惯，就是把样式...

2020-10-14

143浏览

0评论

xml文件用什么指令来使用css？

把内容与表示分离是 XML 的一个主要目标，XML 完美地实现了这一目标。一个文档并不限于只使用一个样式表，可以针对不同读者和环境提供多个样式表。本文将说明如何在 XML 文档...

2020-10-14

1475浏览

0评论

css如何让padding不占宽度？

在css中可以使用box-sizing属性，通过给元素设置“box-sizing:border-box;”样式来让padding不占宽度。以前，如果指定 div 的宽度为div { width: 100px;...

2020-10-14

199浏览

0评论

分享3种网页中引用阿里iconfont字体图标方式

本篇文章给大家分享在网页中引用阿里iconfont字体图标的三种方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。首先，你需要在阿里巴巴图标矢量库中创建账...

2020-10-14

269浏览

0评论

16 个CSS开发中需要了解的DevTools技巧

大多数开发者基本都使用浏览器的开发者工具调试前端，但即使用了好几年 Chrome 的开发者工具，我仍然会遇到从未见过的技巧和功能。在本文中，我写了许多在开发者工具中与 CSS 相...

2020-10-14

150浏览

0评论

css实现文字描边以及倒影效果

描边：主流浏览器都支持-webkit-text-stroke:<length> <color>;-webkit-text-stroke:4px pink;/*描边宽度4px，字体颜色粉红*/倒影：谷歌、safari、opera支持，火狐不支持-webkit-b...

2020-10-14

202浏览

0评论

深入浅析CSS 布局和 BFC

CSS布局中有一些概念，一旦你理解了它们，就能真正提高你的 CSS 布局能力。本文是关于块格式化上下文(BFC)的。你可能从未听说过这个术语，但是如果你曾经用CSS做过布局，你可能知道...

2020-10-12

208浏览

0评论

css实现禁止页面文字被选中功能

通过css实现页面文字不能被选中.cannotselect { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;...

2020-09-30

134浏览

0评论

你需要知道的关于CSS margin的一些知识

CSS1中描述了 margin-top、margin-right、margin-bottom和margin-left属性，以及一次设置所有四个属性的简写 margin。margin看起来是一个相当简单的事情，但是，在本文中，咱们将看...

2020-09-29

112浏览

0评论

为何要使用css预处理器？

背景CSS 自诞生以来，基本语法和核心机制一直没有本质上的变化，它的发展几乎全是表现力层面上的提升。最开始 CSS 在网页中的作用只是辅助性的装饰，轻便易学是最大的需求；然而如...

2020-09-29

372浏览

0评论

CSS盒模型详解（含操作题）

盒子模型，英文即box model。无论是div、span、还是a都是盒子。但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己...

2020-09-29

245浏览

0评论

CSS3如何创建简单动画？(案例介绍)

CSS3如何创建简单动画？下面本篇文章通过案例来介绍使用CSS3创建简单动画的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。1.简易加载中 @keyframes my...

2020-09-29

206浏览

0评论

使用SASS怎么创建可重用CSS

Sass 是一个CSS预处理程序，至今使用广泛，它之所以流行，是因为它修复了几个CSS缺陷：Sass 也是 Bootstrap 4 运行的基础。这意味着为了理解如何操作引导代码而学习Sass是非常有帮...

2020-09-29

154浏览

0评论

CSS学习之浅谈尺寸样式属性（height和width属性）

尺寸样式属性介绍# 属性值含义 height auto：自动，浏览器会自动计算高度length：使用px定义高度%：基于包含它的块级对象的百分比高度设置元素高度 ...

2020-09-29

143浏览

0评论

css设置毛玻璃效果方法介绍

比如我们需要将下图中页面中间的文字区域变成毛玻璃效果，首先想到的是给其设置一个透明度，并添加模糊滤镜：.content { background-color: rgba(0,0,0,0.3); -webkit-filt...

2020-09-29

203浏览

0评论

CSS中的Media媒体查询深入理解

媒介类型在CSS2中，媒体查询只使用于<style>和<link>标签中，以media属性存在media属性用于为不同的媒介类型规定不同的样式screen 计算机屏幕（默认值）tty 电传打字机以及使用等宽...

2020-09-29

216浏览

0评论

深入学习border-sizing属性

box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。它有content-box、border-box和inherit三种取值。inherit指的是从父元素继承box-sizing表现形式，不再冗赘...

2020-09-29

165浏览

0评论

CSS学习之了解”标准文档流”

标准文档流介绍我们在制作HTML网页的时候，都必须遵循一个流的规则如：从左至右、从上至下规则。让我们进入HTML网页的标准文档流基本原理实践。代码块<!DOCTYPE html><ht...

2020-09-29

281浏览

0评论

使用CSS制作导航菜单的方法

下面我们来通过几个实例来介绍一些使用css制作导航菜单的方法，希望大家可以更加直观的了解如何使用css制作导航菜单。方式一：直接编写代码实现代码如下：<html> <head> <t...

2020-09-29

254浏览

0评论

CSS的优先级机制

样式的优先级多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。一般情况下，优先级如下：（外部样式）External style sheet <（...

2020-09-29

226浏览

0评论

css背景效果详解

本文将详细介绍CSS背景效果：条纹背景【双条纹背景】 background:linear-gradient(#fb3 50%, #58a 50%); background-size: 100% 30px;CSS标准规定：如果某个色标的位置值比整...

2020-09-29

238浏览

0评论

css中关于尖角处理的细节

在各种网站里面，我们会经常看到类似于这样的尖角：它实现的方式有多种，哪种才是最简单的？哪种才是最优秀的？首先我声明一下，我还不清楚这个东西具体叫什么名字（哪位知道还望告知），暂且...

2020-09-29

422浏览

0评论

网页中如何设置默认图片？方式介绍

现在网页中图片随处可见，但避免不了有时会出现图片资源失败的情况，在谷歌浏览器中就会显示这样<img src="logo.jpg" alt="logo">这里的alt属性是为了当图片加载失败时告诉用户...

2020-09-29

104浏览

0评论

CSS中z-index属性的使用方法和示例介绍

z-index属性介绍只有设置了定位我们才会使用到该z-index属性，如：固定定位、相对定位、绝对定位。定位元素默认的z-index属性值是0。如果2个定位的元素都没有设置z-index...

2020-09-29

106浏览

0评论

浅谈CSS3中新增的结构伪类和伪元素

结构伪类选择器介绍结构伪类选择器是用来处理一些特殊的效果。结构伪类选择器属性说明表属性描述 E:first-child 匹配E元素的第一个子元素。 ...

2020-09-29

179浏览

0评论

css设置文本两端对齐的方法

text-align直接设为justify就行了，text-justify的情况就复杂了，可能有人对它还不熟悉。IE的取值如下： auto :允许浏览器用户代理确定使用的两端对齐法则 inter-word :通过增...

2020-09-29

98浏览

0评论

CSS如何设置文本和元素阴影效果？（代码示例）

文本阴影介绍在CSS中使用text-shadow属性设置文本阴影，该属性一共有4个属性值如：水平阴影、垂直阴影、（清晰度或模糊距离）、阴影颜色。 text-shadow属性值说明，在文本阴影实践中...

2020-09-29

136浏览

0评论

纯css如何实现按钮的水滴动画效果？

前言大家平时应该经常见到这种特效，很炫酷不是吗这是谷歌Material Design中最常见的特效了，市面上也有很多现成的js库，用来模拟这一特效。但是往往要引入一大堆js和css，其实在已...

2020-09-29

166浏览

0评论

CSS怎么用来管理js事件？

CSS是一门很神奇的语言，很多和它不相干的功能却能起到很显著的效果，有些在js看起来实现都有一定的工作量，CSS一句属性就能轻而易举的解决，下面来看几个例子（主要和js事件相关）。原...

2020-09-29

168浏览

0评论

CSS如何实现粒子按钮动画效果?

在码代码的时候会发现，很多东西都是殊途同归的，方法千千万，能解决问题的都是好办法，不一定非要把代码写的特别高深，这样反而后来的人看不懂，维护根据头疼。所以用最简单通俗的代码...

2020-09-29

149浏览

0评论

一些容易被忽略CSS特性

大小写不敏感虽然我们平时在写CSS的时候都是用小写，但其实CSS并不是大小写敏感的.test{ background-COLOR:#a00; width:100px; height: 100px;}虽然把background-co...

2020-09-29

163浏览

0评论

css中的变量

一直以来我们都知道，CSS 中是没有变量而言的，要使用 CSS 变量，只能借助 SASS 或者 LESS 这类预编译器。但是新的草案发布之后，直接在 CSS 中定义和使用变量已经不再是幻想了，像下...

2020-09-29

159浏览

0评论

常用CSS书写技巧介绍

我们需要针对不同的浏览器去写不同的CSS，让它能够兼容不同的浏览器，在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,...

2020-09-29

280浏览

0评论

怎么使用纯css来实现一个加号效果？（附代码）

实现下图的加号效果：若想实现这个效果，只需一个div元素即可搞定。需要用到css的为了before和after，以及border特性。先设置一个div便签<div class="add"></div>再设置一个边...

2020-09-29

179浏览

0评论

CSS实例之如何实现滚动图片栏效果？（代码示例）

网站上可以经常看到有一些图片进行持续不断的滚动，这个效果可以通过css的动画效果来实现。主要原理是通过动画向左移动。首先给出两组一样的图片（同一行上），让整体图片向左移动...

2020-09-29

127浏览

0评论

纯CSS是怎么实现图片左右翻转的？

CSS 翻转图片主要用到的技术除了3D翻转和定位，还用到了一个属性 backface-visibility：visable|hidden;该属性主要是用来设定元素背面是否可见。效果图如下：具体的步骤如下：1、...

2020-09-29

229浏览

0评论

css命名方式介绍

主流命名【BEM】说起CSS命名，当然要提到BEM。BEM的意思就是B模块(block)、E元素(element)、M修饰符(modifier)。模块和子元素之间用两个下划线分隔，子元素和修饰符之间用两个...

2020-09-29

171浏览

0评论

CSS Hack详解

CSS Hack主要分为属性标记法和选择器前缀法两种：属性标记法【IE6-】对于IE6-浏览器主要使用下划线_和中划线-这两种字符_color:blue;
-color:blue;【IE7-】对于IE7-浏览器可...

2020-09-29

207浏览

0评论

借助CSS Grid Generator快速上手Grid布局

CSS Grid Generator
CSS Grid Generator是一个由Sarah Drasner创建的免费工具。它是一个可视化设计工具，允许咱们创建一个基本的 grid 布局，然后就可以使用生成对应的代码，帮助...

2020-09-29

188浏览

0评论

css模块命名规范（推荐）

css命名规范：头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体佈局宽度：wrapper 左右中：left right center 登录条：loginb...

2020-09-29

149浏览

0评论

CSS代码规范(推荐)

一、语法1.1 注意（1）用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。（2）为选择器分组时，将单独的选择器单独放在一行。（3）为了代码的易读性，在每个声...

2020-09-29

117浏览

0评论

less常用语法介绍

变量@变量插值@mySelector: banner;.@{mySelector} { font-weight: bold;}延迟加载变量是延迟加载的，在使用前不一定要先申明.brass { @var: 2; three: @var; //...

2020-09-29

热门文章