菏泽做网站建设的公司,免费网站空间10g,无水印logo免费一键生成,电商网站开发教学视频最近这个月一直在赶项目开发#xff0c;遇到的问题和学到的前端知识没有更新到博客园#xff0c;现在闲了下来#xff0c;就整理一下前端知识。 在项目开发中#xff0c;在样式这方面花费的时间较多#xff0c;因为针对于数字的变化特别多#xff0c;本人不爱记数字遇到的问题和学到的前端知识没有更新到博客园现在闲了下来就整理一下前端知识。 在项目开发中在样式这方面花费的时间较多因为针对于数字的变化特别多本人不爱记数字在看设计图时总是反复计算之间的数值觉得很麻烦偶然谷歌一下发现了css3的一个属性--calc() calc() 很显然是calculate的缩写--计算。是css3的一个属性。可以用来给widthheightbordermargin以及padding等属性值设置动态值拿个例子说 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.one{width:200px; //内容的宽度是200pxheight:200px;background: red;border: 1px solid;}.two {height:100%;padding-left: 10px;padding-right: 20px;background: pink;width:calc(100% - 10px - 20px); //内容的宽度是170px}.three {height:100%;padding-left: 20px;background: aqua;width: calc(100% - 20px); //内容的宽度是150px}/style
/head
bodydiv classonediv classtwodiv classthreeabc/div/div/div
/body
/html 里面的子元素不管怎么撑开都不会超过父元素的边框。这样就不会考虑父元素的宽度是多少直接写出calc()浏览器自动计算width的属性值。大大的提高了效率。
使用方法 1. 可以嵌套使用 例如calc( calc() ); 2. 可以使用四则运算 - * 3. 可以% pxemrem 混合使用。
注意事项 1. 和-在计算时前后要有空格否则不识别。* 和 没要求为了规范都加空格吧。 例如 calc(100%-10px) 这样不会识别。 2. 0 不能作为除数否则会报错。很显然。
兼容性 既然是css3的新属性避免不了兼容性问题。 ie9以下不支持火狐4以下不支持4.0-15.0需要加前缀谷歌19.0以下不支持19.0-25.0需要加前缀苹果5.1以下包括5.1不支持6.0需要加前缀欧朋15.0以下不支持。
