CSS
文章平均质量分 77
本专栏是前端的CSS相关内容
IT利刃出鞘
如果能飞,就不跑。如果能跑,就不走。
展开
-
浏览器之缓存系列--解决css或js修改后浏览器缓存不更新的问题
本文介绍如何解决css或js修改后浏览器缓存不更新的问题。原创 2023-10-19 07:45:00 · 1240 阅读 · 0 评论 -
CSS之布局系列--顶部导航栏二级菜单居中展示
本文介绍CSS将顶部导航栏居中展示并支持二级菜单下拉展示的方法。原创 2023-10-17 20:50:19 · 758 阅读 · 0 评论 -
CSS之排列系列--顶部导航栏ul、li居中展示的方法
本文介绍CSS顶部导航栏ul、li居中展示的方法。原创 2023-10-14 19:59:11 · 996 阅读 · 0 评论 -
HTML中CSS的三种写法
本文介绍在前端HTML中写CSS的三种方法。原创 2023-07-02 23:15:00 · 3044 阅读 · 0 评论 -
Scss--将node-sass切换为sass(原dart-sass)
本文介绍node-sass与sass(原dart-sass),以及如何将node-sass切换为sass(原dart-sass)。 sass依赖原来是dart-sass,是为了与node-sass区分的。后来官网将node-sass废弃了,就一同将dart-sass改名为了sass。...原创 2022-08-31 18:44:14 · 4153 阅读 · 4 评论 -
Scss--版本的对应关系(sass, sass-loader, dart-sass, node-sass等)
本文介绍Sass的版本的对应关系。原创 2022-08-31 18:43:36 · 316 阅读 · 0 评论 -
Scss--@mixin--使用/实例
本文介绍Scss混合指令@mixin的用法。混合指令(Mixin)用于定义可重复使用的样式,避免了使用无语意的 class,比如 .float-left。混合指令可以包含所有的 CSS 规则,绝大部分 Sass 规则,甚至通过参数功能引入变量,输出多样化的样式。.........原创 2022-08-14 09:52:04 · 11683 阅读 · 2 评论 -
Scss--@extend--使用/实例
本文介绍Scss的@extend的用法。原创 2022-08-13 08:53:05 · 2675 阅读 · 2 评论 -
Scss--控制指令(@if, @for, @each, @while)--使用/实例
本文介绍Scss的控制指令的用法,包括:@if, @for, @each, @while。原创 2022-08-06 10:34:56 · 2578 阅读 · 0 评论 -
Scss--嵌套--使用/实例
本文用示例介绍Scss的嵌套的用法。原创 2022-07-14 23:14:45 · 1233 阅读 · 0 评论 -
Scss--@media--使用/实例
本文介绍Scss的@media的用法。原创 2022-07-29 23:16:59 · 1713 阅读 · 0 评论 -
Scss--@import--使用/实例
本文介绍Scss的@import的用法。原创 2022-07-28 22:25:07 · 25807 阅读 · 0 评论 -
Vue--解决Scss报错:Syntax Error: TypeError: this.getOptions is not a function
本文介绍Vue集成scss时的报错的解决方法。报错信息为:Syntax Error: TypeError: this.getOptions is not a function原创 2022-07-26 23:15:56 · 3140 阅读 · 2 评论 -
Scss--运算--使用/实例
本文用示例介绍Scss的运算的使用。所有数据类型均支持相等运算 == 或 !=,此外,每种数据类型也有其各自支持的运算方式。原创 2022-07-11 23:33:48 · 1574 阅读 · 0 评论 -
Scss--数据类型--使用/实例
本文用示例介绍Scss的数据类型的用法。原创 2022-07-10 10:18:14 · 723 阅读 · 0 评论 -
Scss--变量--使用/实例
本文用示例介绍Scss的变量的用法。变量以美元符号($)开头,赋值方法与 CSS 属性的写法一样。原创 2022-07-08 19:36:21 · 2727 阅读 · 0 评论 -
Scss--注释--方法/实例
本文用实例介绍Scss的注释的用法。原创 2022-07-13 23:05:24 · 1093 阅读 · 2 评论 -
less,sass,scss的关系与区别
本文介绍less,sass,scss的关系与区别。原创 2022-06-30 21:34:06 · 1020 阅读 · 0 评论 -
less与sass(scss)的区别
本文介绍less与sass(scss)的区别。原创 2022-06-30 21:05:37 · 876 阅读 · 0 评论 -
CSS之布局系列--响应式布局的实现方式
本文介绍前端响应式布局的实现方式。原创 2021-12-25 10:53:28 · 939 阅读 · 0 评论 -
CSS之布局系列--静态布局、流式布局、自适应布局、响应式布局的概念及区别
本文介绍前端的布局的常用方案的概念、优缺点、适用场景等。原创 2021-12-24 19:15:38 · 1608 阅读 · 4 评论 -
CSS之布局系列--九宫格布局(自适应)--方法/教程/实例
本文用示例介绍CSS进行九宫格布局的方法。 朋友圈、微博等很多社交平台都是使用九宫格布局来展示图片的,九宫格布局也是前端面试经常会问的问题。 本文只展示自适应布局的方案。不展示手动指定宽度的那种方案。原创 2021-12-22 23:53:13 · 5559 阅读 · 1 评论 -
CSS--flex布局--教程/详解
本文详细介绍CSS的flex布局,包括:原理、属性。原创 2021-12-22 22:52:25 · 3022 阅读 · 0 评论 -
CSS--盒子模型(box)--使用/教程/实例
说明 本文介绍CSS中的盒子模型的用法。盒子模型介绍所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。原创 2021-12-19 23:42:09 · 4313 阅读 · 1 评论 -
CSS--背景(background)--使用/详解
本文介绍CSS的背景(background)的用法。原创 2021-12-19 19:39:20 · 873 阅读 · 0 评论 -
CSS--显示(display)与可见性(visibility)--使用/教程/实例
CSS可以通过两种方式来设置是否隐藏:原创 2021-12-19 19:12:08 · 1022 阅读 · 0 评论 -
CSS--自定义属性--使用/教程/实例
本文用示例介绍CSS自定义属性的方法。带--前缀的属性名表示带有值的自定义属性,比如--example--name,可通过var函数在全文档范围内复用。原创 2021-12-19 18:59:23 · 1331 阅读 · 0 评论 -
CSS--link与@import的区别
原文网址:CSS--link与@import的区别_IT利刃出鞘的博客-CSDN博客简介 link标签和@import都是引入CSS的方法,本文介绍两种方式的区别。link与@import的区别结论:推荐使用link引入CSS。项 link @import 从属关系 link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。 @import是 CSS 提供的语法规则,只有导入CSS的作用。 加载顺序 ...原创 2021-12-18 16:28:32 · 1133 阅读 · 0 评论 -
CSS之排列系列--dl, dt, dd--使用/教程/实例
本文用示例介绍CSS中的dl, dt, dd的用法。 dl, dt, dd是组合标签,使用了dt dd最外层就必须使用dl包裹,此组合标签我们也又叫表格标签,与table表格类似组合标签,故名我们也叫dl表格。为常用标题+列表型标签。若没有对dl dt dd标签初始CSS样式,默认dd列表内容会缩进。原创 2021-12-05 11:35:22 · 15744 阅读 · 1 评论 -
CSS之排列系列--垂直居中--方法/实例
说明 本文用示例介绍CSS将子元素垂直居中的方法。需求 将div(class="container")里的span(class="middle")垂直居中。原创 2021-12-05 23:31:29 · 1055 阅读 · 0 评论 -
CSS之排列系列--块级元素、内联元素、内联块元素--区别/详解
本文介绍CSS的块级元素(block)、内联元素(inline)和内联块元素(inline-block)的区别。原创 2021-12-02 22:48:00 · 1692 阅读 · 0 评论 -
CSS--解决margin塌陷(margin-top失效)--实例
当2个垂直外边距相遇时,他们将合并为一个外边距。合并之后的外边距的高度等于2个发生合并的外边距的高度中的较大值。下述场景会导致margin合并:当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上/下外边距会发生合并。当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。当一个空元素没有边框或填充时,上下外边距碰到了一起,也会发生合并。原创 2021-12-03 00:32:07 · 4166 阅读 · 2 评论 -
CSS之布局系列--三列布局(两边固定,中间自适应)--方法/实例
本文用示例介绍CSS三列布局的方案。三列布局,即:左,中,右。有两种方案:1.两边固定,中间自适应;2.中间固定,两边自适应。本文介绍第一种方案,后边会写一篇博客写第二种方案。 两边固定,中间自适应,一共有如下几种方案:flex布局(推荐)网格布局浮动布局圣杯布局双飞翼布局表格布局(不推荐)绝对定位布局(不推荐)原创 2021-11-28 00:32:42 · 5716 阅读 · 1 评论 -
CSS--贝塞尔曲线(cubic-bezier)--使用/教程/实例
原文网址:简介说明本文用示例介绍CSS的过渡与动画中的贝塞尔曲线的用法。在线贝塞尔调试工具cubic-bezier.comCeaser - CSS Easing Animation Tool - Matthew Lein缓动函数速查表概述cubic-bezier又称三次贝塞尔,主要是为animation生成速度曲线的函数,规定是cubic-bezier(<x1>,<y1>,<x2>,<y2>)。P0:默认值(0,0)P1.原创 2021-11-06 22:53:46 · 10008 阅读 · 1 评论 -
CSS--选择器--使用/教程
原文网址:简介说明 本文介绍CSS的选择器用法。包括:优先级,基本选择器,分组选择器,层次选择器,伪类选择器,伪元素选择器。官网CSS 选择器 - CSS(层叠样式表) | MDNCSS 参考 - CSS(层叠样式表) | MDN优先级简介 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用。通过Firebug查看,发现没有起作用的属性被覆盖了。这个时候CSS选择器优先级的问题了。详解CSS选择器的优先...原创 2021-11-06 22:45:25 · 1211 阅读 · 1 评论 -
CSS--解决position: absolute无效的问题
本文介绍CSS进行定位时使用 position:absolute (绝对定位)却不起作用的问题。 需求:已有一个外层的元素(class为"container"),这个外层元素已经设置了margin,现在有一个元素(class为"test"),放在这个外层元素里边,想要基于这个外层元素的margin进行绝对定位。原创 2021-12-01 00:28:08 · 9520 阅读 · 2 评论 -
CSS之排列系列--水平居中--方法/实例
本文介绍CSS中把元素水平居中的方法。原创 2021-12-06 00:03:44 · 894 阅读 · 2 评论 -
CSS之布局系列--上中下布局(上下固定,中间自适应)--方法/实例
本文用示例介绍CSS三行布局的方案。 三行布局,即:上、中、下。有两种方案:1.上下固定,中间自适应;2.中间固定,上下自适应。本文介绍第1种方案。 两边固定,中间自适应,一共有如下几种方案:flex布局(推荐)网格布局(grid)vh+calc()表格布局(table)(不推荐)绝对定位布局(不推荐) 上下固定,中间自适应,就意味着中间要占满。所以大部分方案中,其父元素都要设置:height: 100%原创 2021-11-28 23:32:06 · 7696 阅读 · 0 评论 -
CSS--特殊用法
选择器原创 2020-09-19 12:03:31 · 347 阅读 · 1 评论 -
CSS之布局系列--三列布局(中间固定,两边自适应)--方法/实例
本文用示例介绍CSS三列布局的方案。 三列布局,即:左,中,右。有两种方案:1.两边固定,中间自适应;2.中间固定,两边自适应。本文介绍第2种方案。 中间固定,两边自适应,一般不太常用。比如:一个网站要适应不同的电脑屏幕大小,一般是确定两边的宽度,中间去适应。 中间固定,两边自适应,一共有如下几种方案:flex布局(推荐)浮动布局(float)原创 2021-11-28 12:04:45 · 1973 阅读 · 0 评论