css
15篇文章 · 0订阅
  • CSS实现水平垂直居中的10种方式
    划重点，这是一道面试必考题，很多面试官都喜欢问这个问题，我就被问过好几次了 要实现上图的效果看似很简单，实则暗藏玄机，本文总结了一下CSS实现水平垂直居中的方式大概有下面这些，本文将逐一介绍一下，我将
    React.js
  • rem布局解析
    移动端的屏幕大小各异,尤其是安卓机,千奇百怪,各种尺寸的机型都有,而且有1倍屏,2倍屏，3倍屏之分，作为精益求精的前端，我们希望找到一种完美适配各种机型的方案。rem是现在主流的移动端自适应布局方案，本文主要介绍了rem布局的原理和通用方案 首先说一下，我们想要达到的自适应效果…
    CSS HTML
  • 彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index
    最近，在项目中遇到一个关于CSS中元素z-index属性的问题，具体问题不太好描述，总结起来就是当给元素和父元素色设置position属性和z-index相关属性后，页面上渲染的元素层级结果和我预想的不一样。根据自己之前的理解，也没找到一个合理的解释。我知道，肯定是我对相关属性…
    HTML CSS
    彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index
  • CSS 常用技巧
    相信大家在写css属性的时候，会遇到一些问题，比如说：垂直对齐，垂直居中，背景渐变动画，表格宽度自适应，模糊文本，样式重置，清除浮动，通用媒体查询，自定义选择文本，强制出现滚动条，固定头部和页脚，自己在网上看到的一篇关于css的文章，感觉这里边一些常用的css代码片段对大家很有…
    CSS 前端 图片资源
  • 愈发熟练的 CSS 技巧
    rem+simple-flexible适配方案简单解析rem相对于根元素<html>的font-size的大小来计算坐作为一个单位；simple-flexible是根据手淘团队lib-flexible
    CSS JavaScript 前端
  • 彻底搞懂word-break、word-wrap、white-space
    white-space、word-break、word-wrap（overflow-wrap）估计是css里最基本却又容易让人迷惑的三个属性了，估计很多人都有把它们搞混或用错的经历。必须系统整理一下，今天我们就把这三个属性彻底搞清楚！ 可以看到，nbsp;和</br>可以正常发…
    CSS 前端
    彻底搞懂word-break、word-wrap、white-space
  • 移动端使用 rem 单位时 css sprites 定位问题
    优点：1. 完整显示图标；2. 减少请求数量； 缺点：1. 色彩丰富的图片转成 base64 效果不好；2. 会增大图片提及，相当于用下载时间换取请求时间； 好了，这篇分享就说到这里，初次写文章，语句和方式难免有瑕疵，望各位看客老爷见谅。
    图片资源 Icon CSS
  • 用canvas画一个进度盘
    工作的时候收到了UI的设计图，有一个类似进度盘（话说我也不大清楚官方叫法是啥）的效果。。就想起了荒废了好久的canvas。确认过效果，就用canvas来玩一下吧。。 确认了需要绘制的部分起码有6块。 接下来我们可以让进度条动起来。 经过的路程，在这就是角度degree，因为是进…
    前端 Canvas
  • 开始CSS模块 | CSS-Tricks
    这里不止一种方法来让CSS模块与JavaScript模板、CSS文件或者构建步骤运行起来。这篇文章作为CSS模块系列文章的一部分，我们学习一种方法。本文的目的就是开始一个CSS模块项目并且运行起来。 Part 1: 什么是CSS模块以及你为什么需要它? Part 2: 如何开始…
    前端 CSS
    开始CSS模块 | CSS-Tricks
  • 【建议收藏】90%的前端都会踩的坑，你中了吗？
    移动开发时代，前端同学刚刚送别了让人头秃的IE浏览器，却发现憧憬已久的移动互联网时代并不是想象中那般美好。各种棘手的系统兼容问题和浏览器兼容问题怎么也让人高兴不起来。作为一名工作不足3年的前端程序媛，始终相信好记性不如烂笔头。每次在项目开发过程中踩到的坑，都习惯性地记录了下来。…
    Vue.js CSS
    【建议收藏】90%的前端都会踩的坑，你中了吗？