css3 calc()自适应布局

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

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

calc()的运算规则

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

未完,继续阅读

盒模型及IE盒模型中的bug

盒模型

在网页制作中,css盒模型是div布局的核心,每个元素都是以块的形式来展现。在CSS中,它将页面中的每一个段落、标题、图片等元素都看成是一个装在盒子里的东西,也就是盒子里的内容。比较让人好理解一些的一个比喻是一个大纸盒子里装了一块方形的面包,面包就是一个段落、一个标题或者一幅图片,面包比盒子要小一些。面包的边缘到盒子侧边的距离就是CSS中的内边距属性(Padding),盒子的侧面四个边形成的边框就是CSS中的Border属性,而一个网页中有很多段落、标题、图片,也就是有很多这样的盒子,这些盒子和盒子之间的距离就是CSS中的外边距属性(margin)。它的计算方式如下图所示:

未完,继续阅读

css3教程:box-sizing属性

说到 IE 的 bug,在 IE6以前的版本中,IE对盒模型的解析出现一些问题,跟其它浏览器不同,将 border 与 padding 都包含在 width 之内。而另外一些浏览器则与它相反,是不包括border和padding的。

在我们开发的过程中会发现,有时候,如果对页面中的大区域进行设置时,将border、padding计算到width和height之内,反而更灵活。但W3C的 CSS2.1规范却规定了他们并不能被包含其中。考虑到这个问题,css3中引入了一个新的属性:box-sizing,它具有“content-box”和”border-box“两个值。
未完,继续阅读

html5教程:audio音频标签和video视频标签

html5新增audio标签使web开发人员可以轻松的在网页内部加入音频,而video视频标签则可以加入视频文件。

audio音频标签

在页面中加入audio音频:

<audio src="horse.ogg" controls="controls" autoplay="autoplay" loop="loop">您的浏览器不支持audio</audio>

未完,继续阅读

css hack:解决css各浏览器兼容性问题

对于前端工程师来说,最头痛的事莫过于浏览器兼容性的问题,而此时正像七雄争霸时期,但却远远不止于七家,虽说“天下大势,分久必合,合久必分”,可是目前对于浏览器这种分久必合的未来,仍然是非常渺茫。既然我们无法控制未来,只能从自身来解决问题,努力掌握各浏览器的兼容性。
这时我们就用到css hack了,那什么是css hack呢,简而言之一句话,就是针对不同的浏览器来编写不同的css代码,这就是css hack了,详情可见百度百科:css hack
不废话了,看代码!
未完,继续阅读

html 不常用但有意义的标签

html标签里面有很多标签是我们很少用到,但是又不可忽略,正好今天有时间,顺便整理一下。

blockquote标签:定义块引用。<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进,而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。 未完,继续阅读