[譯] scroll-behavior 滑順的捲動效果

眾所皆知 HTML 錨點(anchor link)透過給定標籤 id 屬性跳到頁面上特定位置的功能。不過這個效果感覺上就像是閃一下就切換到該位置。為了使用體驗上的感覺有時候網站會設計一種平滑捲動到該位置的效果。在過去這樣的效果通常會透過 jQuery 來達成，但有時候一些簡單的頁面為了達成這個功能就需要載入一堆函式庫或框架這未免有點矯枉過正。最新的 Javascript 提

业界 2016年07月06日

H5项目常见问题及注意事项

Meta基础知识：H5页面窗口自动调整到设备宽度，并禁止用户缩放页面//一、HTML页面结构// width 设置viewport宽度，为一个正整数，或字符串‘device-width’// height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置// initial-scale 默认缩放比例，为一个数字，可以带小数// min

业界 2016年07月06日

inline&block&inline-block

本笔记主要来源于这篇文章,w3school-cn-display,mdn-en-display还有我的一些想法杂糅而成,另外这是我自己写的一个Demo,大家感兴趣的话都可以打开来看看.在进入正文之前,做一些说明.今天的主题是比较display主要的三个属性值block,inline,inline-block.其实display还有flex,inline-flex,grid,

业界 2016年07月06日

CSS基础知识之float

前段时间写过一篇CSS基础知识之position，当时对float的理解不太准确，被慕课网多名读者指出（原文已修正，如有误导实在抱歉）。现对float进行更深入的学习，在此把学习心得分享给大家。浮动的基础知识浮动有4个属性：left（左浮动）、right（右浮动）、none（不浮动）、inherit（继承）。浮动元素的包含块是其最近的块级祖先元素。浮动元素会左偏移（或右偏移

业界 2016年07月06日

图片放大镜注释详解

今天的练习是做一个网购网站常见的图片详情介绍的放大镜效果，简单来说就是图片中有对应的区域让你看到放大后的效果。关于布局：就是两组div，第一组大div放图片，小的是遮盖层。第二组是大图div显示框，里面放大张图片，超过部分隐藏，可以想象下是透过窗户看外面，你看到的只是一部分。思路：就是两边的比例，重点，比例，话不说，直接上代码。 *{margin:0

业界 2016年07月06日

Material Design for Bootstrap

简单几行代码，就可以给bs框架添加Material Design风格效果图：这是常见的btn加了Material Design效果这里采用的是bootstrap4引入：bs.cssMaterial Design for Bootstrap你可能看到上面多了一个materialDesign属性，对，等下我们就通过这个属性来实现material Design效果css:[mat

业界 2016年07月06日

瞅瞅Facebook是怎么保证CSS代码质量的

原文地址系列文章地址在Facebook里，上千名工程师工作在不同的产品线上，为全世界的用户提供可靠优质的服务，而我们在代码质量管理方面也面临着独一无二的挑战。不仅仅是因为我们面对的是一个庞大的代码基库，还有日渐增加的各种各样的特性，有时候如果你想去重构提高某一个模块，往往会影响到其他很多模块。具体在CSS而言，我们需要处理上千份不停变化的CSS文件。之前我们着力于通过Cod

业界 2016年07月06日

（一）选择器和选择器的优先级

本来想把标题写成css不得不说的那些事之选择器和选择器的优先级，但是为了本篇文章能被更多的人阅读，还是把名字改得老套一点。好了，废话不多说了，下面开始css不得不说的那些事的第一篇，选择器和选择器的优先级。一、选择器更加专业性的介绍，来看一下w3school中的描述，网址为：http://www.w3school.com.cn/cssref/css_selectors.as

业界 2016年07月06日

三栏布局的n种实现

本文主要讨论左右边栏固定宽度，中间栏填满其余空间的布局。至于其他类型，基本上也就是半斤和八两。每一种布局都会有个Demo，个人依然认为文章里帖代码并没有Demo来的直接。所以正文负责解释，源码参见Demo。其中讨论了这么多种（6种）布局，有以下理由：1是每种布局也都有他的毛病，没有十全十美的，每种布局也都有人在用。2是虽然有相对优秀的方案，但是不优秀的方案也有有用的东西在里

业界 2016年07月06日

工作中碰到的一些小问题汇总（持续更新）

从一开始工作到现在，陆陆续续碰到了很多大问题小问题，有时候自己闷头研究，一个“小问题”可能要研究很久，所以现在汇总一下，给自己做个笔记，如果大家也有类似问题，也可以省省填坑的时间，因为是遇到什么问题就写了什么问题，可能有些乱……见谅…… Html:Css: -webkit-appearance:none;/*去掉默认样式（button,input等等）*/ outline:

业界 2016年07月06日