分类 » CSS

详说 Block Formatting Contexts (块级格式化上下文)

分类: 标签:‚ ‚ ‚  评论:15 15 评论

在上文《详说清除浮动》中,Kayo 较为详细地介绍了 BFC ,也就是本文的主角 Block Formatting Contexts (块级格式化上下文),本文会基于上文关于 BFC 的部分进行拓展,进一步说明 BFC 的特性。 但在进一步说明 BFC 特性之前,Kayo 首先要介绍另一个在 CSS 的可视化格式模型 (Visual Formatting Model) 中具有非常重要地位的概念——定位方案。定位方案是...

Read More –>

详说清除浮动

分类: 标签:‚ ‚ ‚  评论:24 24 评论

浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生一系列的问题。当然,随着时间的推移,这些问题终究有了一些出色的解决方案,Kayo 要在这里详细介绍的,除了是这些解决方案,还有其中的原理。(温謦提示:文章信息量大且篇幅长,请各位自备瓜子,饮料,音乐)。 一.什么是清除浮动? 1.浮动的缺陷 在了解如何清除浮动之前,Kayo 先介绍为什么需要清除浮动。如本文开头所说的,浮动虽然可以便于页面...

Read More –>

关于 CSS Reset

分类: 标签:‚  评论:33 33 评论

看看上一篇文章,竟然是半个月前的了,看了一下谷歌分析,在 Kayo 没有更新的半个月里,来看 Kayo 的童鞋竟然还在增多,对不起那些童鞋了,最近不明不白就开始忙起来了,关键是在南方忽冷忽热的天气折腾下, Kayo 感冒了,天气反复,所以博友们也要保重啊!   现在一切回复正常,继续回到博客生活中了,今天想介绍一下 CSS reset ,最近帮朋友解决一些 CSS 方面的问题,弄了好久仍然无果,几乎什么办法...

Read More –>

CSS3的变形与过渡样式

分类: 标签:‚ ‚ ‚ ‚  评论:38 38 评论

作为最新版的 CSS , CSS3 就像传说中的一样,的确很神奇,配合 HTML5 后可以直接忽略 flash 了!不过杯具的是只有 chrome 、 Firefox 、 safari 等现代浏览器部分支持 CSS3 ,因此做正式站点的话还不能大规模的使用。但是在网站的某些部分使用一些CSS3却能很好的增强网页的画面效果,比如 Melody 的评论者头像就使用了 CSS3 的图片悬停动画,在不支持 CSS3 的浏览器...

Read More –>

有趣的css测验

分类: 标签:‚  评论:5 5 评论

高考刚过,全国都为之沸腾,一段时间没有经历测验的我突然也想认认真真的考个试。在网上浏览了一下突然发现一个css测验,在w3school上的,平时只看资料,在这个睡不着的夜晚我竟偶尔发现了这样一个测验,想起研究css有一段时间了,网站也做了不少,可是css测验还真未玩过,于是报着极大的好奇心试了一下,结果全对了,哈哈,不过第一题“CSS 指的是?”,让你选择css的全称,我还真不知道(现在答不出的童鞋举个手),幸亏rp...

Read More –>

ie6常见css bug

分类: 标签:‚ ‚  评论:7 7 评论

相信每个前端人都会有同感——ie6这东西真是万恶啊!就连ms也大力鼓励消费者淘汰ie6,不过很不幸,大概是因为xp绑定了ie6,因此在国内ie6的市场占有率仍高达42.43%,这是今年2月份的数据。也正因ie6的高占有率,因此在网站开发时也不得不考虑兼容ie6,就算不做到完美兼容,来个基本兼容也是必须的,起码不要让你的网站在ie6中乱套了。今天就跟大家分享一些平时积累的ie6 bug解决方法。   IE...

Read More –>

推荐10款CSS框架

分类: 标签:‚ ‚  评论:9 9 评论

程序开发人员和网页设计人员掐架的事情常有听说,程序员们总是为自己设计不出来漂亮的网页而纠结。不再郁闷,因为开源帮了你,下面为你介绍10款相当不错的CSS框架,专心做程序吧,网页设计交给开源帮你。 1. CSS网页布局框架 Elastic Elastic是一个简单的CSS框架用来对网页进行布局。Elastic可实现各种各样常见的网页布局,如下图所示: 2.(X)HTML/CSS 框架 ThinkCSS TC(”Thi...

Read More –>

主题手术之几个CSS bug及解决方法

分类: 标签:‚ ‚ ‚  评论:9 9 评论

1.第一个bug相信不少用过css+div的人都知道——用CSS设置div的背景图片无法显示 这个在之前做Kayo 2011 1.0时就发现了这个ie bug,并发现了解决方法。产生bug的原因是因为ie默认没有定义height和width就认为它们为0px(这个大家用firebug查看一下就知道,无法显示背景的div的高度就一条线那么多),所以背景就无法显示了。网上基本的做法都是给div定义height和width...

Read More –>