November 17th, 2014

总结和记录一些CSS技巧

左右结构,左侧固定右侧自适应

示例

原理:container元素作为父元素,其中包括左侧的slider和右侧的contentslider固定宽度,而content元素使用相对定位,相对于container元素享有偏移一定的距离,这个距离与slider元素的宽度恰好相同,而且content元素的right为0,这样content元素的右边距与父元素container在一致的位置,好似“自适应”一般。

响应式设计,根据宽度(变化的)设置高度

示例

在响应式设计中,设备的宽度是不确定的,而有时需要根据宽度来设置高度,如上面的例子,想要一个与宽度相同的高度的div,即一个正方形。

原理:padding-top使用百分比时,计算的是父元素的宽度。利用这一点,使用padding-top:100%设置子元素std-rect,然后给子元素的子元素content设置一个负数的margin-top:-100%,也使用百分比,这样,content元素里面的内容就会出现在正方形中。为了使得内容不会撑开div,将content相对于std-rect定位,并设置std-rectoverflow:hidden。在上面的例子中,还有一个clearfix的技巧值得记住。

另外,CSS3的calc()好像也能解决这中问题

一些参考:使用padding-top:(percentage)实现响应式背景图片


1块2块也是钱,小额赞助