×

关于移动端Box-sizing的基本知识和应用

作者:admin2016.01.20来源:Web前端之家浏览:11208评论:2
关键词:Box-sizingCSS3
微信公众号

微信公众号

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

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

combox{
    width: 100%; 
    padding-left: 10px; 
    border: 1px solid red; 
 }

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

combox {
    width: 100%;
    padding-left: 10px;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /*Firefox*/
    -webkit-box-sizing:border-box;/*Safari*/
    border: 1px solid red; 
}

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

box-sizing是CSS3的box属性之一

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

其中代码如下:

<div id="contentBox"><img src="/images/header.jpeg" alt="" /></div> 
<div id="borderBox"><img src="/images/header.jpeg" alt="" /></div>
.imgBox img{ 
    width: 140px; 
    height: 140px; 
    padding: 20px; 
    border: 20px solid orange; 
    margin: 10px; 
}
 
#contentBox img{ 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
    -o-box-sizing: content-box; 
    -ms-box-sizing: content-box; 
    box-sizing: content-box; 
}
 
#borderBox img{
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -o-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing: border-box; 
}

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

温馨提示:本文作者系admin ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/boxSizing.html

网友评论文明上网理性发言 已有2人参与

发表评论:

评论列表

最新留言

  • 菜鸟日记

    有点东西。来学习一下~...

  • 码云笔记

    你好,前端博客-www.mybj123.com申请友链,有兴趣请联系QQ3261229068...

  • admin

    是的,新版也是不错的。...

  • Qanmy

    火狐56版本最经典。。。...

  • 前端大爆炸

    交换一下链接前端大爆炸!-WEBBANG!BANG!!BANG!!!https://a...

  • Wreb

    加群讨论...

  • 访客

    非常感谢...

  • 访客

    那如果自定义转发的图片未生成完,他给我转发的是默认截屏怎么办...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2019 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero