HTML、CSS
关注
分享
扫一扫
文章平均质量分 53
huangpb0624
这个作者很懒，什么都没留下…
展开
-
input 的 placeholder 样式
这个伪元素可以改变 input、textarea 占位文本的样式。原创 2023-09-14 21:58:10 · 3082 阅读 · 0 评论 -
幽灵空白节点
图片下面为什么会有空白间隙呢？因为内联元素默认都是和 a 的下边缘基线对齐，基线和底部是有一段距离的，所以图片下面有一段间隙。为什么 div 内只有一张图片，没有别的内联元素，图片底部也会有空白间隙呢？在 HTML5 规范中有这样一句话：每个行框盒子都以一个具有元素的字体和行高属性的零宽度行内框开始。我们称这个假想的盒子为"支柱"。就是说每个行框盒子前面有一个“空白节点”。原创 2023-04-18 23:23:39 · 836 阅读 · 0 评论 -
行内元素之间出现空白间隙及解决办法
这里的行内元素包括display为inline和的元素。原创 2023-04-17 22:39:37 · 1268 阅读 · 0 评论 -
css样式中的百分比都是相对于谁的？
1. 绝对定位的 top、leftposition: absolute;top: 50%;left: 50%;top 和 left 的百分比是分别根据它相对的祖先元素的高度和宽度来计算的。2. 固定定位的 top、leftposition: fixed;top: 50%;left: 50%;top 和 left 的百分比是分别根据浏览器视口的高度和宽度来计算的。3. translateYtransform: translateY(-50%);translateY原创 2022-01-04 23:51:07 · 3994 阅读 · 0 评论 -
用 @font-face 实现自定义字体
目录一、语法二、字体格式三、实战使用四、各浏览器兼容五、用 unicode-range 指定字体适用范围1. unicode-range的值和语法2. unicode-range的常用值六、字体压缩参考文章一、语法@font-face { font-family: <fontFamily>; /* 自定义字体名称; */ s...原创 2020-02-09 22:03:05 · 2452 阅读 · 0 评论 -
iconfont 的使用方法
iconfont 常用的方法有两种：一种是直接下载到本地，另一种是使用远程链接。直接下载到本地把 iconfont 下载到本地，然后把整个文件夹放到自己的项目中。iconfont 有三种引用方式：Unicode，Font class，Symbol。Unicode 引用Unicode 是字体在网页端最原始的应用方式，特点是：兼容性最好，支持 IE6+，及所有现代浏览器。...原创 2020-01-02 23:36:02 · 2772 阅读 · 0 评论 -
CSS 中常用单位大全
1. pxpx 是图像显示的基本单元，是 viewport 像素，是相对单位。同样都是 1px，在不同设备上的显示有可能是不一样的。2. remrem 是相对于根元素 <html> 的 font-size 来计算的，比如说你设置了1.2rem，根元素的font-size是100px，那么这个元素动态算出来的px数就是120px。不同宽度，设置不同px，这样就可以适配所有宽度...原创 2019-04-16 22:57:16 · 1552 阅读 · 0 评论 -
物理像素，逻辑像素，dpr 傻傻分不清楚
物理像素物理像素（分辨率）是指设备屏幕实际拥有的像素点。比如iPhone 6的屏幕在宽度方向有750个像素点，高度方向有1334个像素点，所以iPhone 6 总共有750*1334个物理像素。同一个设备的物理像素是固定的，这是厂商在出厂时就设置好了的。逻辑像素逻辑像素是一个抽象概念。各种设备：手机，平板，笔记本等逻辑像素。手机：3xx~4xx（短边）之间 平板：10寸平...原创 2019-04-16 22:08:05 · 10114 阅读 · 2 评论 -
CSS Modules
什么是CSS Modules？官方的介绍是：所有的 class 的名称和动画的名称默认属于本地作用域的 CSS 文件。所以 CSS Modules 不是一个官方的规范，也不是浏览器的一种机制，它是一种构建步骤中的一个进程。（构建通常需要 webpack 或者 browserify 的帮助）。通过构建工具的帮助，可以将 class 的名字或者选择器的名字作用域化。（类似命名空间化）。...原创 2019-02-18 22:54:21 · 548 阅读 · 0 评论 -
CSS与网络性能
CSS 是页面渲染的关键因素之一，（当页面存在外链 CSS 时，）浏览器会等待全部的 CSS 下载及解析完成后再渲染页面。关键路径上的任何延迟都会影响首屏时间，因而我们需要尽快地将 CSS 传输到用户的设备，否则，（在页面渲染之前，）用户只能看到一个空白的屏幕。最大的问题是什么？广义而言，CSS 是（渲染）性能的关键，这是由于： 浏览器直到渲染树构建完成后才会渲染页面； 渲...转载 2018-11-26 22:09:30 · 256 阅读 · 0 评论 -
html 常用 meta
1.设置编码信息ml;Charset=utf-8"/>2.设置语言3.设置重定向4.设置缓存时间5.不使用缓存6.设置关键字7.设置描述信息8.设置对搜索引擎抓取9.设置可视区域10.禁用手机自带的效果11.让网页自动调用双核浏览器的极速模原创 2016-11-01 13:47:22 · 545 阅读 · 0 评论 -
【HTML5】Audio/Video全解
一、标签解读标签属性 audio id="media" src="http://www.abc.com/test.mp3" controls>audio> src：音乐的URL （source标签在src属性不存在时使用）preload：预加载（none、metadata、auto。如果不使用此属性，默认为auto。） autoplay：自动播放转载 2016-11-02 10:21:58 · 2507 阅读 · 0 评论 -
自定义HTML5 Video 标签
Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中有一个相同的Html5视频控件而不受默认视频控件的控制. 实际上,自定义视频控件并不困难.本文将告诉你如何用jQuery自定义视频控件,希望对你有用! DEMO转载 2017-08-23 10:56:40 · 2472 阅读 · 0 评论 -
三种方法使图片变成灰色（前端技术）
1、CSS Filter使用CSS过滤器属性可能是最简单的方法把图像变成灰度。以往,IE浏览器有一个专有的CSS属性称为过滤应用自定义效果包括灰度。现在,过滤器属性是CSS3规范的一部分,并支持在一些浏览器,Firefox、Chrome和Safari。以前,我们也提到Webkit过滤器,它不仅将图像变成灰色也可以变成褐色和模糊效果。添加如下CSS样式可以将图像变成灰色img {转载 2017-03-03 13:40:14 · 36591 阅读 · 0 评论 -
实现元素的居中对齐
1、水平居中Element 的 Dialog 组件就是这样实现的。利用margin 水平位置 auto 属性。<template> <div class="body"> <div class="content"></div> </div></template><style>.body { width: 100%; height: 100%;}.content { m.原创 2017-02-10 15:17:05 · 2913 阅读 · 0 评论 -
浅谈 white-space, word-wrap, word-break,强制换行的区别
一、White-space white-space ，规定如何处理元素中的空白和遇到边界如何换行。属于 CSS1 ，兼容性好，所有浏览器都支持。 white-space: normal | pre | nowrap | pre-wrap | pre-line | inherit ; normal: 默认。合并空白符。多个空格和换行合并为一个空格。中文或单词...原创 2017-06-21 13:46:56 · 1234 阅读 · 0 评论 -
用CSS实现超出的文字显示省略号
方式一（单行出现省略号）这里用到了 text-overflow 属性。先简单介绍下text-overflow：规定文本超出边界时的显示效果。属于CSS3 ，所有主流浏览器支持。 text-overflow: clip | ellipsis | string ; clip: 超出边界部分直接切掉，可以直接用 overfl...原创 2017-08-15 23:14:31 · 7412 阅读 · 0 评论 -
Flex 布局教程：实例篇
你会看到，不管是什么布局，Flex往往都可以几行命令搞定。我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。一、骰子的布局骰子的一面，最多可以放置9个点。下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo转载 2017-10-12 10:49:21 · 253 阅读 · 0 评论 -
Flex 布局教程：语法篇
网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这转载 2017-10-12 11:13:43 · 226 阅读 · 0 评论 -
Mac 安装 Sass 和使用
安装rubyMac 的 OS X 系统自带 Ruby，所以 Mac 这步就可以跳过。安装sass$ gem install sass如果出现permitted问题通常是权限问题，先尝试下面$ sudo gem install sass如果安装无限等待尝试下面替换RubyGems镜像 $ gem sources --remove https://rubygems.org///...原创 2018-02-07 15:14:54 · 3809 阅读 · 0 评论 -
纯CSS实现隐藏滚动条但仍具有滚动的效果
移动端移动端页面只要兼容 Chrome 和 Safari 就够了，所以可以使用自定义滚动条的伪类选择器 ::-webkit-scrollbar 来隐藏滚动条。 .container::-webkit-scrollbar { display: none; }PC 端PC 端对兼容性的要求相对来说要高一点，所有可以换一种方法，大致思路就是在内容div外面包一个父容器div，设置 over...原创 2018-02-22 11:39:01 · 24882 阅读 · 3 评论 -
自定义浏览器滚动条样式
转载自：https://www.lyblog.net/detail/314.html自定义IE浏览器滚动条样式追溯浏览器对滚动条的自定义，恐怕最早的就是IE浏览器了（好像最开始支持的版本是IE5.5）。下面列出了多个版本的支持性况：滚动条样式支持情况支持浏览器版本可否继承描述scrollbar-3dlight-colorIE特有属性IE5.5+y设置滚动框的和滚动条箭头左上边缘的颜色scrollb...转载 2018-02-23 09:53:16 · 247 阅读 · 0 评论 -
用CSS3的clip-path样式进行图片的裁剪
1.兼容性不支持IE和Firefox，支持webkit浏览器。注意，在现代浏览器中需要使用-webkit-前缀。2.使用方法1.裁剪三角形元素的左上角为（0 0）；polygon裁剪多边形。.clipClass{-webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);}2.裁剪圆形创建圆形，需要给原创 2016-10-09 14:30:30 · 7528 阅读 · 1 评论