![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 63
BenjaminShih
talk is cheap, show me the code
展开
-
关于display: inline-block 默认空白间距的问题
问题描述废话不多说,直接上代码html<div class="box1"></div><div class="box2"></div><div class="box3"></div>css.box1,.box2,.box3 { width: 20px; height: 20px; background-color: #E11; display: inline-block原创 2016-08-06 17:04:30 · 410 阅读 · 0 评论 -
移动端列表表头fix布局的改进
以前在做PC端开发的时候,经常会使用position: fix来做一些固定于窗口位置的一些页面功能,比如全局居中的提示框和模态框,或者是页头页脚等等~但是在移动端做的时候长了就会发现,我们要在一些场合避免使用fix布局,就目前来看,主要有以下两个原因: 1. 公司项目曾经使用h5套壳app,在ios上发现,如果列表页中使用fix固表头,那么有有一定几率会造成页面元素 无法点击甚至卡死的现象原创 2017-10-18 09:46:45 · 1305 阅读 · 0 评论 -
css requestAnimationFrame
绘制动画,一般有两个选择:js脚本 setTimeout和setIntervalcss3 transition和animation属性这两个方法有各自的局限性:js脚本实现动画的局限性: 即使向 setTimeout和setInterval 传递ms级的参数,由于js单线程的关系,可能会引发堵塞,不能达到高精度的准确性 没有对动画的循环机制进行优化,只是以一个大致的时间间隔循环,原创 2017-07-27 14:16:42 · 658 阅读 · 0 评论 -
css 小技巧
使用CSS复位CSS复位可以在不同的浏览器上保持一致的样式风格。您可以使用CSS reset 库Normalize等,也可以使用一个更简化的复位方法:* { box-sizing: border-box; margin: 0; padding: 0;}现在元素的 margin 和 padding 已为0,box-sizing可以管理您的CSS盒模型布局。注意:如果你遵循接下来继承 bo原创 2017-08-04 12:46:12 · 393 阅读 · 0 评论 -
css3 花瓣按钮
<template> <div class="pin-star"> <input type="checkbox" class="pin-leaf-checkbox"> <div class="pin-star-leaf"> </div> <div class="pin-star-leaf"> </div> <div class="pin-star-原创 2017-08-03 13:44:02 · 658 阅读 · 0 评论 -
图片懒加载与预加载
图片懒加载暂时不设置图片的src属性,而是将图片的url隐藏起来,比如先写在data-src里面,等某些事件触发的时候(比如滚动到底部,点击加载图片)再将图片真实的url放进src属性里面,从而实现图片的延迟加载图片预加载在一些需要展示大量图片的网站,实现图片的提前加载。从而提升用户体验。常用的方式有两种,一种是隐藏在css的background的url属性里面,一种是通过javascript的Im原创 2017-08-02 16:26:43 · 374 阅读 · 0 评论 -
css3 checkbox动画
<template> <div class="container"> <div class="checkbox"> <input id="checkbox-1" name="checkbox" type="checkbox" checked> <label for="checkbox-1" class="checkbox-label">Checked</label原创 2017-08-02 10:35:07 · 469 阅读 · 2 评论 -
css3 翻书动画
<template> <div class="book"> 清风不识字,何必乱翻书 <ul> <li class="ani1"></li><!-- --><li></li><!-- --><li class="ani2"></li> </ul> </div></template><script type="text/babel">原创 2017-08-01 17:16:30 · 1450 阅读 · 4 评论 -
判断元素是否在可视区域内
getBoundingClientRect() function isElementInViewport (el, offset = 0) { const box = el.getBoundingClientRect(), top = (box.top >= 0), left = (box.left >= 0),原创 2017-08-01 13:36:08 · 9209 阅读 · 0 评论 -
文本截断省略号
纯CSS实现省略号只要支持-webkit-line-clamp和float即可原理是根据浮动文档流和line-clamp属性的特点进行溢出隐藏和视图内显示(参考原文)<!DOCTYPE html><html><body><style>/* * 行高 h * 最大行数 n * ...更多容器的宽 w * 字号 f */@-webkit-keyframes width-change {0%原创 2017-08-07 16:05:32 · 455 阅读 · 0 评论 -
flexbox(下)
接上篇简单回顾采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。上篇介绍设置在容器上的属性,本篇介绍设置在项目上的。属性列表设置在项目上的属性order – 决定flex元素的顺序align-self – 自身对齐交叉轴,覆盖父元素设置的align-items fl原创 2017-06-27 13:45:47 · 240 阅读 · 0 评论 -
flexbox(上)
flexbox是什么Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。抛开浏览器兼容性,对于移动端h5开发,简直是布局的神兵利器采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。属性列表关于flex布局,有12个属性, 其中6个设置在容原创 2017-06-27 10:27:25 · 1101 阅读 · 0 评论 -
css单位 % em rem vw vh vmin vmax pt ch ex
px像素 (计算机屏幕上的一个点),项目开发中特别是移动端开发我经常会使用webpack将px转化为rem来适应屏幕宽度%百分比,理解为和父元素字符的相对大小,但是有几个注意点: 1. 对于普通元素,相对于父元素大小 2. 对于position: absolute元素,相对于已经定位的父元素(position: relative) 3. 对于position: fixed,相对于浏览器的vie原创 2017-07-14 16:29:57 · 560 阅读 · 0 评论 -
浏览器重排和重绘
重排浏览器下载完页面中的所有组件(HTML、JavaScript、CSS、图片)之后会解析生成两个内部数据结构(DOM树和渲染树),DOM树表示页面结构,渲染树表示DOM节点如何显示。重排是DOM元素的几何属性变化,DOM树的结构变化,渲染树需要重新计算。重绘重绘是一个元素外观的改变所触发的浏览器行为,例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制,使元原创 2017-06-08 11:16:18 · 2919 阅读 · 0 评论 -
加入购物车抛物线效果的基本实现(一)
写在前面最近天气刚刚转热,心想应该淘点春装卖卖骚了,然后某宝逛的时候发现其加入购物车的动画效果不错,既完善了交互,又有功能导向作用,用户体验杠杠滴~作为一名前端汪,也想自己动手实现下此类酷炫的效果。原创 2017-02-21 13:02:49 · 3714 阅读 · 0 评论 -
CSS中BFC的应用
前言说起BFC,一些不熟悉的童鞋往往会有两种情况:1. 用了BFC但是不知道有这回事,2.请教过大佬听过BFC大名然后CV了一段overflow: hidden解决了问题然后不刨根问底,笔者曾经也是其中的一员。思维不清晰肿么办?问谷歌娘呗~看了好多文章,知道自己没有过目不忘的本事,还是觉得要自己动手写写,一来加深印象,二来方便日后追溯,故撰此文。原创 2017-02-20 09:29:00 · 1337 阅读 · 0 评论 -
css居中
一.水平居中1.水平居中单个元素水平居中单个元素应该是最简单的,行内元素容器设置text-align: center, 块级元素自身设置magin:0原创 2017-01-04 15:03:20 · 363 阅读 · 0 评论 -
css3实现高度从固定到自动的过渡动画
用 height 是不行的。不过,用 max-height 和 min-height 可以实现同等效果。.box{ max-height: 120px; min-height: 120px; overflow: hidden; transition: max-height ease-out 0.2s; } .box:hover{ max-heig原创 2017-11-02 10:55:15 · 12248 阅读 · 0 评论