您的位置：首页 > Web前端 > CSS

css box-sizing以及calc()

2016-04-17 17:50 615 查看
css3box-sizing属性

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

content-box，border和padding不计算入width之内

padding-box，padding计算入width内

border-box，border和padding计算入width之内，其实就是怪异模式了~

ie8+浏览器支持content-box和border-box；

ff则支持全部三个值。

使用时：

-webkit-box-sizing:100px;//forios-safari,android

-moz-box-sizing:100px;//forff

box-sizing:100px;//forother

例子:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
<style>
.demo{width:300px;padding:20px;background-color:#00F;}
.box{width:100%;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;height:50px;background-color:#F00;border:5pxsolid#0F0;padding:20px;}
</style>
</head>

<body>
<divclass="demo">
<divclass="box">dd</div>
</div>
</body>
</html>

关于calc：

width:calc(expression);

calc()的运算规则

calc()使用通用的数学运算规则，但是也提供更智能的功能：

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

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

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

表达式中有“+”和“-”时，其前后必须要有空格，如"widht:calc(12%+5em)"这种没有空格的写法是错误的；

表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

浏览器的兼容性

浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，不过可惜的是，移动端的浏览器还没仅有“firefoxforandroid14.0”支持，其他的全军覆没。

例子：

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>无标题文档</title>
<style>
.demo{
width:300px;
background:#60f;
padding:3px0;
}
.box{
background:#f60;
height:50px;
padding:10px;
border:5pxsolidgreen;
width:90%;/*写给不支持calc()的浏览器*/
width:-moz-calc(100%-(10px+5px)*2);
width:-webkit-calc(100%-(10px+5px)*2);
width:calc(100%-(10px+5px)*2);
}
</style>
</head>

<body>
<divclass="demo">
　　<divclass="box">dd</div>
</div>
</body>
</html>


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航