可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。
以前我们可以使用box-sizing:border-box;来设置盒子的属性为不加上边距。现在我们又多了一个选择了。但要注意,两者只能使用一个哦,否则就会造成冲突了。
calc()可以使用数学运算中的简单加(+)、减(-)、乘(*)和除(/)来解决问题,而且还可以根据单位如px,em,rem和百分比来转化计算,但是要注意,使用运算符号的时候要与两边的值有空格和间隙,否则不识别,会报错 !
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.demo{width: 300px;background:#60f;padding: 3px 0;}.box{background:#f60;height: 50px;padding:10px;border: 5px solid green;/*第一种写法*//*width: 100%;*//*box-sizing: border-box;*/ /*第二种写法*/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><div class="demo"><div class="box"></div></div></body></html> css浮动产生原因 一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了。
本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了float浮动,所以两个黑色盒子产生了浮动,导致红色盒子不能撑开,这样浮动就产生了。
浮动副作用1、背景不能显示
由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色或CSS背景图片,而父级不能被撑开,所以导致CSS背景不能显示。
2、边框不能撑开
如上图中,如果父级设置了CSS边框属性(css border),由于子级里使用了float属性,产生浮动,父级不能被撑开,导致边框不能随内容而被撑开。
3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
解决浮动、清除浮动的方法
这里DIVCSS5为了统一讲解浮动解决方法,假设了有三个盒子对象,一个父级里包含了两个子级,子级一个使用了float:left属性,另外一个子级使用float:right属性。同时设置div css border,父级css边框颜色为红色,两个子级边框颜色为蓝色;父级CSS背景样式为黄色,两个子级背景为白色;父级css width宽度为400px,两个子级css宽度均为180px,两个子级再设置相同高度100px,父级css height高度暂不设置(通常为实际css布局时候这样父级都不设置高度,而高度是随内容增加自适应高度)。
父级CSS命名为“.divcss5”对应html标签使用“
”两个子级CSS命名分别为“.divcss5-left”“.divcss5-right”
根据以上描述DIVCSS5给出对应CSS代码和HTML代码片段
.divcss5{ width:400px; border:1px solid #F00; background:#FF0} .divcss5-left,.divcss5-right{ width:180px; height:100px; border:1px solid #00F; background:#FFF} .divcss5-left{ float:left} .divcss5-right{ float:right}对应html源代码片段:
<div class="divcss5"> <div class="divcss5-left">left浮动</div> <div class="divcss5-right">right浮动</div> </div>如需转载,请注明文章出处和来源网址:http://www.divcss5.com/jiqiao/j406.shtml