首页
Javascript
Html
Css
Node.js
Electron
移动开发
小程序
工具类
服务端
浏览器相关
前端收藏
其他
关于
公司注册

移动端为什么要用box-sizing:border-box?

2020年12月10日 转载自 jiangweishan 阅读(103)

提到Box-sizing,先前的一篇文章也提到过,其实在布局的时候很好用,可以省去很多多余的代码,至于兼容性,目前还只能在移动端应用多,因为它是CSS3的属性。大家看几个例子,应该就一目了然了。

那我想要一个元素100%显示,又必须有一个固定的padding-left或padding-right,还有1px的边框,怎么办?

  1. combox{
  2. width:100%;
  3. padding-left:10px;
  4. border:1px solid red;
  5. }

这样编写代码必然导致出现横向滚动条,怎么办?要相信问题就是用来解决的。这时候伟大的css3为我们提供了box-sizing属性,对于这个属性的具体解释不做赘述。让我们看看如何解决上面的问题:

  1. combox {
  2. width:100%;
  3. padding-left:10px;
  4. box-sizing:border-box;
  5. -moz-box-sizing:border-box;/*Firefox*/
  6. -webkit-box-sizing:border-box;/*Safari*/
  7. border:1px solid red;
  8. }

是不是很神奇呢。接下来看下box-sizing的具体属性吧。

box-sizing是CSS3的box属性之一

  1. box-sizing :content-box || border-box || inherit

content-box:此值为其默认值,其让元素维持W3C的标准Box Model,也就是说元素的宽度/高度(width/height)等于元素边框宽度(border)加上元素内边距(padding)加上元素内容宽度 /高度(content width/height)即:Element Width/Height = border+padding+content width/height。

border-box:此值让元素维持IE传统的Box Model(IE6以下版本),也就是说元素的宽度/高度等于元素内容的宽度/高度。(从上面Box Model介绍可知,我们这里的content width/height包含了元素的border,padding,内容的width/height【此处的内容宽度/高度=width /height-border-padding】)。

inherit:规定应从父元素继承 box-sizing 属性的值。

为了更能形像看出box-sizing中content-box和border-box两者的区别,我们先简单来看一个示例图,如下所示:

12

其中代码如下:

  1. <div id="contentBox"\><imgsrc="/images/header.jpeg"alt=""/></div>
  2. <div id="borderBox"\><imgsrc="/images/header.jpeg"alt=""/></div>
  1. .imgBox img{
  2. width:140px;
  3. height:140px;
  4. padding:20px;
  5. border:20px solid orange;
  6. margin:10px;
  7. }
  8. #contentBox img{
  9. -moz-box-sizing: content-box;
  10. -webkit-box-sizing: content-box;
  11. -o-box-sizing: content-box;
  12. -ms-box-sizing: content-box;
  13. box-sizing: content-box;
  14. }
  15. #borderBox img{
  16. -moz-box-sizing: border-box;
  17. -webkit-box-sizing: border-box;
  18. -o-box-sizing: border-box;
  19. -ms-box-sizing: border-box;
  20. box-sizing: border-box;
  21. }

从上面的案例中 我们可以很明显的看出content-box和border-box两者的区别,在实际的生产应用中,CSS3 box-sizing 属性 为我们提供的极大的方面,以后在页面的排版中也不会在烦恼页面的错乱问题了

© 本文著作权归原作者所有 来源:jiangweishan 阅读原文
  • 移动端为什么要用box-sizing:border-box?

    提到Box-sizing,先前的一篇文章也提到过,其实在布局的时候很好用,可以省去很多多余的代码,至于兼容性,目前还只能在移动端应用多,因为它是CSS3的属性。大家看几个例子,应该就一目了然了。

    发布:2020-12-10 阅读(103)

  • 使用 media query 进行 IE 的 CSS Hack

    通过 media query 进行 CSS 的 hack。在 IE 中它们可以识别出这些特殊的符号 \0,\, 以及 \9,然后结合 media query 可以更好进行样式的区分

    发布:2019-08-07 阅读(667)

  • css3 自定义浏览器滚动条(scrollbar)

    通过-webkit-scrollbar自定义浏览器滚动条,支持webkit的浏览器可正常显示(如chrome,safari,QQ浏览器,360极速等)

    发布:2019-01-28 阅读(1365)

  • 视窗单位vm,vh,vmin,vmax

    记录下响应式布局单位(视窗单位:viewport units)的应用,最近用electron开发桌面应用,用到vh,vw还是蛮方便的.

    发布:2019-01-09 阅读(772)

  • 妙法攻略:渐变虚框及边框滚动动画的纯CSS实现

    CSS3实现滚动边框,渐变边框

    发布:2018-12-07 来源:张鑫旭

  • CSS3 手册

    CSS3 是层叠样式表(Cascading Style Sheets)语言的最新版本,旨在扩展CSS2.1。它带来了许多期待已久的新特性, 例如圆角、阴影、gradients(渐变) 、transitions(过渡) 与 animations(动画) 。以及新的布局方式,如 multi-columns 、 flexible box 与 grid layouts。实验性特性以浏览器引擎为前缀(vendor-prefixed),应避免在生产环境中使用,或极其谨慎地使用,因为将来它们的语法和语义都有可能被更改。

    发布:2018-11-06 来源:mozilla