css3 calc()自适应布局

我们想要实现页面自适应布局时,通常因为margin的存在,而比较麻烦;有时候想要实现宽度自适应的输入框时,也因为padding或margin的存在,而相当繁琐,同时由于浏览器兼容性而导致最终效果不一致。css3新添加属性box-sizing,在一定程度上解决了上面的问题,而在今天的文章中我们来通过css3新增加的另外一个属性calc()来实现适应布局。

calc()是css3新添加属性,它可以让你使用一个算术表达式来表达长度值,这意味着可以用它来定义div的宽度,并设置margin、padding、border等。

calc()的运算规则

  • 使用”+”、”-”、”*”、”/”四则运算;
  • 可以使用百分比、px、em、rem等单位;
  • 可以混合使用各种单位进行计算。

未完,继续阅读

css3实现背景颜色线性渐变

对于网页设计师而言,颜色渐变在网页设计中十分常见,而对于网页制作者来说,通常的方法就是把渐变切成图片来实现。伴随着css3的出现,实现背景颜色渐变,图片不再是唯一的实现方式。虽然IE浏览器还没有实现,但Mozilla和webkit内核的浏览器已经接受了这一实现方式。在这里面,我分别就这两种内核的浏览器进行讲解。
未完,继续阅读

85个很赞的响应式网页设计

时下在网络行业最热门的话题之一是响应式网页设计。响应性的Web设计是设计一个网站,依照用户的行为方法,并自动调整其大小,以适应多样化的媒介,如平板电脑,智能手机,上网本和显示器。开发和设计这样一个网页设计主要有三个特点:首先,网站必须有灵活的网格基础;是考虑布局的大小和间距的力学。二,图像必须是灵活的。第三,它必须适应不同的情况。在这篇文章中,我们将展示85惊人的响应性的Web设计,在你设计下一个项目时,可以作为你的灵感。
未完,继续阅读

css3弹性盒子模型之box-flex(修正版一)

今天看到蓝色理想上面有一篇文章讲《css3弹性盒模型布局模块介绍》里面讲到用box-flex,突然觉得有点心慌,上次看到响应式网页设计里面也同样讲到flex box自适应布局,而上次竟然没有引起自己的注意,想深入研究一下,竟然给忘记了,于是就在这种不断的忘记中彻底变成outer。今天借此机会,好好充电一下,看了adou写的关于box-flex的文章,发现里面存在一些问题,冒昧更正了一下,如有不妥还请大家指正。

box-flex是css3新添加的盒子模型属性,它的出现打破了我们经常使用的浮动布局,实现垂直等高、水平均分、按比例划分。但是它有一定的局限性,在firefox、chrome这浏览器下需要使用它们的私有属性来定义:firefox(-moz)、chrome(-webkit)。

未完,继续阅读