随笔分类 - CSS
摘要：css翻牌效果在一些活动页面使用的还是比较多的，目前网上大部分的方案都是使用 backface-visibility 等复杂且兼容性差的方案，本文介绍一种非常简单的方案。以扑克牌的翻转为例,如果事先准备好下面的两张图片 实现图片的翻转很简单,沿Y轴翻转180度的同时更换背景图片即可 但是直接翻转18
阅读全文
摘要：我在开发中使用canvas的机会不是很多，但是第一次实际使用中就遇到了问题，“很久很久以前，我自己画了一个雷达图，线宽都是1像素,但是显示效果不如期望，这才发现canvas中的画线还是有坑的”，对比一下两个图，可以发现下图比较清晰。我们先画一个线宽为1像素的线，代码和显示效果如下： const ctx = document.getElementById(canvas).getContext(...
阅读全文
摘要：很久以前,有面试官问过我如何实现"🎲"六面的布局,要求不能有多余的标签,不能使用定位,可以使用flex,当时觉得不添加标签的情况下不可能实现,今天心血来潮,试了一下,发现骰子每面长宽固定,点的大小固定的情况下,还是能实现的. ...
阅读全文
摘要：CSS中大部分属性值都有对应的量词单位，常见的如描述盒模型尺寸的 width, height, margin, padding, border，又比如CSS3中的transform属性的一些值。下面的导图中基本上包括了所有的单位，下面将详细介绍它们的定义及使用方式。一、长度单位1、相对字体长度单位单位描述em相对于当前元素的字体大小（注意当前元素字体大小可能是继承父元素的）rem相对于根元素字体...
阅读全文
摘要：iPhoneX的正面几乎都是屏幕，除了一块齐刘海（sensor housing）来放置前置摄像头和一些传感器。为了让全屏的网页在iPhoneX上有比较好的浏览效果，必须保证布局的内容不被iPhneX的四角的圆角屏幕以及刘海遮挡，除此之外，还要尽量避免让有交互的区域固定在嘴巴上（home indicator）。如下图所示在iPhoneX全屏模式下打开v2ex社区，其导航头被状态栏遮住，体验不是很好...
阅读全文
摘要：CSS背景在网页设计中使用频率非常高，然而对于这个开发人员很熟悉的CSS属性，却隐藏着许多不为初级开发人员熟知的细节，这篇文章尝试扒开这层不为人知的面纱。 首先列举一下CSS中关于元素背景的所有属性并简要描述了其作用，其中后面几个属性是在CSS3中新加入的。 下面一一“理清”这些属性 backgro
阅读全文
摘要：在我之前的博客网页整体布局完全剖析—剖完你不进来看一下么？中总结单列、两列、三列固宽与变宽布局，我还以为已经囊括了所有经典的网页布局方法了呢，当然除了CSS3的弹性盒模型没有涉及到，现在看来确实是自己孤陋寡闻了，以前在看资料的时候无意中看过圣杯布局和双飞翼布局这样的名词，只不过当时基础是在太差直接忽略了（当然现在也是在打基础，但是好歹相对几个月前已经有了质的改变）。今天总结时再次看到这两个...
阅读全文
摘要：[TOC] 在CSS中对元素进行 水平居中 是非常简单的：如果它是一个行内元素，就对它的父元素应用 ;如果它是一个块级元素，就对它自身应用 。然而要对一个元素进行垂直居中，就有点束手无策了，本文介绍了几种常用的垂直居中方法以供参考！ 一、表格布局法 利用表格的vertical align属性，当然首
阅读全文
摘要：原文链接：http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html 这两个东西是什么，我相信至今还有很多人搞不清，只会死记硬背的写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句
阅读全文
摘要：作为前端小白，最基本的就是写网页了（虽然前端现在基本上可包揽全宇宙的事了），排网页更是基本生存技能了。本文总结了几乎所有的网页总体布局。 一、单列布局1.单列固宽思路：设置div的左右margin为auto 1-1-1 布局固定宽度 Page Header 这是一行文本，这里作为样例，显示在布局...
阅读全文
摘要：CSS中浮动的主要目的有两种，一是为了实现文字绕排图片的效果，而是为了创建多栏布局。不得不说浮动浮动和清除是用来组织页面布局的一柄利剑，这柄剑的剑刃就是 float 和 clear属性。稍有不慎，剑走偏锋，页面就会变得满目疮痍，只有洞悉背后的玄机，方能游刃有余。 大家都知道浮动元素会脱离常规文档流，原来紧跟其后的元素就会在空间允许的情况下，向上提升到与浮动元素平起平坐。下面举例说明...
阅读全文
