使用CSS3中的calc()属性来以算式表达尺寸数值
建站知识 2021-07-03 08:15www.168986.cn长沙网站建设
我们想要实现页面自适应布局时,通常因为margin的存在,而比较麻烦;有时候想要实现宽度自适应的输入框时,也因为padding或margin的存在,而相当繁琐,由于浏览器兼容性而导致最终效果不一致。css3新添加属性box-sizing,在一定程度上解决了上面的问题,而在今天的文章中我们来通过css3新增加的一个属性calc()来实现适应布局。
calc()是css3新添加属性,它可以让你使用一个算术表达式来表达长度值,这意味着可以用它来定义div的宽度,并设置margin、padding、border等。
calc()的运算规则
1.使用”+”、”-”、””、”/”四则运算;
2.可以使用百分比、px、em、rem等单位;
3.可以混合使用各种单位进行计算。
用法
calc()语法非常简单,就像我们小时候学加 (+)、减(-)、乘()、除(/)一样,使用数学表达式来表示
CSS Code复制内容到剪贴板
- .haorooms {
- width: calc(expression);
- }
这样padding和margin和百分比一起用,问题就可以解决了。
例如,我们margin是20px。那么我们就可以写成
CSS Code复制内容到剪贴板
- .haorooms{
- width: calc(100% - 20px); //注减号前后要有空格,否则很可能不生效!!
- }
也可以这么用
CSS Code复制内容到剪贴板
- .box {
- background: #f60;
- height: 50px;
- padding: 10px;
- border: 5px solid green;
- width: 90%;/写给不支持calc()的浏览器/
- width:-moz-calc(100% - (10px + 5px) 2);
- width:-webkit-calc(100% - (10px + 5px) 2);
- width: calc(100% - (10px + 5px) 2);
- }
示例
实例1定位在页面上的块元素,含有外边距
CSS Code复制内容到剪贴板
- .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自动调整大小的表单,又适应容器
CSS Code复制内容到剪贴板
- 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;
- }
XML/HTML Code复制内容到剪贴板
- <form>
- <div id="formbox">
- <label>Type something:</label>
- <input type="text">
- </div>
- </form>
长沙网站设计
- 如何自己建一个网站 自己想建个网站,怎么建
- 如何制作网站免费建站 创建网站免费注册
- html简单网页代码 html简单网页代码超链接
- dreamweaver网页制作 dreamweaver网页制作模板
- 上海网站建设 上海网站建设制作微信
- 如何制作网站和网页 如何制作一个网页
- html网页制作代码大全 端午节html网页制作代码大
- app开发公司 app开发公司前十名
- html网页制作 html网页制作文字居中
- app制作一个需要多少钱 请人制作一个app多少钱
- 成都网站制作 成都网站制作维护
- 百度建一个网站多少钱 百度做个公司网站要多少
- html+css网页制作成品 web网页制作成品css+javascrip
- html网页制作案例 html网页设计案例
- html+css网页制作成品 web网页制作成品css+javascrip
- 个人网站模板 个人网站模板HTML