2018年08月_Abudula__

原创视觉格式化模型（visual formatting model） CSS布局

前面我们已经学习了盒模型（box model），知道了元素会被渲染成一个个盒子。那么这些盒子在屏幕上的位置又是怎么放置的呢？这就是我们现在要学习的——CSS 视觉格式化模型(visual formatting model)。视觉格式化模型是 CSS 布局的一个基础理论体系，需要你有一定的 CSS 功底，所以一时半会是很难掌握的，但是只要你一掌握，对于 CSS 布局就会豁然开朗。（建议整个 CSS ...

2018-08-23 20:03:17 439

原创数据结构

是否修改数据结构，所有的操作分为两种情况：静态：仅读取，数据结构的内容及组成一般不变，get,search.动态：需写入，数据结构的局部或整体需改变，insert,remove.为了使静态和动态操作方便，有了静态和动态存储方式，静态存储方式应对静态操作方便，动态存储方式应对动态操作方便。 ...

2018-08-17 09:56:57 239

原创动画性能优化

CSS3 动画给 Web 的用户体验带来了巨大提升，本文将尝试从浏览器渲染的角度，来解析动画优化的原理及其技巧。为大家提供一些动画性能优化的参考。60fps 与设备刷新率目前大多数设备的屏幕刷新率为60fps（Frame per Second），即每秒60帧。因此，如果在页面中有一个动画或渐变效果，或者用户正在滚动页面，那么浏览器渲染动画或页面的每一帧的速率也需要跟设备屏幕的刷新率保持一致...

2018-08-15 17:13:03 1312

转载常见 CSS 动画库

自从 CSS3 有了动画功能，从此 Web 页面就迈进“忽如一夜春风来，千页万页动画开”的盛况。所以 CSS 动画除了是炫技之选更是一项基本技能，当然也就有无数前辈为之呕心沥血总结经验了。这里我们站在巨人肩上，为大家推荐一些常见且十分好用的 CSS 动画库，既可以用来学习也可用来提高工作效率。Animate.cssAnimate.css 是最早的也是目前最流行和最易于使用的CSS动画库之...

2018-08-15 16:14:04 7091

原创动画必备属性 transform

概述transform 本意是变形，变换之意，在 CSS 中使用该属性可对元素进行移动（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）等效果。因其有着各种特效及优良的性能，所以成为动画的标配。在学习之前，我们可以简单欣赏下几个案例：transform 简单 demo flip card Cube - show sides二维（2D）变换tra...

2018-08-15 10:11:34 578

原创 CSS补间动画 transition动画

补间动画就是指控制最开始的状态和最末的状态的动画，中间的状态由浏览器自动帮我们计算生成。下面给了一个实例：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>补间动画——transition</title> &l

2018-08-15 10:11:06 1537

原创重排与重绘

重排与重绘一个页面渲染完毕后，随着用户的操作，或者数据变化，网页还会进行重新渲染。根据不同的触发条件，重新渲染分为两种情况：重排（reflow）和重绘（repaint）。所有对元素视觉表现属性的修改，都会导致重绘（repaint）。比如修改了背景颜色、文字颜色等。所有会触发元素布局发生变化的修改，都会导致重排（reflow）。比如窗口尺寸发生变化，删除、添加 DOM 元素，修改了影响元...

2018-08-14 21:02:42 813

原创浏览器如何渲染 HTML & CSS

浏览器如何渲染 HTML & CSS我们现在已经知道，使用 HTML & CSS 可以搭建出一个漂亮的 Web 页面。那么浏览器到底是如何使用我们的 HTML & CSS 渲染成我们在屏幕上所看到的页面呢？虽然具体渲染过程很复杂，但是还是可以将其分为几个关键路径，如下：处理 HTML 标记并构建 DOM 树处理 CSS 标记并构建 CSSOM 树将 ...

2018-08-14 20:44:44 1471

原创 grids 布局系统

