|
||
|
摘要：
高效的css写法中的一条就是使用简写。通过简写可以让你的CSS文件更小，更易读。而了解CSS属性简写也是前端开发工程师的基本功之一。这是我从前端观察转来的一片关于CSS简写的文章，也是为了方便以后的查阅。盒子大小这里主要用于两个属性：margin和padding，我们以margin为例，padding与之相同。盒子有上下左右四个方向，每个方向都有个外边距：这四个值可以缩写到一起：缩写的顺序是上-&... 阅读全文
posted @ 2010-07-26 21:31 Kamfper 阅读(234) 评论(0) 推荐(0)
摘要：
1.基本选择器序号选择器含义1. * 通用元素选择器，匹配任何元素2. E 标签选择器，匹配所有使用E标签的元素3. .info class选择器，匹配所有class属性中包含info的元素4. #footer id选择器，匹配所有id属性等于footer的元素2.多元素的组合选择器序号选择器含义5. E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔6. E F 后代元素选择... 阅读全文
posted @ 2010-07-26 21:09 Kamfper 阅读(1423) 评论(0) 推荐(1)
摘要：
先看图1效果： 代码如下：<div style=”border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;border-bottom:10px solid #FFFFCC;”></div>关键是要知道上下左右四条边框之间的连接处是呈斜线状的，如图2：然后上面的图1的效果就简单了。上边框... 阅读全文
posted @ 2010-07-26 21:04 Kamfper 阅读(433) 评论(0) 推荐(0)
摘要：
1.使用背景图片实现等高自适。这种方法感觉上是种视觉上的欺骗，实际是布局元素的高度并不是相等的。原理是：将需要等高自适的块（如A、B）都包含在一个容器C中，给容器C一个背景图片，这张图片包含需要等高自适的块A和B的背景（图片要处理好，像素要算准）。当A、B高度不等时，由于较高的块将容器C给撑开了，那么容器C的背景图片显示的高度就是较高者的高度，导致视觉上A、B两者的高度似乎相等了，实际是不相等的。... 阅读全文
posted @ 2010-07-26 19:12 Kamfper 阅读(503) 评论(0) 推荐(0)
摘要：
haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个... 阅读全文
posted @ 2010-07-25 21:11 Kamfper 阅读(301) 评论(0) 推荐(1)
摘要：
先贴几张图：接下来是一段可以区分IE6/IE7/IE8/FF&CHROME&OPERA的CSS代码：代码看看实际的效果DemoIE条件注释：http://msdn.microsoft.com/zh-cn/library/ms537512(v=VS.85).aspx 阅读全文
posted @ 2010-07-25 20:46 Kamfper 阅读(278) 评论(0) 推荐(0)
摘要：
在逛hemin的博客的时候看到了一道面试题，关于超过宽度显示省略号的效果，自己在网上查查，发现了这个CSS版本。当然还有JS版的解决方案，而且简单，不过这个的思路很精妙，值得收藏！ 基本原理是：当容器内的文本内容超过容器宽度时，文本将会换行，这时给容器一个overflow:hidden属性，换行部分将不会显示。OK！接下来是最精彩的部分。请看代码：可能光看代码还是不清楚，再来看看示意图：我相信再是... 阅读全文
posted @ 2010-07-25 17:41 Kamfper 阅读(387) 评论(0) 推荐(0)
摘要：
首先要说的是：养成良好的习惯，在自己的每个(X)HTML文档头部加上DOCTYPE头。总体上DOCTYPE的作用就是保证(X)HTML文档在各大浏览器的良好兼容性，缺少它很可能造成HTML效果偏差。要牢记DOCTYPE给自己带来的麻烦，一点小的疏忽就浪费了我大量的精力和时间。同时要给其他人提个醒，你的注意到DOCTYPE了吗？最后要说的是DOCTYPE分三种：过渡型（traditional）、严格... 阅读全文
posted @ 2010-07-25 17:34 Kamfper 阅读(319) 评论(0) 推荐(0)
摘要：
看了前端观察上的一片文章（http://www.qianduan.net/to-sprite-or-not-to-sprite.html），我在这里自己小小的归纳一下。 首先介绍下CSS Spirits。CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染(... 阅读全文
posted @ 2010-07-25 17:29 Kamfper 阅读(501) 评论(0) 推荐(0)
摘要：
浏览器对于CSS选择器的匹配是从右至左的！如果你对此有什么疑问的话可以参看下面来自火狐和谷歌的2篇相关css解释文章：mozilla firefox：https://developer.mozilla.org/en/Writing_Efficient_CSSgoogle page-speed：http://code.google.com/intl/zh-CN/speed/page-speed/do... 阅读全文
posted @ 2010-07-25 17:26 Kamfper 阅读(234) 评论(0) 推荐(0) |
||
浙公网安备 33010602011771号