首先 , 设置固定定位 , 固定定位盒子始终显示在浏览器中指定的位置 , 与父容器或其它容器无关 ;
大家都知道wordpress过于庞大,到了一定的访问量之后就有亿点点的卡顿，加载时间特别感人。但是，WP Fastest Cache这时候就有点用，设置也比较简单，并且拥有汉化，可以切换多种语言。插件有付费版，但是我觉得没有什么必要，免费版功能很全，已经满足缓存需求了。
Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。
在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素边界；而在竖直方向和兄弟元素依次排列，不能并排。使用浮动方式后，块级元素的表现就会不同。简单的说多个不设宽度的块级的元素可以横向排列。
老马初始学习视口的概念的时候，看了很多的文章，看来很多的资料，鲜有人能把这个东西讲的非常透彻的。老马接下来就从初学者能看懂的角度去讲解视口和适配的方案。 1. 关于屏幕 1.1 屏幕尺寸 设备屏幕尺寸是指屏幕的对角线长度。比如：iphone6/7是4.7寸，iphone6/7p是5.5寸。 1英寸 = 2.54厘米 3.5in = 3.5*2.54cm = 8.89cm 4.0in = 4.0*2.54cm = 10.16cm 4.8in = 4.8*2.54cm = 12.192cm 5.0in = 5.
1.点击样式闪动 Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。
一些浏览器（包括Chrome）对小于12px的文字大小应用了最小字体限制，以提高可读性和避免模糊。但是，你可以使用CSS中的一些技术来覆盖这个限制，以使Chrome支持小于12px的文字。以下是一种常用的方法：
老马初始学习视口的概念的时候，看了很多的文章，看来很多的资料，鲜有人能把这个东西讲的非常透彻的。老马接下来就从初学者能看懂的角度去讲解视口和适配的方案。
移动前端中常说的 viewport （视口）就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip （ device-independent pixel 设备逻辑像素 ）和 CSS 像素之间的关系。这里首先了解以下几个概念。
本文是摘录整理了移动端常见的一些bug以及解决方案，第一篇，后面还会有持续的文章更新整理。
大家好，本篇文章小编将和大家一起学习 4 个 Hover 相关的动效案例，这 4 个案例分别是 Anchors（链接锚点）、Tooltips（提示层）、Card Content（内容卡片）、Button（按钮）相关的 Hover 效果，由于篇幅原因，本文只介绍前两个案例。
如果要 将一个 块级元素 的 盒子模型 设置为 水平居中 样式 , 需要设置以下两项 :
手机开启网页很吃手机效能和网络状况，前端工程师一开始就以手机版为优先，可以让HTML一开始载入，使用最少的效能快速载入网页。当开始制作桌面版时，只会少许跑版，做适当微调即可。
在调试模式下 , 该父容器的尺寸为 390 x 44 像素 , 该父容器的高度是 44 像素 ;
小程序日益增多的情况下，UI风格显得越来越重要，在页面中如果能让TabBar个性化一点，加一些小交互，用户体验会大大提升。由于小程序对svg不太友好，所以我们尽量使用css动画进行实现。
在上一篇博客中实现的搜索栏 , 使用 固定定位 设置该搜索栏位置 , 不管网页如何滚动 , 最上方始终显示该搜索栏 ;
所见不一定即所得 眼睛是心灵的窗户，也是蒙蔽你的一种途径。 假设，我给你一张图片，你觉得肉眼可以观察到全部的细节吗？ 屏幕上一张清晰的图片 肉眼在屏幕上看到图片的清晰度由三个因素决定，一是图片像素本
对于前端切图,相信很多小伙伴都不会陌生,但是对于新手,有时却很棘手,想着我本是来写代码的,你给我一张图干嘛的, 有时,或许你总奢望着UI设计师,把所有的图都给你切好,你只管撸码的,然而事实并非如此,有时候呢,设计师给我们的图,也并非是一成不变,往往也需要作一些调整,更改,完美的将UI设计图,进行还原实现产品经理的意图,是前端小伙伴职责所在,那么熟练简单的ps操作,就很重要了,虽然我们不是设计者,但是我们是具体的实现者,实现从0到1的过程,至于前端ps操作,绝大多数工作是简单的切图(抠图),测量,图片简单的处理,将图片利用web技术进行填充布局实现静态页面展现就可以了,至于,ps软件,我也只是停留在简单的使用,有时候,在一些群里,看到一些小伙伴,对于切图,有些畏惧,打开ps软件,无从下手,有时候呢,即使自己曾今,ps技术玩的很溜,但是只要一段时间没有去接触,就会很陌生,一些习以为常的技巧,忘得一干二净,非常苦恼,您将在本篇学会一些常用的奇淫绝技,完全可以胜任ps切图工作,今天,就我的学习和使用,跟大家分享一下自己的学习心得,如果你已经是老司机了,可以直接忽略,欢迎路过的老师,多提意见和指正
本文介绍了移动端网页开发的一些基础概念，包括HTML、CSS、JavaScript，以及用于移动开发的响应式布局和自适应图片等。同时，文章还探讨了如何通过meta标签和viewport来优化移动端网页的展示效果。最后，还介绍了一些移动端网页开发中常见的问题和解决方法。
简单来说就是在开发中使用一些浏览器私有的方法，使得web页面拥有一些native的功能。
本文主要介绍了在腾讯云中设计器导出SVG的注意事项和优化点，包括导出设置、命名规范、分层、分组、使用画板、导出图片、内联样式、保留小数点、缩小和响应式设置以及字体和图像的优化。此外，还提供了关于Sketch和AI导出的SVG的代码示例和注意事项。
CSS 长度是距离值的一种。CSS 百分比与长度类似，但区别在于它们总是页面中其他内容的一部分，具体取决于它们与什么属性一起使用。长度可以是绝对值，也可以是相对值。
web前端 —— 移动端知识的一些总结 个人在移动端的一些总结归纳，有新的知识点会一直更新 一.css部分 1.meta标签 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/> 移动端加上这个标签才是真正的自适应，不加的话，假如你把一个980px宽度(手机端常规是980)的PC网页 放在手机上显示，倒也能正常显示不出现滚动条，不过是移动设备对页面 做了缩小优化，所以字体等都相应
我们来看这样一个页面，此时我在PC端时，我p标签中字体大小是12px，那我们在做移动端响应式变化时，文字肯定也要相对缩小一些，所以呢，我就将他设置为10px。
非布局样式-字体 * 字体 字重 颜色 大小 行高 和文字相关的一些 * 背景 边框 和盒子相关的 * 滚动 换行 跟 页面 和 布局有关 * 粗体 斜体 下划线 文字装饰性的样式 * 其它 * 字体族(font-family) -- serif 衬线字体：字体周围有装饰性的弯弯钩钩(比如 宋体) -- sans-serif 非衬线字体：字体笔画的开始和结束 都非常规则。如 屏幕上的文字(比如 黑体) -- monospace 等宽字体
最近我参与实施的两个项目中，一个页面交互复杂，而另一个相对传统，两个项目相比之下凸显出了页面布局样式的时间占比不可忽视，使用了弹性布局代码量精简了不少。
尽管一些网页设计工具为按钮等元素指定了 CSS 高度值，但设置高度或最大高度实际上可能会违反 WCAG 2.2 Success Criterion 1.4.4 Resize Text.
flex弹性布局已经是本人开发css布局的第一首选了，各种布局都能够非常轻松的实现，只是一直只使用两个属性justify-content、align-items。当我深入学习了一下各种属性之后，发现之前的用法有点没眼看。
根据用户输入的文章内容撰写摘要总结。
1. CSS3动画 1.1 过渡的缺点 transition的优点在于简单易用，但是它有几个很大的局限。 transition需要事件触发，所以没法在网页加载时自动发生。 transition是一次性的，不能重复发生，除非一再触发。 transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有一个开始状态和结束状态。 一条transition规则，只能定义一个属性的变化，不能控制多个属性。 CSS Animation就是为了解决这些问题而提出的。 .box { /* 分别设置多个属性
一篇文章是否好看，无非在于两方面，第一个就是文章本身的内容，另一个就是文章显示的排版布局。潜行者m博客自创建以来，也已经过去了近两年的时间，这其中积攒了很多在 WordPress 写作的经验，特别是在文字排版这块。回首观看，早期的文章质量比现在的要差远了，本文就是总结一下对于使用 WordPress 写作文章排版的经验。
本文主要介绍了在移动端网页开发中，如何利用web font和自定义字体实现字体图标。首先介绍了字体图标的原理和分类，然后介绍了如何在移动端网页中使用字体图标。最后列举了几个常用的字体图标工具，以及如何在这些工具中使用自定义字体。
在IE4开始微软就已经开始支持在线字体，不过没有流行起来，直到CSS3新增加了font-face模块，正式纳入了web开发的标准。也渐渐流行起来而且发掘了很多其他应用。 1. 为什么要用在线字体 问题 精灵图（雪碧图）用作背景的时候不能轻易的放大缩小。 低质量的位图在高清设备上放大后会有难看的锯齿，无法满足响应式页面的开发需求 在线字体带来的革命： 在线字体本质就是文字，但是也可是像图形的文字。节省了带宽（相比图片）字体文件大小也不大（一般几百k）。 在线字体本身是矢量的，放大缩小都不会失真 可以灵活的通过
现在html5移动端非常的火，很多小伙伴想学习又不知道从哪开端学起，今天就分享一下前html5该怎么入门。 首先还是给大家推荐一个学习氛围很好的裙，我自己的，想要一起学习web前端的可以加裙六一四三一五六五七，有各种资料和开发工具包满足大家，每天更新最新行情 1、css3新增挑选器 结构挑选器: :nth-child(n) 父元素下的第n个子元素 :nth-child(odd)奇数子元素(同nth-child(2n-1)) :nth-child(even)偶数子元素(同nth-child(2n)) :n
npm install之后（有时候项目会自动生成，就无需npm install了）， package.json 是 记录第三方库依赖 的目录， node_modules 存放 第三方库依赖模块：
地址:https://github.com/lindelof/power-mode-input
Flex 布局有时候会用到，但是始终分不清楚其中的部分属性及其含义，所以用这篇博客专门总结一下 Flex 布局。
曾几何时，我们都在黑框框下度过，我们受够了被黑框框支配的恐惧，想要跳出去，去看看外面，我们听够了类似于界面只是皮肤，背后的代码才是王道的话语，当你觉得黑框框已经满足不了你的时候，我觉得，你是时候做出一些改变了。如果你是学习C++的，我想qt可以作为你进入界面的一条选择，这篇文章，我们不讲函数，不讲类，总之就是不讲代码，我们来讲讲代码之外，聊一聊关于怎么布局，怎么用qt做出一个漂亮的界面❤️。 我在一篇讲布局博文下面看到这样一句评论：为什么非要布局，直接自己摆不是更好吗？我相信很多刚接触布局的同学，都有这种想法，当然，当初的我和你们拥有一样的想法，但是现在，这种想法我不敢再有。之所以会说出这句话，要么是刚接触界面，要么是随手点了进来，阿巴阿巴看完评论了一句。刚开始接触界面，布局确实不是那么重要，我们的软件（都称不上是软件，就是一个空壳子）一共也没几个组件，两个按钮？三个文本框？刚接触的时候，你是否考虑过软件大小随意变化的问题，你是否考虑过后期添加组件，随着我们的软件越来越庞大，让组件自动分配空间显的尤为重要。
原文：A tale of two viewports — part two 译者：nzbin 在这个迷你系列中，我将解释 viewports 和各种重要元素的宽度是如何工作的，比如说 <html> 元素，窗口以及屏幕。 我们将在本页讨论移动浏览器。如果你是刚刚接触移动端，我建议你首先阅读关于桌面浏览器的第一部分。这会让你在熟悉的环境中循序渐进。 移动浏览器的问题 手机浏览器与桌面浏览器的最大不同就是屏幕尺寸。对于一个基于桌面优化的网站，移动浏览器的显示效果明显不如桌面浏览器，要么缩小后
今天，我们又开辟了一个新的篇幅 --「前端面试」。即是把一些平时常用的概念和工具方法整理和罗列，也算是一种变向的「未雨绸缪」。
CSS 是层叠样式表（Cascading Style Sheets）的简写，它是一种用于定义网页和网页应用程序外观的标准格式语言。
这个元素几乎不需要介绍了。它是1993年在Netscape（当时叫“Mosaic”）发布的，并且在1995年加入了HTML的规范，一直在Web平台中扮演着一个简单但强大的角色。开发人员通过src属性添加一个图片文件，并通过alt属性提供文字代替，以防图片无法显示或者辅助技术需要替代内容。从那时起，浏览器的工作只有一件事：获取图片数据，然后尽快渲染。
meta标签写在head标签中，是一个辅助标签，根据属性不一样所表示的含义也不一样，常用的有：
虽然网站的美感很重要，但它的内容和加载速度会让人们回访。WordPress 为用户提供了一个复杂的插件和主题工具箱，可以快速创建他们自己的自定义网站。
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display:flex; display:inline-flex; } Webkit内核的浏览器，必须加上-webkit前缀 .box{ display:-webkit-flex; display: flex; } 解决兼容性问题 .box{ display:-webkit-flex;/*Chrome,Safari,Opera*/ display:-
Excel 作为办公软件中使用最频繁的产品之一，是我们办公活动中必不可缺的一环。如果我们的系统中能够集成 Excel，相比会是我们一大亮点。
性能在Web应用程序中起着至关重要的作用，甚至谷歌也很在意其查询性能。不要因为一个几KB的文件只需要1毫秒的下载时间就不去重视，因为涉及性能时每个毫秒都需要去关注。最好能优化、压缩和缓存一切。
个人认为 weui-flex 在小程序布局方面发挥了重大的作用。为开发人员提供了极其便利的布局环境，尤其对于我们我种代码怪来说，前端布局很多时候是有一些困难的，但有了weui-flex页面布局从此不在是问题 。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
