首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何学习 CSS

如果你曾经遇到过无法理解为什么某些CSS似乎没有应用的情况,那可能是层叠没有运用好。 层叠与继承紧密相关,继承定义了子元素可以继承父元素的样式属性。...流中的元素被赋予空间,并且空间被流中的其他元素所影响。 如果通过浮动或定位元素使元素脱离流,则该元素的空间将不再受到其他流元素的影响。 对于绝对定位的元素,是最明显的。...响应式设计 通常,新的Grid和Flexbox布局方法意味着我们可以使用比旧方法更少的媒体查询,因为它们非常灵活,可以响应视口或组件大小的变化,而无需我们更改元素的宽度。...我觉得把速查表作为记忆助手查找语法没有问题,我自己也出版过一些速查表。完全依赖速查表的问题是当你复制语法时,你可能会忽略为什么要这样写。...创建一个简单的测试用例来强调这个问题,问问对规范更熟悉的人。我被问到的许多CSS问题都是因为人们认为属性的表现与它在现实中的表现不同。这就是为什么我经常讨论关于对齐和尺寸,因为这些地方经常会混淆。

1.8K10

绝佳用户体验:构建响应式网页设计的关键原则

当谈到前端开发时,有许多有趣和实用的主题可以探讨。在本文中,我将为您提供一篇关于前端开发的文章,主题是"构建响应式网页设计"。...响应式网页设计是指网站能够根据用户的设备和屏幕尺寸自动调整布局和内容,以提供最佳的用户体验。 为什么需要响应式网页设计? 在以前,为不同的设备创建独立的网站版本是一种常见的做法。...但随着设备种类的增多,这种方法变得不再可行。以下是为什么需要响应式网页设计的几个原因: 1.多设备访问:用户使用各种设备来访问您的网站。您不能为每种设备都创建单独的网站版本。...可伸缩字体:使用相对单位(如em或rem)来定义字体大小,以确保文字能够根据屏幕尺寸进行调整。 优雅降级:确保网站在不支持响应式设计的旧浏览器上仍然能够正常显示。...> 在这个示例中,我们使用了媒体查询来根据不同的屏幕宽度应用不同的字体大小。

