CSS - 教程之家

163浏览

0评论

css中主要有哪三种选择符

css中主要的三种选择符1、元素选择器：作用：选择指定元素名称的所有元素。语法：元素{ 样式声明； }ex(例子)：页面上所有的p文字大小为12px，文字颜色为橘黄色页面上所有的...

2021-02-23

106浏览

0评论

css中width什么意思

css width属性width属性设置元素的宽度。注意： width属性不包括填充，边框和页边距！width属性定义元素内容区的宽度，在内容区外面可以增加内边距、边框和外边距。行内非替换元素...

2021-02-23

106浏览

0评论

css怎么设置水平对齐

1、使用text-align: center;text-align属性指定元素文本的水平对齐方式。属性值： left 把文本排列到左边。默认值：由浏览器决定。 right 把文本排列到右边。 center 把文本...

2021-02-23

77浏览

0评论

什么是CSS优先级

一、优先级所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。浏览器根据优先级来决定给元素应用哪个样式，而优先级仅由选择器的匹配规则来决定。内联》ID选择器》伪类...

2021-02-23

99浏览

0评论

CSS复合选择器的具体使用方法

交集选择器交集选择器由两个选择器直接连接构成，其中第一个选择器必须是元素选择器，第二个选择器必须是类选择器或者 ID 选择器，两个选择器之间必须连续写，不能有空格。
交集选...

2021-02-23

114浏览

0评论

纯css和flutter分别实现呼吸灯效果(实例代码)

上一次有一位非常好学的粉丝儿问可不可以把月亮做一个呼吸灯效果，因为没有找到月亮大小的图，就用星星代替
今天，本博主用纯css和flutter动画分别实现它，记得收藏学习哦
效果：想要...

2021-02-23

434浏览

0评论

解决ElementUI自定义CSS样式不生效的问题

例如有一个输入框<el-input ref="mySearch" class="mySearch" size="small" placeholder="请输入内容" suffix-icon="el-icon-search"...

2021-02-23

100浏览

0评论

纯CSS免费让网站拥有暗黑模式切换功能的实现代码

前言暗黑模式这个概念最早起源于 MacOS系统的 Mojave ，提供浅色主题和深色主题两种皮肤供用户选择，深色主题就是我们常说的暗黑模式。为了眼睛健康，笔者在手机、平板...

2021-02-23

118浏览

0评论

CSS 带搜索导航栏的示例代码

本文为大家介绍如何使用 CSS 创建一个带搜索的导航栏。以下实例均是响应式的。可以先看下效果图：创建一个搜索栏<div class="topnav"> <a class="active" href="#home">主页...

2021-02-23

142浏览

0评论

设置div背景透明的方法示例

div背景透明常见的有两种方法：1. 通过opacity属性设置，取值0~1,0表示透明，1表示不透明，但是这种方法会把div上的内容也同时进行透明设置。效果如下：2.通过rgba格式的background-c...

2021-02-23

94浏览

0评论

一文教你玩转CSS 组合选择器

