本文的目标读者是入门级Web前端开发人员。 本文介绍了CSS选择符表达式引擎的基本原理。CSS选择符引擎几乎是前端开发人员每天在使用的工具。本文将逐一介绍实现该引擎的各种策略。首先，我们介绍基于W3C标准API的方法。 W3C标准的Slectors API能够支持的平台： Safari 3+, Firefox 3.1+, Internet Explorer 8+, Chrome and Opera 10+两个最常用的方法：querySelector，该函数接受一个CSS选择符字符串，返回找到的第一个元素，如果没...
1.如何让文字水平垂直居中？<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>css练习</title><style>a {/* 行内元素转行内块级元素,因为行内元素无法改变宽高,若想改变,必须先转成行内块级元素 */display: inline-block;width: 70px;/* 行高等于高度，文字才会垂直居中 */height: 30px;line-height: 30px;background-color: aqua;/*...
CSS3模块化结构CSS历史发展CSS（Cascading Style Sheet），层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS3属性选择器E[attr=val]表示具有属性att且其值等于valE[attr*=val]表示具有属性attr且其值中包含valE[attr^=val]表示具有属性attr且其值以val开头E[attr$=val]表示具有属性attr且其值以val结尾事实上除了以上四个之外还有俩用的相对比较少的属性选择器，那就是E[attr|=val]用来选择具有...
<!doctype html> <html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus?"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>段落首字符下沉、缩进及特殊显示</title><style>#a{text-indent:15px;}#b{text-indent:-6px;}#c{text-indent:0.5em;}#a:first-letter{font-size:25px;color:#B23AEE;float:left;}#b:first-letter{font-siz...
outline:这只轮廓样式，与border类似。写法参考border.overflow/overflow-x/overflow-y：visible/hidden/scroll/auto/no-display/no-contentoverflow:溢出显示方式。overflow-x：水平方向溢出显示方式overflow-y：垂直方向溢出显示方式注：一般设置overflow-x/y属性以后，不管内容有没有溢出，滚动条会一直出现。max-height/min-height注：有时候我们需要定义元素内容的最大宽高或者最小宽高，这样就可以实现页面内容多了以后自适应...
前言这是 React 系列教程的第一篇，我们将用 React 实现 Animate.css 官网的效果。对于 Animate.css 官网效果是一个非常简单的例子，原代码使用 jQuery 编写，就是添加类与删除类的操作。这对于学习 React 来说是一个非常简易的例子，但是我并不会在教程中介绍相关的前置知识，比如 JSX、ES6 等，对于小白来说可能还会有一些困惑的地方，所以还要了解一下 React 相关的基础知识。虽然 React 有很多值得深究的知识，但这个系列教程并...
盒模型CSS盒模型分成W3C标准盒模型和IE模型W3C标准盒模型(默认)：box-sizing: content-boxpadding和border都会撑开盒子，改变盒子的宽度高度总宽度：width + 左右border宽度 + 左右padding宽度 + 左右margin宽度内盒宽度：width + 左右border宽度 + 左右padding宽度IE盒模型：box-sizing: border-boxpadding和border都不会撑开盒子，不会改变盒子的宽度，盒子的内容会相应缩小总宽度：width + 左右margin宽度内盒宽度： width盒子模...
<!--[if IE]> Only IE <![endif]--> 仅所有的WIN系统自带IE可识别 <!--[if IE 5.0]> Only IE 5.0 <![endif]--> 只有IE5.0可以识别 <!--[if gt IE 5.0]> Only IE 5.0+ <![endif]--> IE5.0包换IE5.5都可以识别 <!--[if lt IE 6]> Only IE 6- <![endif]--> 仅IE6可识别 <!--[if gte IE 6]> Only IE 6/+ <![endif]--> IE6以及IE6以下的IE5.x都可识别 <!--[if lte IE 7]> Only IE 7/- <![endif]--> 仅IE7可识别 <!--[if gte IE 7]> Only...
前言动画使用示例https://github.com/AndyFlower/web-front/tree/master/css3/loading学习CSS3中Animation之前先来看一个动画特效（可以自己运行看下实际效果） 1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>Title</title> 6<style type="text/css"> 7 .spinner{ 8 width:60px; 9 height: 60px;10 background-color: #67CF22;11 margin: 100p...
IE系列浏览器不支持CSS的圆角(border-radius)等CSS3属性是一个众所周知的问题，而FF、Chrome原生的浏览器支持是的优雅的圆角感觉较好，如何解决这个问题呢？ 一种比较传统的方案是放弃CSS3，使用背景图，但是这种方式也会有诸多问题，对页面结构改动较大，需要对自适应大小进行控制等，成本较高。 另外一种是百度了一下，发现有个开源的插件可以解决此问题：http://css3pie.com/使用方法很简单，下载了之后直接引用.htc文件即可。 ...
来源：http://www.cnblogs.com/Zigzag/archive/2009/04/16/1394356.htmlCSS之Position详解（1）CSS的很多其他属性大多容易理解，比如字体，文本，背景等。有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍，而偏偏忽略了对一些难缠的属性讲解，有避重就轻的嫌疑。CSS中主要难以理解的属性包括盒型结构，以及定位。正如positioniseverything，本文将主要讲述关于position的理解，力求让您看完本文后对position有着最全面的认识。...
做了一个mvc的项目，今天放iis上跑样式和功能进行调试，由于之前机子是新装的，所以IIS没有装。装iis是小事几分钟，但测试的过程中，一直是只能显示本页面的html标签和写在本页面的css和js。外部的第三方引用都不能用，实在纳闷。iis重装了几次，最后发现有个iis默认值处有问。如下-->在打开或关闭window功能中的Internet信息服务里的万维网服务=>常见HTTP功能=>静态内容 。注意，这里默认是不勾选的。原文：http://www.cnblogs....
×目录[1]动态样式[2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除前面的话 我们可以通过计算样式来读取伪元素的样式信息，但是却无法使用javascript来直接操作伪元素，本文以一个需求解决为例，详细介绍脚本化伪元素的6种方法需求说明 【1】为id=box的div元素添加content="前缀"的:before伪元素 【2】为已经添加:before伪元素的div元素删除伪元素 [注意]由于IE7-浏览器不支持:before伪元...
下面我们从3个方面开始介绍： 1、scale(x,y) 对元素进行缩放 X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数Y是一个可选参数，没有设置的话，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。Css代码 transform:scale(2,2.5); 2、scaleX(<number>) 元素只在X轴（水平方向）缩放元素。 默认值是1，基点一样在元素的中心位置。可以通过transform-origin来改变基点Css代码 transform:scaleX(2); 3、scaleY(<number>) 元...
摘自：http://www.cnblogs.com/liuzhaoyang/articles/3289456.htmlPosition定位：relative | absolute定位一直是WEB标准应用中的难点，如果理不清楚定位那么可能应实现的效果实现不了，实现了的效果可能会走样。如果理清了定位的原理，那定位会让网页实现的更加完美。定位的定义：在CSS中关于定位的内容是： position:relative | absolute | static | fixedstatic(静态) 没有特别的设定，遵循基本的定位规定，不能通过z-index进...