HTML-Web前端之家

HTML

带大家了解下网页中的计量单位：px、pt，em和rem的基础知识
Html4Posted by Web前端之家 2022.09.05views: 347评论:0
谈到网页中的计量单位，我们会想到px、pt，em和rem。今天我们一起来分享下他们的一些基础知识。文本字体大小下表列出了在网页字体默认值为16px时，px和em及网页字体百分比的换算数据。...
Tags: em rem px
CSS：:is、:where 和 :has 伪类选择器如何工作
Html4Posted by Web前端之家 2022.09.04views: 469评论:0
CSS选择器允许您在HTML文档中按类型、属性或位置选择元素。本教程解释了三个新选项——:is()、:where()和:has()。选择器通常用于样式表。以下示例定位所有<p>段落元素并将字体粗细更改为粗体：p { ...
Tags: HTML CSS
IOS中的bug：点击input的时候，无法定位输入信息
Html5Posted by Web前端之家 2022.08.04views: 550评论:0
今天我们分享一个IOS的bug，问题原因：在form表单输入框input里输入的时候，没反应，输入文字也没显示，的确很奇葩。当然在安卓里面是没问题的。我们先来看张图，这张图是在项目中的截图，如下：...
Tags: user-select
CSS伪类：了解根据索引设置元素样式
Html4Posted by Web前端之家 2022.07.27views: 549评论:0
今天来聊聊CSS的基础知识点：CSS伪类。CSS根据元素在文档子树中的位置匹配元素的选择器。这些被称为子索引伪类，因为它们依赖于元素的位置或顺序，而不是其类型、属性或ID。有五个：...
Tags: css
使用 CSS 的 object-fit 和 object-position 属性
Html5Posted by Web前端之家 2022.06.30views: 766评论:0
假设您在CSS中明确指定了图像的宽度。如果宽度以百分比或视口单位指定并且图像的高度设置为auto，则调整浏览器窗口的大小将保持图像的纵横比。但是，有时您的可用空间可能有限，需要限制图像的高度。现在调整浏览器窗口的大小肯定会弄乱它的纵横比。...
Tags: object-fit
Web前端之家：如何在 CSS 中优雅合理使用变量
Html4Posted by Web前端之家 2022.06.07views: 893评论:0
CSS变量（官方称为自定义属性）是用户定义的值，可以在整个代码库中设置一次并多次使用。它们使管理颜色、字体、大小和动画值变得更加容易，并确保Web应用程序的一致性。...
Tags: css css变量
带您详细了解CSS中writing-mode的属性以及应用
Html4Posted by Web前端之家 2022.05.30views: 1431评论:0
谈到数字排列，我们经常会设计师排文案的时候，很漂亮，文字可以按照各种方向去设计。其实在前端开发的技术中，我们也可以这样去实现的。今天我们一起学下如何用代码去实现文字在不同方向上的排版。...
Tags: html css writing-mode
下一代图像格式“WebP”是什么？
Html5Posted by Web前端之家 2022.05.10views: 1348评论:0
你听说过一种叫做WebP的图像格式吗？WebP是Google开发的一种图像格式。文件扩展名为“.webp”。到目前为止，“JPEG”、“GIF”和“PNG”一直是WEB图像的主流，但Webpy是可以取代所有这些的下一代格式。...
Tags: WebP
HTML：如何去掉input输入框线条以及改变placeholder颜色
Html4Posted by Web前端之家 2022.04.02views: 2498评论:0
今天来分享一个基础的HTML&CSS小应用：如何去掉input输入框线条以及改变placeholder颜色。去掉input输入框线条先看效果图：...
Tags: html css
CSS3 2D转换：分享常用的5种【translate()、rotate()、scale()、skew()、matrix()】实现方式
Html5Posted by Web前端之家 2021.12.24views: 2382评论:0
在平时的项目中，经常会对元素进行CSS2D转换，从而达到预期的效果。举一个很简单的例子：一个向右的箭头，我们在项目中很多地方会用到，并且箭头的方向或者大小可能不同，如果每个箭头都去弄一个图或者写一套样式，就很麻烦了。用上了2D转换后，就方便很多了，一套样式，...
Tags: css3 css 2d转换