1. CSS3之过渡属性（transition） 过渡（transition）是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或javascript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。 过渡动画：是从一个状态渐渐的过渡到另外一个状态。可以让我们的页面更好看，更动感十足，虽然低版本浏览器不支持但是不会影响页面布…

1. HTML5的新特性 HTML5的新增特性主要针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容问题，基本是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。 1.1 HTML5新增的语义化标签 header：头部标签 nav：导航标签 article：内容标签 section：定义…

1. 精灵图 1.1 为什么需要精灵图 一个网页中往往会应用很多很小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。 因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度 ，出现了CSS精灵技术（也称为CSS Sprites，CSS雪碧）。 1.2 精灵…

1. 为什么需要定位 一些固定盒子的效果，标准流或浮动都无法快速实现，此时需要定位来实现。所以： 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。 2. 定位组成 定位:将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。…

1.浮动 1.1 传统网页布局的三种方式 网页布局的本质：用CSS来摆放盒子，把盒子摆放到相应位置。CSS提供了三种传统布局方式： 普通流（标准流） 浮动 定位 1.2 标准流（普通流/文档流） 标准流：就是标签按照规定好默认方式排列。 块级元素会独占一行，从上到下顺序排列（一行只能放置一个）。如：div, hr, h1-h6, ol, dl, f…

1. 盒子模型 页面布局要学习三大核心：盒子模型，浮动和定位。学习好盒子模型能非常好的帮助我们页面布局。 1.1 看透网页布局的本质 网页布局过程： 先准备好相关的网页元素，网页元素基本都是盒子Box。 利用CSS设置好盒子样式，然后摆放到相应位置。 往盒子里面装内容。 本质：利用CSS摆放盒子。 1.2 盒子模型的组成 CSS盒子模型本质上是一个…

CSS有三个非常重要的特性：层叠性，继承性和优先级。 1. 层叠性 相同选择器给设置相同的样式，此时一个样式就会覆盖 另一个冲突的样式。层叠性主要解决样式冲突的问题。 层叠性原则： 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式。 样式不冲突就不会重叠。 例如，给div 同时设置两个相同的样式产生样式冲突： div { color…

1. CSS的元素显示模式 1.1 什么是元素显示模式 什么是元素的显示模式？元素的显示模式就是元素（标签）以什么方式进行显示，比如div 独占一行，一行可以放置多个span。HTML元素一般分为两大类块元素和行内元素，块元素会独占一行，行内元素可以一行放置多个。 1.2 块元素 常见的块元素有h1-h6，p ，div ，ul，ol，li等，其中d…

1.什么是复合选择器 在CSS中，可以根据选择器的类型把选择器分为基础选择器 和 复合选择器， 复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的。基础选择器的相关知识可以参考之前的博客。 复合选择器是由两个或多个基础选择器，通过不同的方式组合形成的，主要包括：后代选择器 ，子选择器 ，并集选择器 和 伪类选择器。 2. 后代选择器 后代…

1.内部样式表（嵌入式） 内部样式表 是写到html页面内部。是将所有的CSS代码抽取出来，单独放到一个style标签中。 <style> div { color:red; font-size:20px; text-indent:2em; } </style> 个人练习经常用，开发不常用。 2.行内样式表（行内式） 行内样式…