css3 calc()自适应布局属性 ---浏览器版本兼容性的问题

“无意中发现了一个巨牛的人工智能教程，忍不住分享一下给大家。教程不仅是零基础，通俗易懂，而且非常风趣幽默，像看小说一样！觉得太牛了，所以分享给大家。点这里可以跳转到教程。”

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

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

calc()的运算规则

使用”+”、”-”、”*”、”/”四则运算；

可以使用百分比、px、em、rem等单位；

可以混合使用各种单位进行计算。

实例1：定位在页面上的块元素，含有外边距

.banner {

position:absolute;

left: 40px;

width: -moz-calc(100% - 80px);

width: -webkit-calc(100% - 80px);

width: calc(100% - 80px);

border: solid black 1px;

box-shadow: 1px 2px;

background-color: yellow;

padding: 6px;

text-align: center;

}

实例2：自动调整大小的表单，又适应容器

input {

padding: 2px;

display: block;

width: -moz-calc(100% - 1em);

width: -webkit-calc(100% - 1em);

width: calc(100% - 1em);

}

#formbox {

width: -moz-calc(100%/6);

width: -webkit-calc(100%/6);

width: calc(100%/6);

border: 1px solid black;

padding: 4px;

}

<form>

<label>Type something:</label>

</div>

</form>

浏览器兼容性

firefox 4.0+已经开支支持calc()功能，需要使用-moz-calc()私有属性；

chrome从19 dev版，开始支持私有的-webkit-calc()写法；

IE9支持原生写法，calc()；

Opera貌似还不支持～～

This is why you see examples like this:

width: calc(100%/3 - 2*1em - 2*1px);

That’s actually the minimum number of characters you need to write that particular expression, so far as I can tell. Given the grammar requirements, you could legitimately rewrite that example like so:

width: calc(100% / 3 - 2 * 1em - 2 * 1px);

…but not like so:

width: calc(100%/3-2*1em-2*1px);

css3 calc()自适应布局属性 ---浏览器版本兼容性的问题相关推荐

再谈布局，栅栏式自适应布局的学习和实现(calc自适应布局)
布局真的很重要.一个不好的布局后期会有很多很多的bug,就像是建房子的地基一样. 首先,再一次地圣杯布局的学习,来源于该教程: http://www.jianshu.com/p/f9bcddb0e8b ...
静态布局、流式布局、自适应布局、弹性布局、响应式布局
静态布局.流式布局.自适应布局.弹性布局.响应式布局前端的布局主要有: 静态布局.流式布局.自适应布局.弹性布局.响应式布局等. 一.静态布局: 尺寸上一律使用px;同时限制外层容器的大小:中间的宽 ...
CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
css3多列布局(columnz)，多列布局相关属性
Css3多列布局(columns) 为什么会出现多列布局? 当一行文字太长时,读者读起来就比较费劲,有可能读错行或读串行:人们的视点从文本的一端移到另一端.然后换到下一行的行首,如果眼球移动浮动过大, ...
CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
vue自适应布局（各种浏览器，分辨率）
1.前言 spa页面的layout布局对于前端项目的影响至关重要,在我们进行web端开发的时候,前端的各种大小屏幕,各种内核的浏览器不同,会导致我们的页面呈现出不一样的效果,如何进行更好的取舍,怎么能 ...
css3高度计算函数cal_CSS3 calc()会计算属性详解
前言正如其名,calc是css3中新增的计算属性,让很多属性增加了一个表达式的说法: calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的b ...
ASP.NET MVC 4中如何为不同的浏览器自适应布局和视图
在ASP.NET MVC 4中,可以很简单地实现针对不同的浏览器自适应布局和视图.这个得归功于MVC中的"约定甚于配置"的设计理念. 默认的自适应 MVC 4自动地为移动设备浏览器 ...
js页面自适应屏幕大小_移动端自适应布局方法的calc()与vw
前端人员在处理移动端自适应布局时,目前前端最流行的方法应该就是使用媒体查询,来设置HTML的字体大小,然后用rem为单位对Dom的宽高进行设置,这个方法的优势在于兼容性方面很好,劣势则在于当前市场上不 ...

css3 calc()自适应布局属性 ---浏览器版本兼容性的问题

css3 calc()自适应布局属性 ---浏览器版本兼容性的问题相关推荐

最新文章

热门文章