sysuzhyupeng的博客

我们都清楚元素相对于父级水平居中的方法：对于inline元素，为父级设置text-align: center。对于定宽的block元素，设定其margin: 0 auto 然而垂直居中的方法并没有这么简单vertical align第一个反应是实现垂直居中的方法应该是vertical-align: middle 该属性定义行内元素的基线的垂直对齐，在表单元格中，这个属性会设置单元格框中的单

效果当我们想实现这样一个loading效果，有这么几种选择，第一种是使用canvas，第二种是借助css3的transform属性。这两种方法有一个问题，在webkit内核的浏览器上存在毛边。那么如果只兼容IE9+的浏览器，可以考虑使用SVG具体代码SVG的实现效果非常简单 <svg width="440" height="440" VIEWBOX="0 0 44...

简介window对象表示浏览器打开的窗口（可以省略，全局变量挂载在window对象下，alert，confirm等方法）。document对象是HTML文档，是window对象的一部分(document.body可以写成window.document.body)。与window有关的宽高介绍window.innerHeight和window.outerHeight的区别在于，前者是浏览器内部文档的高

常见定位方案在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案: 普通流 (normal flow) 在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML

在我们浏览各大网站，网页，手机APP的时候，可能会遇到很多图片大小不一，看起来杂乱无章，其实，它们是狠有顺序的，排列在一起。这就应用到了网站中一种很流行的页面布局—瀑布流，又称瀑布流布局。优点：操作简单（滚动鼠标），用户体验好 缺点：无限滚动加载模式，页脚就永远加载不出来了。实现首先你的想好，你想要创建几列，然后在body中创建好模板 <div id="box"> <ul><

移动端适配的是什么？ 我们讨论的是网页适配多种尺寸屏幕，让网页效果看起来和设计师的设计稿一样。也就是同一套代码在不同分辨率的手机上跑时，页面元素间的间距，留白，以及图片大小会随着变化，在比例上跟设计稿一致。 下面会详细讨论viewport和css像素px中的细节，先只谈适配的结论：网页在viewport中布局，viewport被分成一个个小方块，一个CSS像素占一个方块。在设置了viewpo

一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存在 float: center 的写法，那么 text-align: center、verticle-align: middle 是否可行呢

GPU加速大多数设备的刷新频率是60次／秒，（1000 ／ 60 = 16.6ms）也就是说浏览器对每一帧的渲染工作要在16ms内完成，超出这个时间，页面的渲染就会出现卡顿现象，影响用户体验。 浏览器在每一帧里面，会依次执行以下动作： js -> style -> layout ->paint -> composite。 1. js: js实现动画效果，DOM元素操作等。 2. style(计

选择器CSS选择器主要包括id、class和标记选择器。复合选择器就是两个或多个基本选择器，通过不同方式连接而成的选择器。 交集选择器由连个选择器直接连接构成，其中第一个必须是标记选择器，第二个必须是类别选择器或者id选择器，这两个选择器之间不能有空格。这种方式构成的选择器，将选中同时满足前后定义的元素。 并集选择器是多个选择器通过逗号连接而成的。 最常用的是通过嵌套的形式，即多个选择器之间以