CSS组合选择符包括各种简单选择符的组合方式。在 CSS3 中包含了四种组合方式: 后代选择器(以空格分隔) 子元素选择器(以大于号分隔）相邻兄弟选择器（以加号分隔）...

2021-02-23

118浏览

0评论

纯CSS实现的三种通知栏滚动效果

前言通知栏组件是一个比较常见的组件了，基本上每个站点都会有怎么个组件，主要就是通告站点的一些变化或者是告知一些中奖名单等作用。
最近在复习CSS3动画部分内容，想着平时通...

2021-02-23

129浏览

0评论

CSS实现TikTok文字抖动效果示例

前端同学在日常开发中精彩会因为一些动效和设计争的面红耳赤，设计希望用代码实现，前端要设计出gif图，最后谁也不让谁，设计走了，留下了前端独自加班......CSS技术是前端必须掌握的...

2021-02-23

109浏览

0评论

一文教你玩转CSS border(边框)

边框样式边框样式属性指定要显示什么样的边界。border-style属性用来定义边框的样式border-style的值代码演示：<!DOCTYPE html><html lang="en"><head> <meta charset="U...

2021-02-23

71浏览

0评论

CSS 实现各种 Loading 效果附带解析过程

HTML<div class="spinner"></div>CSS.spinner { width: 40px; height: 40px; background-color: #333; margin: 100px auto; -webkit-animation: sk-rotateplane 1.2s...

2021-02-23

680浏览

0评论

CSS让子元素div的高度填满父容器的剩余空间的方法

1.使用浮动的方式效果图：代码如下：(注意，此时.content的高度是500px，即父元素的高度，但是浮动元素在 .content 上方，盖住了 .content，将 .nav背景样式改为 background-color: rgba(...

2021-02-23

101浏览

0评论

浅谈css布局中负margin的使用方法

一、左右栏宽度固定，中间栏宽度自适应<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>左右栏宽度固定，中间栏宽度自适应</title> <style> body{...

2021-02-19

103浏览

0评论

详细了解CSS3中的border-image-slice属性

首先我们来了解一下它是干嘛的。说明：文档说明：它是控制图像边界向内偏移的。what？？？这是嘛意思啊？根本看不懂！！！好的，我们先不要急，我们在看看：基础知识：当我们通过 border-image-source...

2021-02-15

72浏览

0评论

CSS Modules是啥子东西？一起来了解一下！

今年四月份的时候面试了一家公司，技术面的时候被人家问到了CSS Module有了解过么，我说没有了解过，他就继续问到，那你在平时开发的时候给组件和元素起类名要怎么办呢？
我说给元素...

2021-02-14

97浏览

0评论

详解css z-index的权重问题

本篇文章给大家分享一下css的z-index权重问题。到底怎么样才能让我们想要排在上面的元素能在上面，想在下面的元素就老老实实的在下面。一、一起看下面实战中z-index的几种情...

2021-02-14

118浏览

0评论

CSS中处理不同长度文本的几种小技巧

当我们使用 CSS 构建布局时，考虑长短文本内容很重要，如果能清楚地知道当文本长度变化时需要怎么处理，可以避免很多不必要的问题。在许多情况下，添加或删除一个单词会改变 UI 的...

2021-02-12

113浏览

0评论

三种在php程序中嵌入html代码的方法

php程序嵌入html代码的三种方法如下：第一种是在HTML中加PHP大段大段的html代码中，在各个需要执行php的地方<?php .... ?>比如 line7-9： 1 <head> 2 <meta http-equiv="Cont...

2021-02-12

113浏览

0评论

通过示例来了解CSS background强大的用法（值得收藏）

本文将介绍一些利用 CSS 中的 background、mix-blend-mode、mask 及一些相关属性，制作一些稍微复杂、酷炫的背景。通过本文，你将会了解到 CSS background 中更为强大的一些用...

2021-02-12

132浏览

0评论

css中的px、em、rem、pt 特点和区别及换算详解

概念介绍：1、px (pixel，像素)：是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有D...

2021-02-08

96浏览

0评论

CSS3中的弹性布局em运用入门详解 1em等于多少像素

使用CSS也好久了，但一直都是在使用“px”来设置Web元素的相关属性，未敢使用“em”。主要原因是，对其并不什么了解，只知道一点概念性的东西，前段时间在项目中...

2021-02-08

77浏览

0评论

浅谈css3 device-width和width之间的差异

1.device-width定义：定义输出设备的屏幕可见宽度。不管你的网页是在safari打开还是嵌在某个webview中，device-width都只跟你的设备有关，如果是同一个设备，那么他的值就不会变。...

2021-02-08

89浏览

0评论

外部调用css不显示怎么办

外部调用css怎么不显示（不生效）？在css目录下面写了一个css样式文档：style.css。这时里面只有一句话：body {background-color: #ddd;}然后再我的html文件里面去引入这个外部css：<li...

2021-02-08

261浏览

0评论

css3怎么设置元素背面不可见

CSS3 backface-visibility属性backface-visibility 属性定义当元素背面向屏幕时是否可见。如果在旋转元素不希望看到其背面时，该属性很有用。语法backface-visibility: visib...

2021-02-08

90浏览

0评论

聊聊你可能不了解的CSS属性函数 attr()

属性函数 attr() 用于获取HTML元素里面的属性值,并用于样式中，但目前暂时只能应用于CSS元素中的伪元素。例子实现一个Tooltip <!DOCTYPE html><html> <head> <meta chars...

2021-02-07

78浏览

0评论

如何优化css expression性能

如何优化css expression性能？IE 浏览器中 CSS Expression 特性的最大的问题：会反复执行，每秒钟可能执行了成百上千次，有严重的性能问题。如何对 CSS Expression 进行优化呢？至少：...

2021-02-07

104浏览

0评论

300 多行css代码搞定微信 8.0 的炸裂特效

微信 8.0 更新的一大特色就是支持动画表情，如果发送的消息只有一个内置的表情图标，这个表情会有一段简单的动画，一些特殊的表情还有全屏特效，例如烟花表情有全屏放烟花的特效，炸...

2021-02-05

113浏览

0评论

css里面div如何居中显示文字

可以通过为文字所在div添加text-align:center样式来设置div中文字居中。text-align 属性规定元素中的文本的水平对齐方式。该属性通过指定行框与哪个点对齐，从而设置块级元素...

2021-02-05

85浏览

0评论

css实现元素居中的N种方法

前言刚参加工作时被面试官一连串居中问题虐的体无完肤得场景历历在目。“你是如何实现文本的居中的”“如果是多行文本呢”“块级元素的水平居中...

2021-02-04

87浏览

0评论

有趣的css实现隐藏元素的7种思路

前言display、visibility、opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题。属性值是否在页面上显示注册点击事件是否有效是否存在于...

2021-02-04

77浏览

0评论

CSS实现div不设高度完全居中

要求 body下div垂直居中 div内文字垂直居中 div宽度和高度均为body宽度的一半分析 div居中不难，考虑 margin 或者 left/top 配合 translate 属性实现关键点在于div高度等于b...

2021-02-04

132浏览

0评论

css之粘性sticky布局实现题头定位在顶部的方法

运用场景：新需求有个项目是要做问卷调查，其中必然会涉及到很多题目，以及一个题目下需要对多个人打分，手机端滑动的时候，就会发生这种现象，划上去会忘记了题目。所以计算一定的距...

2021-02-04

338浏览

0评论

推荐一个Chrome DevTools实用小插件：CSS Overview Panel

CSS概览面板（CSS Overview Panel）提供了关于你的CSS的有趣信息。你可以查看高级别的CSS指标，这些指标在重构时特别有用。如何使用此功能启用此功能：从“DevTools实验（Expe...

2021-02-03

107浏览

0评论

提升你的CSS技能的20个css技巧

随着前端开发越来越关注效率：通过选择器的使用和简化代码来快速加载渲染。像Less、SCSS这样的预处理器在工作的时候，需要绕的路较长，而直接使用css速度会更快。这里涵盖了20个c...

2021-01-30

209浏览

0评论

css实现快速炫酷抖动动画效果

1.Animate.css简介Animate.css是一个可在您的Web项目中使用的即用型跨浏览器动画库。非常适合强调，首页，滑块和引导注意的提示。它是一个来自国外的 CSS3 动画库，它预设了抖动（s...

2021-01-30

73浏览

0评论

css样式优先级法则

css样式优先级介绍：当外部样式、内部样式和内联样式同时应用于同一个元素时，优先级如下：（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style...

2021-01-30

95浏览

0评论

css怎么设置虚线

css设置虚线的方法通过设置虚线边框来设置虚线：我们知道在html中<div>标签的边框可以设置为虚线。所以可以先创建一个<div>标签：<div class="xuxian"></div>然后将该边框的...

2021-01-29

101浏览

0评论

利用css伪类实现鼠标滑过按钮动画效果

按钮，对开发者而言，是非常常见的一个功能。前端通常会对按钮加入一些操作交互样式，增加一些用户体验。比如：hover样式、点击样式、loading样式等。下面我们通过简单示例在学习一...

2021-01-28

68浏览

0评论

子元素margin-top导致父元素移动的问题解决

问题描述今天在修改页面样式的时候，遇到子元素设置 margin-top 但是并没有使得子元素与父元素之间产生间隔，而是作用在了其父元素上，导致父元素产生了一个 margin-top 的效果。...

2021-01-28

104浏览

0评论

css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果

效果查看地址：游计划（uplanok.com）代码：img{width: 100%;border-radius: 3px;transition: all 2s;}img:hover{transform: scale(1.2);}img外层标签元素，需要设定overflow: hidden...

2021-01-28

73浏览

0评论

css弹性盒flex-grow、flex-shrink、flex-basis详解

flex-grow、flex-shrink、flex-basis三个属性的作用：在flex布局中，父元素在不同宽度下，子元素是如何分配父元素空间的。(注意：这三个属性都是在子元素上设置的，下面小编要讲的是...

2021-01-28

108浏览

0评论

CSS3实现文字折纸效果的方法（代码示例）

CSS3文字折纸代码如下，复制即可使用：<!DOCTYPE html><html><head> <title></title> <style type="text/css"> html { height: 100%;}body { background: -webk...

2021-01-27

130浏览

0评论

使用CSS实现圆角渐变边框

CSS如何实现带圆角的渐变边框？下面本篇文章给大家介绍一下使用CSS巧妙实现带圆角的渐变边框的几种方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。如何...

2021-01-27

87浏览

0评论

利用CSS变量来提高灵巧布局效率的小技巧

有些情况下，我需要用一种简单的方法来创建网格布局。例如，每次我改变主意时，在不修改CSS的情况下快速画出五列网格。在本文中，我们一起探索一些用例，并思考如果实现及使用它们...

2021-01-27

122浏览

0评论

css怎么让字体变细

详细介绍：在CSS中，可以通过font-weight属性来设置字体的粗细。属性值： normal 默认值。定义标准的字符。 bold 定义粗体字符。 bolder 定义更粗的字符。 lighter 定义更细...

2021-01-27

111浏览

0评论

为什么css放上面js放下面

href和src的区别一般加载CSS用href,并放在头部；加载script用src，放在body内的下方。href是hypertext reference的缩写，表示超文本引用，用来建立当前元素和文档间的链接。常用的...

2021-01-27

热门文章