calc 与 box-sizing 的替代

ivydom 发布于2019-08-28 18:26 / 2194人阅读

摘要：背景之前发现这个布局新属性之后就非常喜欢，爱不释手。语法取值说明元素的宽度高度等于元素边框宽度加上元素内边距加上元素内容宽度高度即。元素的宽度高度等于元素内容的宽度高度。

背景

之前发现calc这个布局新属性之后就非常喜欢，爱不释手。在公司的实习的时候，开发微信端的页面，使用了几次calc，后来发现在Android的上的不支持～蛋疼。于是到处找替代方案，终于在stackoverflow上找到一个满意的答复，好～接下来进入正文～

calc 与 box-sizing 简单介绍 calc 属性

calc()能让你给元素的做计算，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)”，这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。

calc()的运算规则：

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

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

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

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

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

兼容性

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

box-sizing

语法

    box-sizing ： content-box || border-box || inherit

取值说明

border-box：元素的宽度/高度（width/height）等于元素边框宽度（border）加上元素内边距（padding）加上元素内容宽度/高度（content width/height）即：Element Width/Height = border+padding+content width/height。

content-box：元素的宽度/高度等于元素内容的宽度/高度。
兼容性

布局比较

相比于box-sizing而言 calc的Android browser的支持性太差了，所以布局的时候，box-sizing可以用来解决calc的问题

//html
sideBar
content


//css
  //使用calc
.content {
  width: 65%；  //照顾Android 平稳退化
  width: calc(100% - 300px);
}

  //使用box-sizing
  .sideBar {
     position: absolute; 
     top:0;
     left:0;
     width: 300px;
}
.content {
    padding-left: 300px;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

以上的代码来自于stackoverflow，非常棒的解决方案～

bootstrap中的box-sizing

之后在工作中，发现bootstrap的源码有这么一段代码～
box-sizing这个货还是非常有用的呀～

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

最后记

第一篇通过解决自己遇到的问题而来的文章～

参考资料：

CSS3的calc()使用

CSS3 Box-sizing

Stackoverflow的问答

WilsonLiu"s blog首发地址：http://blog.wilsonliu.cn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111235.html

CSS 盒模型与box-sizing

摘要：一盒模型一个页面由许多元素组成，而每一个元素都可以表示为一个矩形的盒子，盒模型正是描述这些矩形盒子的存在。外边距区域用空白区域扩展边框区域，以分开相邻的元素。的开源框架就全局设置了，由此可见盒模型的是比较受欢迎的。一、盒模型一个web页面由许多html元素组成，而每一个html元素都可以表示为一个矩形的盒子，CSS盒模型正是描述这些矩形盒子的存在。 MDN的描述： When laying...

番茄西红柿 2019-04-23 13:42 评论0 收藏0
七种实现左侧固定，右侧自适应两栏布局的方法

摘要：总结一下左边固定，右边自适应的两栏布局的七种方法。基本的样式是，两个相距左侧宽基本的样式是，两个盒子相距左侧盒子宽，右侧盒子宽度自适应。没有清除浮动的方法，若左侧盒子高于右侧盒子，就会超出父容器的高度。总结一下左边固定，右边自适应的两栏布局的七种方法。其中有老生常谈的float方法,BFC方法，也有CSS3的flex布局与grid布局。并非所有的布局都会在开发中使用，但是其中也会涉及...

luffyZh 2019-08-29 13:11 评论0 收藏0
border-sizing属性详解和应用

摘要：用于更改用于计算元素宽度和高度的默认的盒子模型。它有和三种取值。和属性包括内容，内边距和边框，但不包括外边距。所以，的解释很符合常理。使用建议使用建议根据项目中的使用经验和的建议，推荐将属性设置为。个人网站原文链接属性详解和应用 box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。它有content-box、border-box和inherit三种取值。inheri...

Batkid 2019-04-23 13:30 评论0 收藏0
20 个 CSS 高级技巧汇总

摘要：当然，如果你的新元素有兄弟元素的话，也可以使用通用的兄弟选择符页面顶部阴影下面这个简单的代码片段可以给网页加上漂亮的顶部阴影效果给添加行高你不需要分别添加到每个标记等。使用技巧会让人变的越来越懒，没错，我就是想让你变懒。下面是我收集的CSS高级技巧，希望你懒出境界。 1. 黑白图像这段代码会让你的彩色照片显示为黑白照片，是不是很酷？ img.desaturate { fil...

Java3y 2019-08-28 18:21 评论0 收藏0
20 个常用的 CSS 技巧

摘要：所有一切都垂直居中要将所有元素垂直居中，太简单了看，是不是很简单。优化显示文本有时，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你注请负责任地使用。偶然看到一篇文章介绍了这些css技巧，觉得挺不错的，分享给大家，话不多少，上代码。 1、黑白图像这段代码会让你的彩色照片显示为黑白照片，是不是很酷？ img.desaturate { filter: gr...

chanthuang 2019-08-29 10:56 评论0 收藏0