css tagged posts

CSS布局负Margin负边距(negative margin)自适应布局负值在页面中的应用

现如今,负margin技术的应用可谓越来越广,任一个大型站点惊鸿一瞥之下都会有其身影所在。个人认为负margin技术是学习css路上必不可缺少的课题之一,许多高级应用及疑难杂症修复都可以使用负margin技术进行实现。

负margin理论:

在说明什么是负margin之前,你得清楚margin是个啥么玩意,为了形象、易懂的解释负margin,我们将引入W3C上没有的参考线的说法。何谓参考线?参考线就是 m...

继续阅读

CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制

float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动;
display: inline-block; 有些时候可以替代float实现相同的效果.
position: absolute|relative; 要配合top,left等定位;

position: absolute会导致元素脱离文档流,被定位的元素等于在文档中不占据任何位置,在另一个层呈现,可以设置z-index。PS的图层效果就是position: absolute。

float也会导...

继续阅读

你知道有关清除浮动闭合的最佳方案吗?-CSS .clearfix-是什么-如何使用

一,什么是.clearfix

很多网站都讲到一个盒子清除内部浮动时可以用到.clearfix。

1
2
3
4
5
6
7
8
9
.clearfix:after {
  content: " ";
  display: block;
  clear: both;
  height: 0;
}
.clearfix {
  zoom: 1;
}
1
2
3
<div class="clearfix">
  <div class="floated"></div>
</div>

上面的代码就是.clearfix的定义和应用,简单的说下.clearfix的原理:

  • 在I...
继续阅读

如何制作和使用 css sprites 图片–教程大全

什么是CSS Sprite

CSS Sprite 又叫CSS精灵,它的原理很简单,将网站上零散的小图片(或图标)整合在一张大图上,再用CSS中 “background-image”属性来定位图片的X/Y轴位置,从而减轻服务器对图片的请求数量,提高网页加载速度。因为对于当前大多数网速而言, 不高于200KB的单张图片所需载入时间基本是差不多的,如果页面上有20张小图片或图标,那么服务器会载入20次。但使用CSS Sprite将图片整合成一张大图后,服务器只需要载入一次就够了,很大程度上优化了图片加载速度,这在门户型网站尤为明显。...

继续阅读
Top Down