css3整理--calc()
calc()语法:
elem{
width:calc( 50% -2px );
}
取值说明:
calc是计算的缩写,上句含义是:计算elem父元素的50%再减2px,并将结果赋值给elem的width属性
calc()能做什么:
calc()可以通过动态的计算来得到元素的宽度或者高度。
例如:width:calc(50% - 2px)。当为元素设置了2px的边框时,通过这样的计算就可以避免因超出而折行。
可以使用 + - * / 等运算符来进行计算
注意:表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;
兼容性:
IE9+、FF4.0+、Chrome19+、Safari6+支持该属性,也就是说现在仍然需要兼容的IE8并不适用,开发时如果使用该属性,需要考虑通过hack的方式兼容IE8
css3整理--calc()的更多相关文章
- CSS3的calc()使用
CSS3的calc()使用 calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度.比如说,你可以使用calc()给元素的border.margin.pad ...
- CSS的单位及css3的calc()及line-height百分比
锚点:css中百分比减去固定元素 单位介绍 说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着 ...
- css3 的 calc()函数在布局中的使用----头部高度固定,页面正好占满一屏
最近项目遇到一个布局需求,头部高度固定,页面需要刚好占满一屏幕. 如下示意图: 方法:使用calc .wrap{ position: relative; margin-left: 24px; marg ...
- CSS3 使用 calc() 计算高度 vh px
Viewport viewport:可视窗口,也就是浏览器. vw Viewport宽度, 1vw 等于viewport宽度的1% vh Viewport高度, 1vh 等于view ...
- CSS的单位 及 css3的calc() 及 line-height 百分比
CSS的单位及css3的calc()及line-height百分比 摘自:http://www.haorooms.com/post/css_unit_calc 单位介绍 说到css的单位,大家应该首先 ...
- css3的calc() css3的百分比减宽,减高,加,乘,除,适合用于后台的排版定位
css3的calc() css3的百分比减宽,减高,加,乘,除,适合用于后台的排版定位 浏览器支持IE9+.FF4.0+.Chrome19+.Safari6+ calc()语法非常简单,就像我们小时候 ...
- [转]CSS3 使用 calc() 计算高度 vh px
1.px 像素,我们在网页布局中一般都是用px. 2.百分比 百分比一般宽泛的讲是相对于父元素,自适应网页布局越来越多,百分比也经常用到了. 3.Viewport viewport:可视窗口,也 ...
- css3的calc属性不生效问题
css3的 calc:计算属性.由于自己做的项目中这个属性不常用到,偶尔用一次还没效果. 后来研究了下是因为运算符两边没加空格. 错误示例:.content{width:calc(100%-50px) ...
- CSS3表达式calc( )
CSS3表达式calc( ) 第一次看到calc( )时,不太相信calc()是css中的部分.因为看其外表像个函数,但是CSS里为啥会有表达式我也不太清楚,偶然机会在网页里看到的,自己切片写自适应时 ...
随机推荐
- Delphi 中big5 转 Unicode 函数
function Big5ToUnicode(str Char): widestring; var len: integer; begin len:=MultiByteToWideChar(,,PCh ...
- POJ 1595 素数打表水题
[题意简述]:给出N和C,让我们求出N以内的包含N的素数,然后依据若N以内的素数为奇数个,就将中间2*c-1个素数输出:若为偶数个.就将中间2*c个素数输出. [分析]:仅仅要题意理解就简单了. 详见 ...
- Amazon.com 美国亚马逊 直邮中国 手把手教程(转)
什么值得买已经发布2014最新版美亚直邮攻略 海淘攻略:美国亚马逊 直邮服务 手把手教程(2014最新版) ,调整幅度较大,值友们可以移步到新攻略中查看. 相比德国.英国亚马逊,美国亚马逊的大部分商品 ...
- iOS 在tableview的侧滑事件里执行tableView.selectRow无效的解决办法
很奇怪的问题,在执行默认选中一个cell的时候,突然发现这句话不起作用了 (我的场景是:当前cell侧滑删除后,默认选中上一个cell) 搞了半天,终于发现罪魁祸首竟然是因为:这句话写在了侧滑事件的方 ...
- [转]BLAS简介
BLAS(Basic Linear Algebra Subprograms)是一组线性代数计算中通用的基本运算操作函数集合[1] .BLAS Technical (BLAST) Forum负责规范BL ...
- oracle本地编译问题
oracle10.2: --将过程重新编译为本地编译方式,提示有编译错误,经查提示未设置plsql_native_library_dir 参数 SQL> alter procedure p_xx ...
- Socket网络编程--简单Web服务器(1)
这一次的Socket系列准备讲Web服务器.就是编写一个简单的Web服务器,具体怎么做呢?我也不是很清楚流程,所以我找来了一个开源的小的Web服务器--tinyhttpd.这个服务器才500多行的代码 ...
- 通用返回XML格式结果
public class ResultModel { public string OrderCode { get; set; } public string Message { get; set; } ...
- pycharm启动慢 –xms -xmx相关参数设置
Eclipse崩溃,错误提示:MyEclipse has detected that less than 5% of the 64MB of Perm Gen (Non-heap memory) sp ...
- c++11 输出时间
C++11中输出当前时间最直接的方法: std::time_t t2 = std::time(nullptr); cout << std::put_time(std::localtime( ...