css
文章平均质量分 60
本专栏主要收录与css以及sass、less等css预处理技术相关的文章,追踪最新技术前沿,把握时代动脉。
任磊abc
关注前端,热爱前端,追踪前端最前沿
展开
-
CSS样式中汉字和字母分别使用不同字体的方法
不同的操作系统、不同浏览器下内嵌的默认字体是不同的,错误的字体设置会导致页面在不同环境渲染的混乱,选择一套合适的字体是打造优秀网页的第一步。通过本文,我们会介绍字体的知识点,并探索在PC和Mobile两端该如何正确的设置字体。原创 2024-01-04 12:22:37 · 2209 阅读 · 0 评论 -
CSS免费在线字体格式转换器 CSS @font-face 生成器
CSS免费在线字体格式转换器 CSS @font-face 生成器原创 2024-01-04 11:37:56 · 2796 阅读 · 0 评论 -
diaplay:flex布局下,css 文本超出强制换行未生效
在弹性布局下,如果父元素是display:flex,那么子元素文本超出后,无法做到自动换行。 .content { display: flex; padding: 10px; width: 350px;}这是因为父元素的样式,影响了子元素。解决方式是在父元素上加上white-space:normal;.content{ display: flex; padding: 10px; width: 350px; white-space:..原创 2021-09-08 11:55:46 · 2027 阅读 · 0 评论 -
如何解决出现Unknown at rule @applyscss(unknownAtRules)警告?
在nuxt框架当中使用tailwindcss出现:@apply下面出现警告怎么取消这个警告呢?安装 Stylelint首先,我们需要安装Stylelint本身和一个包含合理标准配置的包。npm install --save-dev stylelint stylelint-config-standard在使用nuxt创建项目的时候, 如果Stylelint已经安装了,就不用重复安装了创建 Stylelint 配置将stylelint.config.js使用以下内容命名..原创 2021-08-16 14:59:00 · 18151 阅读 · 6 评论 -
Vue项目中使用Sass实现动态换肤
前一段时间完成了一个项目,该项目要求黑夜和白天两种主题色,可以动态的切换。经过多方的查找研究,终于完成。谨以此文在此记录一下。此方案涉及Sass的map遍历、函数定义、map存取、混合器等相关知识,具体API详参官网https://www.sass.hk/docs/。大概的思路就是给html根标签设置一个data-theme属性,通过js切换data-theme的属性值,sass根据此属性来判断使用对应主题变量。具体实现步骤,以我的项目(dark、light)两种主题为例。1.定义一个sas原创 2021-04-15 16:03:18 · 1646 阅读 · 3 评论 -
ElementUI自定义主题报错“primordials is not defined”最佳解决方案
写这篇文章之前,我已经查过百度搜索primordials is not defined结果前五条,均是通过降低 Node.js 版本或者多 Node.js 环境共存的方案,保证编译环境为Node.js v10.x,这里我并不想这样做,其实我是已经解决了问题才去搜索百度的,因为我不希望让你不幸看到了重复而无用的解决方案,而浪费你的时间。但是,最近经过谷歌找到一篇文章,文章出处点击这里。原文讲述的是在苹果系统下的开发macOS Catalina 10.15.7现在根据原文转换成w...原创 2021-01-28 11:03:02 · 3258 阅读 · 0 评论 -
深入理解CSS中的行高
1. 基线、底线、顶线行高指的是文本行的基线间的距离。 基线并不是汉字的下端沿,而是英文字母"x"的下端沿2. 行距、行高3. 内容区底线和顶线包裹的区域,实际中不一定看得到,但却是存在。4. 行内框行内框只是一个概念,它无法显示出来,但是它又确实存在 它的高度就是行高 在没有其他因素(padding)影响的时候,行内框等于内容区域5. 行框行框(line box)。同行内框类似,行框是指本行的一个虚拟的矩形框 行框高度等于本行内所有元素中行高...转载 2021-01-23 18:57:07 · 268 阅读 · 0 评论 -
使用css弹性布局,让页面footer底部固定
在前端开发过的工作中,footer永远固定在底部的需求。也就是说一个Footer元素如何粘住底部,使其无论内容多或者少,Footer元素始终紧靠在浏览器的底部。我们知道,当内容足够多可以撑开底部到达浏览器的底部,如果内容不够多,不足以撑开元素到达浏览器的底部时,下面要讲的是使用css弹性布局解决如何使元素粘住浏览器底部。需求看下图:首先这是HTML部分结构: <div class="layout"> <header class="header">头部&l.原创 2020-11-17 16:05:49 · 2304 阅读 · 0 评论 -
自适应页面如何布局以及字体大小如何设置?
字体大小使用 em,rem作为单位,然后使用 media query 来调整 html 元素的 font-size自适应网站html {font-size: 62.5%!important; /* 10÷16=62.5% */}@media only screen and (min-width: 481px){ html { font-size: 94%!important; /* 15.04÷16=94% */ }}@media only screen ..原创 2020-09-18 17:41:09 · 6220 阅读 · 0 评论 -
CSS命名规范BEM
首先直接给原文链接:getBEMBEM的命名规则:计算机科学里面只有两个问题:缓存失效和对象命名。——Phil Karlton正确的样式指南能显著地提高开发速度、debug效率和继承代码的执行效率,然而很多CSS代码实际上并没有良好的组织结构和命名的规范...转载 2020-05-21 15:17:07 · 346 阅读 · 0 评论 -
【CSS】CSS经典布局之绝对底部布局
转载自:CSS经典布局之Sticky footer布局何为Sticky footer布局? 我们常见的网页布局方式一般分为header(页头)部分,content(内容区...原创 2019-05-31 16:51:52 · 736 阅读 · 0 评论 -
css实现容器高度 适应 屏幕高度
<html>元素的高度默认是auto,被内容自动撑开;100%:使得html的height与屏幕的高度相等;50%:使得html的height等于屏幕的一半;若想让一个<div>的高度与屏幕高度自适应,始终充满屏幕,需要从html层开始层层添加height=100%<html>元素没有margin和padding<body>元素有...原创 2018-01-31 16:50:17 · 13994 阅读 · 0 评论 -
Sass语法学习
1、编译监控自动监控把sass编译成css文件,命令行sass--watchsass/basic.scss:css/basic.css在监控的sass后面,,可以为sass生成css样式指定生成的格式,默认是nested型;--stylenested|compact|compressed|expended通过--stylenested(嵌套-默认)|compact(紧...原创 2018-02-23 10:38:28 · 268 阅读 · 0 评论 -
CSS书写规范、顺序和命名规则
这些是参考了国外一些文章以及我的个人经验总结出来,我想对写CSS的前端用户来说是值得学习的。一、CSS书写顺序1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text-a...原创 2018-02-21 16:31:08 · 219 阅读 · 0 评论