网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发  > css
  • CSS垂直居中常用的几种方法

    我们经常需要设置css将某个元素垂直居中,实现这种效果的方法也很多,今天我们就主要来说说垂直居中css常用的方法。方法一:使用相对定位和 margin-top 属性对元素进行垂直居中 由于div元素的祖先元素html和body的高度默认是为0的,所以需要设置为100%,并且清除默…

    2022/4/1 21:33:11
  • less在css中如何应用的实例

    什么是 CSS 预处理器 是 CSS 语言的超集,比CSS更丰满。 CSS 预处理器定义了一种新的语言,其基本思想是:用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。 通俗的说,CSS预处…

    2022/3/28 21:44:06
  • css中word-break和word-wrap用法详解

    css中的word-break和word-wrap属性在遇到中文和英文时的表现是不一样的,所以我们会在这些属性遇到中文、英文时分别进行说明。 word-break: normal; // 此值为浏览器的默认属性:以单词为单位; keep-all 这个值由于兼容性差,很少用; word-wrap: normal…

    2022/3/20 11:15:05
  • css文字动画自动适应背景颜色

    文字动画上下移动,遇到黑背景文字自动变白,遇到白背景文字自动变黑,根据背景的不同而变化文字的颜色,这就是我最近需要实现的一个css效果,今天就共享给大家。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta …

    2022/3/20 11:10:42
  • 怎么让页面显示比12px更小的字?

    web页面的字体最小只能够是12px,如果我们想显示比12px更小的字体应该怎么做呢? 下面我就一步一步教大家如何实现? 比如我们想显示的字体大小是10px; 那么我们可以先通过css将字体大小设置成20px,使用-webkit-transform: scale(0.5);这样字体的大小…

    2022/3/17 18:54:05
  • css实现方块转圈动画效果(含源码)

    前两天用css实现了一个方块转圈的动画效果,今天分享给大家,我们直接看源码是如何实现的。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>css实现方块转圈动画效果(含源码)www.woaidaogu.com</title>…

    2022/3/17 18:38:26
  • Stylelint样式表css错误检查工具

    什么是Stylelint Stylelint是一个强大的,现代的代码检查工具,与ESLint类似,Stylelint能够通过定义一系列的编码风格规则帮助我们避免在css样式表中出现错误。 目前在开源社区上,关于CSS Lint的解决方案主要包括了csslint、SCSS-Lint和Stylelint等几种。而由于St…

    2022/2/10 20:25:23
  • 浅谈html+css流式布局

    流式布局是一种等比例缩放布局方式,在CSS代码中使用百分比来设置宽度,也称百分比自适应的布局,页面元素的宽度按照屏幕分辨率进行适配调整,但整体布局不变。主要特征是像瀑布一样往下流,有规律的无限遍历模块。 流式布局实现方法是将CSS固定像素宽度换算为百分比宽度…

    2022/1/26 13:35:11
  • 再谈webpack的作用

    在以前的文章中我们介绍过什么是webpack?有什么用?今天我们从以下7个方面再来聊聊webpack的作用。代码转换:将TypeScript编译成Javascript,将SCSS编译成CSS等。文件优化:压缩Javascript、CSS、HTML代码,压缩合并图片等。代码分割:提取多个页面的公共代码,提取首屏…

    2022/1/26 12:40:04
  • CSS实现红领巾的效果

    有时我们需要在网页上显示各种奇形怪状的效果,今天我们就来说说通过css怎么实现红领巾的效果。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in…

    2022/1/22 14:01:31
  • BFC、IFC、GFC和FFC是什么?

    学前端CSS的小伙伴们对BFC应该很了解,那么IFC、GFC和FFC呢?有的人看见这几个就傻眼了,没关系当你看完这篇文章就能知道他们的作用了。BFC(Block formatting contexts):块级格式上下文 页面上的一个隔离的渲染区域,那么他是如何产生的呢?可以触发 BFC 的元素…

    2022/1/20 16:27:35
  • iOS(Android)禁用页面内容选中和复制粘贴的方法

    我们经常会遇到禁止用户选中、复制、粘贴的情况,今天我们就来介绍一下这个方法,在iOS和Android下也适用<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=&…

    2022/1/8 13:04:46
  • 根据窗口大小调用不同css代码的效果如何实现?

    根据窗口大小调用不同css代码的效果以前实现可能会比较费劲,但有了css3之后实现起来就变的很容易了。 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,…

    2021/11/3 21:42:26
  • 通过实例告诉你CSS3伪类和伪元素的区别

    CSS3伪类和伪元素我们经常用到,但二者究竟有什么区别呢?不一定每个人都很清楚,今天我们就通过实例来看看CSS3伪类和伪元素的区别:CSS3伪类 伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。 伪类由一…

    2021/10/30 18:47:44
  • 再说css的flex布局

    css的flex布局我们以前介绍过,为了加深大家对它的认识,今天我们再来聊聊css的flex布局,flex弹性布局的原理,相当于在一个容器里面,可以指定容器内部元素的排列方式,比如排列顺序,对齐方式等。 其中具体属性有 flex container的样式display:flex; 变…

    2021/10/7 18:00:01
  • css中清除浮动有什么作用?

    css中我们经常需要清除浮动,那么究竟为什么要清除浮动,清除浮动有什么作用呢,今天我们就来聊聊清除浮动的真正原因,因为浮动元素是脱离文档流的,所以会导致父元素的高度不会被子元素撑开。 清除浮动的方法 1.额外标签法(在最后一个浮动标签后,新加一…

    2021/10/7 17:26:14
  • css nth-child(n)选择器中的n是什么意思?

    我们先来看一个例子<!DOCTYPE html><html><head><meta charset="utf-8"> <title>css nth-child(n)选择器中的n是什么意思?www.woaidaogu.com</title><style> p:nth-child(2){background:#ff0000;}</style><…

    2021/9/18 21:50:08
  • css实现每个段落的首个字加粗变大?

    我们如果要实现一个页面的内容对应的每个段落首个字加粗变大,使用传统方法会比较繁琐,一个一个去改变他们的样式,但使用css的p:first-letter的样式方法就变得很简单了。我们通过以下例子来看看具体如何实现?<!DOCTYPE html><html><head><meta ch…

    2021/9/11 16:49:15
  • CSS实现鼠标滑过表格行变色

    CSS实现鼠标滑过表格行变色的实现很简单,主要是用到了css的:hover选择器,我们来看看具体的实现方法:  <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS实现鼠标滑过表格…

    2021/9/11 16:38:55
  • CSS如何在元素的内容之前添加新的内容?

    这里我们需要用到css的:before选择器向选定的元素前插入内容。使用content属性来指定要插入的内容。我们想实现的效果是给内容中的段落p元素前面增加四个空格,使内容更加清晰排版更好看。我们先来看看下面这个例子:<!DOCTYPE html><html><head><me…

    2021/9/11 16:34:39