grids 布局系统我们之前有提到过网格系统，比如960s，bootstrap的网格系统，但是这些网格系统都是模拟出来的（使用 float 或 flexbox），而并非天生的，虽然可以解决一些常见布局问题，但面临 Win10 UI 还是有点力所不及，如下图：但是随着 CSS 的不断发展及完善，一种新的网格布局方式被纳入规范，它将会解决所有的网格问题，这就是我们要说的 CSS Grid...

2018-08-14 19:10:02 567

转载 flexbox 剩余空间分配规则

前面我们学习到了 flexbox 布局。通过使用 flexbox 布局，我们可以更轻松实现以往很难实现的页面布局。本文主要讲解 flexbox 布局是如何去分配和计算布局剩余空间的。（本文阅读前要求你对 flexbox 已经有了初步的认知，如果不是很了解，建议先学习前面视频内容。）基础概念为了更好地理解本文内容，我们需要先了解下面一些基础概念。flexbox 容器 (flexbox c...

2018-08-14 16:43:23 393

原创 display inline-block 水平间隙问题

我们创建一个导航列表，并将其列表 item 设置为 inline-block，主要代码如下：<div class="nav"> <div class="nav-item"><a>导航</a></div> <div class="nav-item"><a&a

2018-08-13 16:06:50 2117

转载让 IE8 支持 HTML5 语义化标签

HTML5是 HTML 最新的修订版本，于2014年10月由万维网联盟（W3C）完成标准制定。而 IE8 面世时间为2009年3月19日，时间相差如此之大，所以 IE8 作为比较古老的浏览器，不支持 HTML 5 引入的语义化标签（如 header、nav、menu、section、article 等）也是很正常的。默认情况下 IE8 对 HTML5 标签的处理在 IE8 里面，未定义的标...

2018-08-13 11:12:14 623

原创 CSS 单位绝对单位相对单位

我们对单位很熟悉，比如说，千克，千米，米等，这些就是绝对单位，我们又有听到太阳的质量等于33个地球，这个就是相对单位。在CSS中，单位也可以分为这两类。在第一个box里，整个宽度为600px,宽度为300px的和宽度为50%为等长。在第二个box里,300px的小框跟上面的框的300px一样长，而第二个框里面的50%跟第一个框的50%为不一样，这个就很好的解释了相对单位和绝对单位。...

2018-08-05 22:21:48 11177 1

原创 CSS 属性和值

我们知道如果一个人想变美，可以通过头发，皮肤，，等方面来切入，HTML 也一样，如果我们想化妆它，可以通过以下4点: 这些属性的取值也分为几大类： ...

2018-08-05 18:26:01 398

原创数据结构绪论一些基本概念和术语

数据是计算机程序加工的原料，是指所有能输入到计算机中并被计算机处理程序处理的符号的总成，举个例子，一个编译程序或文字的程序的处理对象是字符串，一个利用数值分析方法解代数方程的程序，其处理对象是整数和实数，，如图像，声音都通过编码而归之于数据的范畴。数据元素是数据的基本单位，例如一个书的书目信息（作者，出版社，书名等）为一个数据元素，而数据信息的每一项是数据项。数据对象 (dat...

2018-08-02 21:04:54 273

原创 HTML 字符实体有些符号的表示方法

在 HTML 中，某些字符是预留的不能直接使用，如小于号（<）和大于号（>），直接使用会误认为它们是标签。所以如果我们希望正确地显示预留字符，那必须在 HTML 源代码中使用字符实体（character entities），如可以使用&lt;表示小于号（<），&gt;表示大于号（>）。更多参考:http://www.entitycode.c...

2018-08-01 12:35:45 1293

原创 HTML注释

HTML的注释跟其它语言有些不同，因此这里来总结一下。 注释内容就是我们想说明的内容，，，一个注意点是注释内容也可以是一个整个段落等，这个在调试的时候超级有用。 ...

2018-08-01 12:10:22 2230 1

原创 HTML文档声明

The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag.The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web ...

2018-08-01 11:39:29 367

Abudula__的博客