box-sizing属性解析

最新推荐文章于 2024-04-19 14:53:43 发布

zzzzzzz周绍辉

最新推荐文章于 2024-04-19 14:53:43 发布

阅读量955

点赞数 1

本文链接：https://blog.csdn.net/qq_32758013/article/details/73799822

版权

css3 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

box-sizing

1 篇文章 0 订阅

订阅专栏

实际上div等或者display属性设置为block的块级元素默认的都是box-sizing:content-box

boxsizing的值列表

content-box 是块级元素默认的。
padding-box 因为兼容性不好，只有fireFox支持，chrome和IE浏览器不支持，而且W3C上也并没有列举出来，所以不做讨论。
border-box 所有浏览器都兼容。
inherit 继承它父元素的 box-sizing 属性的值。

语法规则:

因为box-sizing属性是CSS3所规定的，大部分的CSS3新特性需要在不同浏览器上使用不同的前缀1.申明来解决不同浏览器之间的问题。例如:

box-sizing:content-box;
-o-box-sizing:content-box;
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;

content-box的作用

加不加都无所谓，因为是默认的。一般用于伪类

表现形式：

border和padding不算入width中。比如：一个100px的宽度的div，如果他的padding值为20px，border为5px,那么他的实际宽度就为100 + 20*2 + 5*2 = 150px。如图：

和平常所用div元素无区别。

border-box的作用

表现形式：

border和padding算入width中。比如：一个100px的宽度的div，如果他的padding值为20px，border为5px,那么他的内容宽度就为100 - 40*2 - 5*2 = 10px。如图：

当内容宽度为非正数时就代表内容宽度为0，此时text-align文本对齐方式失效，因为实际内容宽度已经为0了。如果为负数,那么width = border * 2 + padding * 2;

演示效果

<html>
    <head>
        <meta charset="utf8" />
        <title></title>  
        <style type="text/css">
            div{
                margin:0 auto;
            }
            .content-box{
                width: 100px;
                height: 100px;
                padding: 20px;
                border: 5px solid #E6A43F;
                background: blue;
                box-sizing:content-box;
                -o-box-sizing:content-box;
                -moz-box-sizing:content-box;
                -webkit-box-sizing:content-box;
                text-align: center;
                line-height:100px;
            }
            .border-box{
                box-sizing:border-box;
                -moz-box-sizing:border-box;
                -webkit-box-sizing:border-box;
                width: 100px;
                height: 100px;
                padding: 40px;
                border: 5px solid #3DA3EF;
                background: yellow;
                text-align: bottom;
            }
        </style> 
    </head>
    <body>
        <div class="content-box">123456</div>
        <div class="border-box">123456</div>
    </body>
</html>

Markdown

小结

content-box是块级元素的box-sizing属性的默认值，它和我们实际用到的样子并没有区别。

border-box是一个可选值，它会在实际内容宽度为非负数时保持原有宽度不变，无论是加了border还是padding值，而当实际内容宽度为负数时实际宽度则会改变为padding的值加上border的值乘2。

不管是content-box还是border-box，其目的都是为了能够更好的展现我们的内容所以什么时候该用什么时候不该用取决于自己，不论怎么写样式都是为了达到我们所期望的那样，我们能做的就是不断的更新自己的知识，这样才能跟上时代的进步。

-o-…. 表示opera浏览器的前缀.
-ms-…. 表示IE浏览器的前缀.
-moz-…. 表示火狐浏览器的前缀.
-webkit-…. 表示Chrome,safari,36急速浏览器等webkit内核浏览器的前缀. ↩

zzzzzzz周绍辉

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
box-sizing属性解析

实际上div等或者display属性设置为block的块级元素默认的都是box-sizing:content-boxboxsizing的值列表content-box 是块级元素默认的。padding-box 因为兼容性不好，只有fireFox支持，chrome和IE浏览器不支持，而且WC上也并没有列举出来，所以不做讨论。border-box 所有浏览器都兼容。inherit 继承它父元素的
复制链接

扫一扫