24530
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Java 17:和遗留 25 年的漏洞 Say Goodbye

    团队可以通过在他们的 Docker 映像中指定该版本升级到最新的 Java 版本——这不会影响其他可能在旧 Java 版本上运行的团队,因为这些团队使用的是旧的 Docker 映像。...这是一个周五下午的好工作内容;看看你已经完成了多少工作,还有哪些挑战,这样就更容易估算剩下的工作。 然而,即使有多年的经验,在没有关于项目深入信息的情况下,我也无法估计升级需要多长时间。...例如,如果你使用 Apache POI(用于 Microsoft Office 兼容文档的 Java API)。你需要字体,操作系统需要提供字体,因为它们不再出现在 JDK 中。...JDK 11 中最大的变化是删除了 Java EE 模块。前面提到的 JAXB 等 Java EE 模块被许多应用程序使用。既然这些模块不再存在于 JDK 中,你应该添加相关的依赖项。...总的来说,我建议升级所有使用这些内部组件的依赖项,并确保您自己的代码不再使用它们。 如果这实现不了,有一个解决方案仍然使你的应用程序访问内部。

    1.1K30

    为什么你永远不应该在CSS中使用px来设置字体大小

    在Josh Collinsworth的博客文章“永远不要用px作为字体大小”中,作者讨论了为什么不应该使用像素(px)作为网页字体大小的单位[1]。...案例证明:在CSS中, px , em 或 rem 单位之间没有功能上的区别的想法是一个我一遍又一遍听到的误解,因此我想在这里发帖来解决这个问题。 我们要非常清楚:在CSS中使用的单位绝对很重要。...如果你将字体大小设置为 32pt(“pt”是另一个仍然有时使用的旧排版术语),那么 1em 就是32pt。如果当前字体大小为 20px ,那么 1em = 20px。...关于媒体查询的重要说明 出于与上述所有原因相同的原因,重要的是要避免在 @media 查询中使用 px ;当用户缩放时,它将正常工作,但是使用 px 的媒体查询将在用户自己设置更大的字体大小时失败。...然而,当我将默认字体大小设置得更大时,我的媒体查询没有响应,因为它们仍然只查看屏幕的像素宽度。因此,我仍然有一个微小的侧边栏,里面塞满了难以辨认的巨大文本,因为我没有考虑用户的偏好。

    1.8K20

    「Adobe国际认证」字体与字体有区别吗?字体区别的真正“奥义”秘籍,你掌握了吗!

    “字体”和“字体”这两个词看起来不一样。它们听起来不一样。它们的意思也不一样。 为什么我们经常混淆它们? 被这些话弄糊涂的不只是外行。即使是那些专门从事平面设计和排版的人也会将两者混为一谈。...字体是指字体中的不同粗细和大小。 考虑这两个术语的一个有用方法是将字体视为音乐专辑,而字体是构成专辑的歌曲。 这个定义看起来很简单,那么为什么这两个术语会混淆呢? 让我们回顾一下它们的原始用法。...取而代之的是,打印机和排字员会逐字逐句地列出短语、句子和单词。为此,他们使用了“类型”,即排列在页面上进行打印的物理字母和数字符。 该类型被组织并存储在工作案例中。...每种字体都放置在自己的工作案例中,因为尽管它们属于相同字体的一部分,但每种字体都具有可区分的外观:粗细、宽度、样式、视觉尺寸、等级和效果。...与字体保持一致很容易,不再有各种字母用完(这就是“I'm all out sorts”这句话的来源!),也不再需要翻箱倒柜。 如今,在字体和字体之间切换只需几秒钟。 我如何处理这些信息?

    70000

    苹果正在怎样毁掉设计之名

    新的系统很难学习与使用,却在人们尚未意识到这个问题时侥幸过关——公司已经赚到钱了。即便如此,人们还在为设备的缺陷而自责:“如果我没那么笨……” 如今的iPhone和iPad是视觉简洁的典范。...但这样一来,在很多应用页面中,这个选项会让正常字体显得过大,导致字体与屏幕不相适应。需要指出的是,她的视力并没有缺陷,只是没有17岁的少年那么优秀而已。...纠正误操作的标准简单办法就是添加返回键:安卓手机普遍都内置有始终可用的返回键,但苹果没有。为什么呢?我们不得而知。他们是为了避免添加按键或菜单吗?...苹果的Magic Mouse鼠标比触控板还要不同,与iPhone和平板的手势又不相同。为什么呢?(这种不一致一般可以追根溯源,设计师在工作时彼此孤立,没有互相讨论过。...原来苹果使用文字来说明,但是字体小的要命,而且与图标分离。我们花了5分钟来查看如何解锁,结果发现了说明文字——为什么要花5分钟时间才能了解这样一个频繁操作该如何执行?

    82190

    rem与em详解

    Em 和 rem 单位提供的这种灵活性和工作方式都很相似,所以最大的问题是,我们何时应使用 em 值,何时应使用 rem 值呢?...现在我们原始的 div 不再直接从根元素继承,而是从其新的父元素继承字体大小为 20px 1.5em 其padding值现在等于 30px,即 1.5 x 20 = 30。...相反,它给我们的一个途经去获取用户的偏好来影响网站中每一处使用rem的元素大小,不再是使用固定的 px 单位。...使用 em 单位: 根据某个元素的字体大小做缩放而不是根元素的字体大小。 一般来说,你需要使用 em 单位的唯一原因是缩放没有默认字体大小的元素。...我建议,当您使用 em 单位,他们使用的元素的字体大小应设置对rem单位,以保留的可扩展性,但避免继承混淆。

    4.7K30

    qdialog 返回值_QDialog 窗口级别模态(续)「建议收藏」

    大家好,我是架构君,一个会写代码吟诗的架构师。今天说一说qdialog 返回值_QDialog 窗口级别模态(续)「建议收藏」,希望能够帮助大家进步!!!...每个函数的返回值都是用户从对话框中选择的颜色;如果用户没有选择,则会返回一个非法颜色值。这些函数的问题在于,它们提供的是应用程序级别的模态,因此不能使用 sheet。...QDialog子类提供的 static 函数鼓励开发者使用这么一种方式:阻止用户继续工作,并且询问一个问题(例如,“你想用哪个字体?”)。但是,有一定程度上,这将影响到用户的工作,甚至惹恼用户。...很显然,这种繁复的工作通常很讨厌,为什么不设计成对话框一直显示在那里,让用户选择好颜色之后就可以马上看到效果呢?一种解决方案是,自己创建一个非模态对话框,实现前面所说的工作。...对于QFontDialog也是类似的,没有什么区别。我们创建一个字体对话框,通过保持其指针来做信号槽连接。 结论 这篇文章阐述了一些使用QDialog的新的方法。

    1.9K31

    💪 腾讯云新晋产品「腾讯混元大模型」内测体验!

    问: 我目前有两个JSON 这个Json 可能会有节点不存在 我需要进行将两个JSON进行对比差异并且返回一个对比后的JSON,差异当中的节点使用数组存储旧的和新的差异数据 使用Java 如何实现?...`设计一个以 杨不易呀 字体的头像` 还不错嘛,有哪个味道咯~ 就是我想的是字体的头像需要优化 继续优化 长大了哈哈哈质感超级牛,不知道是我4K的原因这个图片很清晰 展示 日漫动画风格 进入灵感发现...-> 推荐 -> 日漫动画风格 帮我设计一个 根据 杨不易呀的这个字体 设计一个图片 结果不是我想要的字体图片,等待混元AI的优化!...问: 我目前有两个JSON 这个Json 可能会有节点不存在 我需要进行将两个JSON进行对比差异并且返回一个对比后的JSON,差异当中的节点使用数组存储旧的和新的差异数据 使用Java 如何实现?...代码测试 预期 使用使用数组存储旧的和新的差异数据 结果使用的是对象 混元AI - 实践短视频脚本 为什么实践呢因为我女朋友搞自媒体哈哈哈!

    2.9K4311

    win10 uwp 打包第三方字体到应用 UWP使用第三方字体

    有时候我们会把一些特殊字体打包到软件,因为如果找不到我们的字体会变为默认,现在很多字体图标我们用得好,有时候我们的应用会用很漂亮的字体,需要我们自己打包,因为用户一般是没有字体。...http://font.chinaz.com/我在这网站下载,如果有人知道他的网站字体不是完全授权,请和我说,我就删除我的应用字体。 在网上下东西很要注意版权,有很多是我们不能直接拿来用。...为什么在Margin写10,100,10,10因为上面有黑色会挡住。 ?...{ this.DebugSettings.EnableFrameRateCounter = true; } # endif 第二步, 大家可以看到我们的应用没有特殊字体...几乎看不到有变化 我们添加一个文件夹,用于存放字体 ? 我把它叫 Font 把我们的字体放入。建议直接拖进去,uwp 导入字体是把字体放到解决方案的文件夹 ?

    1.4K10

    2019年UI和UX设计趋势

    但尽管如此,我们还是远远没有达到我们未来的目标,下面就让我们进入2019年的UI和UX设计趋势。 01 有目的的动画 新的浏览器功能为动画打开了大门。不仅仅是元素的运动,更是一个绝佳的设计机会。...渐变不再受到关注,它们现在为界面带来了新的深度和维度。 Gdient 2.0 by Eddie Lobanovskiy 渐变2.0是微妙和简单的,它不再使用冲突的颜色。...05 变量字体 传统上,字体被视为具有有限可调参数集的静态实体。设计师和作家必须在x高度,笔划和字母宽度的背景下考虑易读性。 每当设计需要多种字体时,设计者必须提供所用字体样式的所有文件。...除非涵盖所有基础,否则你无法完全承诺在产品中使用丰富的排版。但对于可变字体,你只需要一个文件,因为变量或生成字体提供无限数量的字母粗细和宽度调整。...乔什·里纳德(Josh Rinard)报道 当Web字体被引入时,响应性是他们缺乏的一个方面。灵活性不足导致易读性问题和设计本身的失调。

    42210

    React19 她来了,她来了,他带着礼物走来了

    ❝一个人是没法被一句话两句话改变的 ❞ 大家好,我是「柒八九」。一个「专注于前端开发技术/Rust及AI应用知识分享」的Coder 前言 xdm,5.1玩的还可以吗?...因为,本着没有调查就没有发言权的态度,我就迟迟没有下笔。 既然,React19我们可以唾手可得了,那高低需要研究一波。 下面,我们就来看看她到底给我带来了啥! 好了,天不早了,干点正事哇。...❞ React 编译器 的核心几乎与 Babel 完全解耦,编译器内核其实就是「旧的 AST 输入,新的 AST 输出」。在后台,编译器使用自定义代码表示和转换管道来执行语义分析。...❞ 与FOIT类似,当使用Web字体时,浏览器可能会「先显示系统默认字体」,然后在字体文件加载完成后,突然将文本样式化为所需的Web字体。这种体验被称为FOUT。...Card 是我们将消费 context 的组件。为此,我们将使用新的 hook use 来消费 context。 衍生一下 其实吧,use的内部实现很简单,就是基于传人的对象类型进行返回数据即可。

    26110

    前端学习自学笔记:day02

    今天是第二天的学习内容笔记,我一般无事都会一直更新下去,直到我前端学的差不多了,我到时候才会转学其他语言,如果在学习中有什么发现,我都会分享上来....type:规定被链接文档的 MIME 类型。 href:被链接的文档的位置] 注意:当某种字体不可用时,你可以让浏览器自动降级到另一种字体。...href代表具体位置 -复习:文件嵌套 例: 注意:当你的a元素没有有链接时,可以使用固定链接,把a元素的href值替换为一个#。 例: a元素也可以把某元素嵌套进来,将其变成一个链接。...例: 中午所学的内容: HTML的style属性: background-color(背景颜色) 例: 注意:旧的背景颜色(bgcolor)不建议使用。...-复习[ font-family (字体样式) 例: color(文本颜色) 例: font-size(文本大小) 例: 注意:旧的设置字体方法(标签)不建议使用。]

    878100

    自定义 Windows PowerShell 和 cmd 的字体

    然而,字体选择界面却始终没办法选择到我们新安装的各种字体。 本文将推荐一款可以为 PowerShell 和 cmd 使用的等宽字体,适合程序员使用。...字体,则它必须是 OEM_CHARSET 如果是给亚洲地区使用,还必须满足这些条件: 如果不是 TrueType 字体,字体名必须是“Terminal” 如果是亚洲的 TrueType 字体,还必须使用亚洲的字符集...这还真不是一般字体能够满足的…… 推荐可用的字体 我找了好几款字体,然而只发现下面两款字体是真正可以在 PowerShell 或 cmd 里面用的: Inziu Iosevka 作者:Belleve...- 微软字体设计师,新中文字体主催 Microsoft YaHei Mono on GitHub 微软为 WSL/Bash on Ubuntu on Windows 设计的字体,PowerShell...▲ 选择字体 ---- 参考资料 Necessary criteria for fonts to be available in a command window 为什么 Windows 下 cmd 和

    7.9K42

    编写模块化CSS:命名空间

    上周,我分享了如何使用BEM创建一个合理的CSS架构。 虽然BEM很棒,但它只是解决方案的一部分。 还有另一部分我还没有提到 —— 命名空间。...在今天的这篇文章中,我想与大家分享一下为什么只用BEM还是不够的,以及如何使用命名空间来弥补一些不足。 为什么BEM不能满足我们 我上周给大家展示的例子很简单。...一些对象包含.o-前缀(甚至是一个类)本身就没有意义,因为它们被使用得太多了。 举一个这样的例子——输入元素: ?...所以我不再多说:) 让我们继续。 “.t”或“.s”——排版类(Typography) 在排版中最好的做法是在网页上只使用少数样式(大小,字体等)。...我刚才在这里说的几乎是我用于实用类的一切。 我从来没有发现有了这些类还有做不好的事。 唷。闲话不说,咱回到工作/玩耍/学习或任何你正在做的事情,所以让我们来回顾一下。

    2.7K70

    chrome 该插件不受支持

    大家好,我是架构君,一个会写代码吟诗的架构师。今天说一说chrome 该插件不受支持[开发者工具怎么用],希望能够帮助大家进步!!!...它是一个简化版的fiddler,功能虽然没有它强大,但是界面胜之,操作性也胜之,还有规范的API,更新也一直在继续。...七、WhatFont   找到网页的字体。开启功能后把鼠标停留在文本上,会弹出该字体名称。所以你可以所以copy你喜欢的字体啦。...子贡见了就对老者说这样打水太累,为什么不自己做一个打水的机器呢?种菜的老人说:“有机械之事者必有机心。机心存与胸,大道不载也”。...其实露珠想说运用工具和偷懒或机心是两回事儿,时代在变迁,人类早就不再是刀耕火种的人类了,如果一直停在旧的时代,跟不到新时代的进步,不学会与时俱进这样只有被历史淘汰。

    1.1K40

    11种最佳编程字体中的哪款适合你?

    有许多帖子和网站比较编程字体,这些文章内容都不错。那么,为什么我在这里重复同一个话题?原因是我老发现自己迷失于数十种字体中,搞不清楚哪一种字体最适合自己。...我使用以下衡量指标对字体进行了排序: 相似的字符是否易于区分,比如0O和1lI 字体样式(线宽和字符宽度/高度)是否易于阅读 以及我个人的偏好 屏幕截图均使用了相同代码片段中的VSCode。...它是DejaVu Sans Mono的衍生字体。自很久以前使用OSX以来,我个人比较喜欢Menaco,但Menlo也是程序员的一个好选择。 ? 补充信息:Menlo不再是macOS中的默认字体。...Droid Sans Mono Droid Sans是为Android开发的,是一种漂亮的字体。然而最大的问题是,它没有斜杠零,所以0和O无法区分。...但愿本文能帮助你为自己的IDE或终端找到新的字体,就像购买一件新的T恤!如果你喜欢本文,敬请推荐!

    4.6K20

    博客重构:极简主义!

    (至繁归于至简)[1] — Leonardo da Vinci 除旧 极简第一步,简化分类,简化标签。你可能注意到,我之前的博客的分类颇为复杂,标签也颇为繁冗。为什么我要设计得如此复杂呢?...而我于去年搭建了一个新的博客,将哲学独立分离了出去,因此这个博客的分类和标签也是时候简化了,分类只有两个:生活、技术,标签则每篇文章不超过 5 个。 极简第二步,页面元素,页面交互。...博客的主体是文章,故除了文章内容,其它的一切都可以不要,只追求极致速度。菜单栏?分类才两个,不要!图片背景?应专注文字、排除干扰,不要!侧栏、返回顶部、动画效果?过多交互以致分散注意力,不要!...字体使用了 Noto Serif SC + EB Garamond,通过 Google Fonts 实现;使用着重号替代粗体,更为美观、优雅;解决了网页中英字体混排导致的痛点——英文符号变全角或中文符号字形不对...其它 改变了本博客的 URL 结构,导致以前的博文链接大量 404(已利用 Netlify 解决,见我的这篇文章)。大量文章重写了,有些文章迁移了,少量文章删除了。为什么会重写呢?

    87830

    vue项目部署的最佳实践

    浏览器请求服务器时,如果缓存时间没到,中间服务器直接返回给浏览器内容,而不必请求源服务器。 private,资源不允许被中间代理服务器缓存。...这段时间用户已请求旧版本index.html的无影响(不会出现文件404,因为新旧版本js/css同时存在),而新访问用户则请求的是新版index.html,访问旧页面用户刷新也会请求新版文件,并且无缓存影响...其他的文件(index.html和static目录下的文件)设置为no-cache,即每次都来服务器检查是否最新。 为什么缓存时间是一个月,刚才不是说设置一年?设置为一年,当然没有任何问题。...不变的文件可以一直使用,有改动的文件,会重新请求,但是有该动的旧文件已经没有用了,由于过期时间是一年,所以不会被删的,一直占用用户的硬盘,系统更新越频繁,无用旧文件越多,占用的存储也越多,这样是不好的(...字体文件是否需要gzip? 网站中常见的图片的格式有jpg(jpeg)、png、gif、webp,这些格式的图片本身已经优化了,所以不再需要gzip。

    1.7K10

    使用StyleGAN创建新脚本

    https://en.wikipedia.org/wiki/Unicode_block 在Unicode联盟中服务了很短的时间。被美国语言学会任命为候选人,专注于代表性不足的语言。...这是65,000个字符中有多少是由Ariel Unicode字体进行某种渲染。尝试使用覆盖范围更广的字体会很有趣,特别是在不再使用的旧脚本和其他字符(如emojis)中。...使用了深度学习AMI,需要安装的唯一附加库是用于从字体生成图像。 这是对styleGAN代码的一个小修改。...只有一种方法,结果不符合期望:希望一些新角色将是彩虹色的,并立即显示来自多个脚本的影响。在反思中,可以看出为什么情况并非如此:训练数据中没有多彩的例子,因此多彩的例子不能说服对抗性的例子。...为什么要生成新角色? 除了有趣的因素,这里有一些实际用例: 识别新脚本的新字符。世界上只有一半的语言采用了剧本。对于语言社区来说,采用前殖民者或入侵者的剧本通常是有争议的。

    1.7K40
    领券