随笔分类 -  CSS

深入理解浏览器兼容性模式
摘要：摘要：关于各种浏览器模式，网上已经有许多文档和资料了，但是很少有能够完全将几个概念阐述清楚的。大部分的资料稍显过时，有些内容可能已经不再适用了。本文中笔者将尽可能将几个概念阐述清楚，并去掉一些过时的内容，仅保留必要的干货。 想必你一定知道浏览器有个标准（Standards）模式和一个怪异（Quirks）模式，或许你还听说过有个“准标准（Almost Standards）”模式。而当你打开Inte... 阅读全文
posted @ 2014-10-15 10:16 一丁o 阅读(337) 评论(0) 推荐(0)
css框架，一把锋利的剑
摘要：CSS 框架是一系列 CSS 文件的集合体，包含了基本的元素重置，页面排版、网格布局、表单样式、通用规则等代码块,用于简化web前端开发的工作，提高工作效率。 产生原因 互联网行业已经发展了多年，浏览器也从最早流行的NS到现在的FF3.IE7等等……前端开发工程师的职位也诞生了。近几年在web开发中，有个非常火的词——“框架”。YUI、JQuery、Prototype这些javascript框架在... 阅读全文
posted @ 2014-10-14 11:28 一丁o 阅读(416) 评论(0) 推荐(0)
960网格，一个web时代的标志。
摘要：如果你不知道什么是CSS框架，可以回顾我的文章 css框架，一把锋利的剑闲言少叙，废话不说，直入正题：1、什么是CSS框架？ 正如之前说的： CSS框架是一种你能够使用在你的web项目中概念上的结构，是别人已经写完的，而且很完善的CSS定义集合。CSS框架一般是CSS文件的集合，包括基本风格的字体... 阅读全文
posted @ 2014-10-13 13:59 一丁o 阅读(2665) 评论(4) 推荐(6)
让你的HTML5&CSS3网站在老IE中也能正常显示的3种方法
摘要：起初，IE其实也是一款非常有进取心的浏览器。但经过一段时间的蛰伏后，它已经成为了我们生活中的一道障碍。微软现在又重新开始向其它浏览器发起挑战，但事实情况是，新版的现代IE浏览器一直滞后于谷歌浏览器和火狐浏览器。我们还不得不想办法兼容早期的IE浏览器。下面提到的三种方法能快捷轻松的让你的HTML5&C... 阅读全文
posted @ 2014-10-02 11:52 一丁o 阅读(1586) 评论(5) 推荐(2)
去除inline-block元素间间距的N种方法
摘要：一、现象描述 真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子： 间距就来了~~ 我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题： .space a { display: inline-block; padding: .5em 1em; background-colo... 阅读全文
posted @ 2014-09-29 11:45 一丁o 阅读(210) 评论(0) 推荐(0)
三个你不知道的CSS技巧
摘要：各种浏览器之间的竞争的白热化意味着越来越多的人现在开始使用那些支持最新、最先进的W3C Web标准的设备，以一种更具交互性的方式来访问互联网。这意味着我们终于能够利用更强大更灵活的CSS来创造更简洁，更好维护的浏览器前端代码。现在让我们来看一看一些也许你还不知道的让人兴奋的CSS功能。 在CSS中用attr()显示HTML属性值 attr()功能早在CSS 2.1标准中就已经出现，但现在才开始普... 阅读全文
posted @ 2014-09-27 19:57 一丁o 阅读(253) 评论(0) 推荐(0)
Web开发者不可不知的15条编码原则
摘要：HTML已经走过了近20的发展历程。从HTML4到XHTML，再到最近十分火热的HTML5，它几乎见证了整个互联网的发展。但是，即便到现在，有很多基础的概念和原则依然需要开发者高度注意。下面，向大家介绍这些应该遵循的开发原则。 1、善用DIV来布局 当开发一个Web页面时，要考虑第一件事就是区分页面重点。将这些内容用DIV标签包含起来，页面的代码会呈现出整洁、缩进良好的风格。 ... 阅读全文
posted @ 2014-09-27 19:35 一丁o 阅读(186) 评论(0) 推荐(0)
样式缩写——css技巧（一）
摘要：一、margin和padding缩写 例： .sample-margin1{ margin-top:15px; margin-right:20px; margin-bottom:12px; margin-left:24px; } 缩写后： .sample-margin1{ margin:15px 20px 12px 24px; } padding与margin缩写形式一样 缩写规... 阅读全文
posted @ 2014-09-27 14:54 一丁o 阅读(464) 评论(0) 推荐(0)
CSS中强大的EM
摘要：使用CSS也好久了，但一直都是在使用“px”来设置Web元素的相关属性，未敢使用“em”。主要原因是，对其并不什么了解，只知道一点概念性的东西，前段时间在项目中要求使用“em”作为单位设置元素，所以从头对“em”学习了一回。稍为有一点理解，今天特意整理了一份博文与大家一起分享，希望对童子们有些许的帮助。 这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局，从而学习其如何计算？又是如何使用“... 阅读全文
posted @ 2014-09-27 00:42 一丁o 阅读(225) 评论(0) 推荐(0)
PIE的使用
摘要：实际上是指的是一个名为pie的htc文件，即pie.htc，使用CSS的behavior行为，可以调用此文件，然后让IE也能实现一些常见的 CSS3效果，如圆角(border-radius)，盒阴影(box-shadow)，背景渐变(gradient)，多图片背景(multiple backgrou... 阅读全文
posted @ 2014-09-22 17:56 一丁o 阅读(3057) 评论(0) 推荐(0)
常见浏览器兼容性问题与解决方案
摘要：浏览器兼容问题一：不同浏览器的标签默认的margin和padding不同 问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。 碰到频率:100% 解决方案： CSS里加一行 1 *{margin:0;padding:0;} 备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。 浏览器... 阅读全文
posted @ 2014-09-22 17:41 一丁o 阅读(179) 评论(0) 推荐(0)