brizer的博客

在Web开发中，通过CSS代码也可以实现一些简单的图片，当然，如果你有耐心，也可以实现较为复杂的图片噢。那么请问为什么有图片不去用而需要用CSS来实现呢？一是因为性能的原因，图片带给服务器和客户端的压力比几行CSS代码要大得多；二是因为没有必要，有些简单的效果利用CSS就可以直接完成了，为什么还需要麻烦地引入图片呢？比如大名鼎鼎的bootstrap中选择列表的下三角就是通过css实现的。效

这次简单聊聊我对浏览器的渲染机制的理解。首先需要提到几个基本概念： DOM：Document Object Model，浏览器将HTML解析成树形的数据结构，简称DOM。 CSSOM：CSS Object Model，浏览器将CSS解析成树形的数据结构，简称CSSOM。 Render Tree: DOM和CSSOM合并后生成Render Tree，如下图：Layout: 计算出Render T

我们在使用inline-block是时候，可能会出现一个问题，就是元素之间出现间隙。我们看看代码：<style>li { display:inline-block; width:20px; height:20px; background-color:red;}ul { width:90px; background-color:blue;}</style><ul>

今天讲一下如何通过javascript来延迟加载图片。当一个网页中含有大量图片时，如果一开始就将图片全部加载完毕，势必会引起性能和效率上的问题，用户可能会由于等待时间过久而离开。这个时候，我们需要利用懒加载，也就是延迟加载图片的方式，来提高网站的亲和力。基本思路如下: 给需要延迟加载的图片设置自定义属性比如lazy-src，存在图片源所在路径。然后将所有需要懒加载的图片放入一个数组，在window

本文就自己的理解和使用，介绍CSS3中的动画部分。 CSS3可以自定义动画来取代传统的脚本实现动画。使用CSS动画有三个主要优点： 1. 学习成本低，不需要了解javascript就能够创建动画。 2. 运行效果好，浏览器的渲染引擎会在低性能机器上采用不同方法来保证动画表现，而使用javascript来实现动画，需要非常完美的设计。 3. 让浏览器来控制动画序列，运行浏览器优化动画。比如降低

弹性盒布局是一个用于页面布局的全新CSS3模块功能。弹性盒布局的定义中，它可以自动调整子元素的宽和高，来很好的填充任何显示设备中的可用显示空间，收缩内容防止内容溢出。 和块级元素基于垂直方向布局以及行内元素基于水平方向布局不同，弹性盒布局的算法是方向无关的。 最基本的用法如下：div { border:1px solid black;}#box1 { display:flex;

今天主要介绍一下模块化的CSS思想。随着前端技术的发展，javascript模块化已经得到广泛运用，无论是CMD规范还是ES6的模块系统也好，都认可了模块化开发的优势。 那么CSS的模块化也是未来的一种趋势。 什么是CSS模块化，为什么CSS模块化才是未来呢？局部在CSS模块化思想中，每个文件被编译成独立的文件。这样我们就只需要使用简单通用的类选择器名字就好了，我们不再需要担心它会污染全局的变量

今天主要谈一谈CSS中的各种居中的办法。 首先是水平居中，最简单的办法当然就是margin:0 auto;也就是将margin-left和margin-right属性设置为auto，从而达到水平居中的效果。那么其他的办法呢？容我一一道来：line-height首先介绍文字的水平居中方法：<div class="wrap">刘放</div>利用line-height设为height的一样即可：.wr

有这样一种情况，在两列布局的基础上，将列的数量改为三栏。其中左右两列的宽度固定，中间部分的宽度随着浏览器宽度变化而变化。首先，我们还是介绍一下传统的方法，就是利用了margin取负值的技巧。代码如下： 三列布局 middle left right CSS代码如下：.margin-left--1 { margin-left:-100%;}

在布局中，我们常常需要出现两列的情况，其中左边一列固定宽度，右边一列随着浏览器宽度变化而变化。如何实现呢？传统的方法是利用float将左部分浮动起来，再通过margin将右部分右移，得到所需效果，代码如下： css代码如下：.color-blue { color:blue;}.color-yellow { color:yellow;}.background

先说说FC，FC的含义就是Fomatting Context。它是CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。BFC和IFC都是常见的FC。分别叫做Block Fomatting Context 和Inline Formatting Context。BFCBFC（Block Formatti