CSS — （盒子模型）

最新推荐文章于 2022-10-11 20:45:30 发布

安和-

最新推荐文章于 2022-10-11 20:45:30 发布

阅读量1.5k

点赞数

分类专栏： CSS 文章标签： CSS 盒子模型 W3C标准盒子模型 IE怪异盒子模型

本文链接：https://blog.csdn.net/tang_yi_/article/details/77824874

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

盒子模型是 CSS 的基础，页面中任何一个元素都可以看做是一个盒子，每一个盒子又包括（从内到外）：内容（ content ）、内填充（ padding ）、边框（ border ）、外边距（ margin ）。如下图所示，

W3C 标准盒模型

标准盒模型比较符合常人思维，设置的 width 和 height 就是 content 的 width 和 height。
width = content-width
height = content-height
外盒大小（元素空间尺寸）：content + padding + border + margin

IE 怪异盒模型

所谓的 IE 怪异盒子模型，就是之前 IE 浏览器实现的一种怪异的盒子模型。（IE6 以下，不含 IE6 版本或 “QuirksMode 下 IE5.5+”）
width = content-width + padding-width + border-width
height = content-height + padding-height - border-width
外盒大小（元素空间尺寸）： content + margin

下图是 W3C 标准盒模型（Firefox，Safari，Chrome，Opera，IE6+）和 IE 怪异盒模型（IE6 以下，不含 IE6 版本或 “QuirksMode 下 IE5.5+”）的布局图比较：

上图可以看到，IE 怪异盒模型的宽度包含了元素的 padding 和 border 值，换句话说，在 IE6 以下版本中，内容的真正宽度是：width - padding - border。用内外盒来说，W3C 标准盒模型的内盒宽度是 IE 怪异盒模型的外盒宽度。

box-sizing（CSS3）

语法：

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

取值说明：
content-box ：默认值，其让元素维持 W3C 的标准盒模型；
border-box ：此值让元素维持 IE 怪异盒模型；
inherit ：规定应从父元素继承 box-sizing 属性的值。

注意：
（1）该属性现代浏览器都支持，但是 IE 家族只有 IE8版本以上的浏览器才支持。
（2）对于该属性的支持，有些浏览器需要加上前缀。
Mozilla 内核需要加上 -moz- (Firefox)
Webkit 内核需要加上 -webkit- (Chrome, Safari)
Presto 内核需要加上 -o- (Opera)
IE8 内核需要加上 -ms-

Element{
    -moz-box-sizing: ...;  /* Firefox 3.5+*/
    -webkit-box-sizing: ...; /* Safari 3.2+*/
    -o-box-sizing: ...; /* Opera 9.6*/
    -ms-box-sizing: ...; /* IE8 */
    box-sizing: ...; /* IE9+ , Safari 5.1+ , Chrome 10.0+ , Opera 10.6+*/
}

下面举个例子：

<body>
  <style type="text/css">
    .img {
        width: 100px;
        height: 100px;
        padding: 20px;
        border: solid 10px; 
    }
    img{
        width: 100%;
        height:100%;
    }
    .border-box{
        -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{
        -moz-box-sizing: content-box;
        -webkit-box-sizing: content-box;
        -o-box-sizing: content-box;
        -ms-box-sizing: content-box;
        box-sizing: content-box;
    }
  </style>
  <div class="border-box img"><img src="./hdImg.jpg"></div>
  <div class="content-box img"><img src="./hdImg.jpg"></div>
</body>

效果如图所示：

box-sizing 应用

（1）达到想要的布局要求
需求：两栏布局

 <style type="text/css">
    .main{
        width: 200px;
        background: #C0C0C0;
    }
    .left{
        width: 80px;
        float: left;
        background: #00FFFF;
    }
    .right{
        width: 120px;
        float: left;
        background: #FF00FF; 
    }
  </style>
  <div class="main">
    <div class="left padding box-sizing">left</div>
    <div class="right padding box-sizing">right</div>
 </div>

效果如图：

此时，内部两栏的宽度只和正好等于外部元素宽度，展示的效果到达预期效果。但是当内部子元素需要设置 padding 或 border后，内部子元素外盒宽度超过外部元素宽度后，此时 right 元素将被挤到 left 下方。如下：

.padding{
    padding: 10px;
}

因为，上图中 box-sizing 是取默认值 content-box ，当加 padding 或 border 时，向外扩展所以撑破了布局。为了达到预期效果，可以使用 IE 怪异盒子模型当加 padding 或 border 向内扩展，这样，内部元素的外盒宽度不变，可以保持布局。如下：

 .box-sizing{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

（2）统一 form 元素风格
目前，大部分元素都是基于 W3C 标准盒模型。但是对于 form 中的有部分元素还是基于 IE 怪异盒模型，比如，input 中的 submit、 reset、 button、 text 和 select 等元素，这样如果我们给其设置 border 和 padding ，它们只会向内延伸。

<body>
  <style type="text/css">
    body{
        font-size: 12px;
    }
    form{
        width: 200px;
        margin: 20px auto;
        padding: 10px;
        border: 1px solid #ccc;
    }
    .form-field{
        margin-bottom: 5px;
        background: #cdcdcd;
        padding: 2px;
    }
    .submit, .reset, .button, .text, .select, .textarea, .checkbox, .radio{
        width: 80px;
        border-color: red;
    }
    .textarea{
        resize: none;
    }
  </style>
  <form action="#" method="post">
    <div class="form-field"><input type="submit" value="submit" class="submit"/></div>
    <div class="form-field"><input type="reset" value="reset" class="reset"/></div>
    <div class="form-field"><button class="button">button</button></div>
    <div class="form-field"><input type="checkbox"  class="checkbox"/>checkbox</div>
    <div class="form-field"><input type="radio" class="radio"/>radio</div>
    <div class="form-field"><select name="select" id="select" class="select"><option value="1">1980</option></select></div>
    <div class="form-field"><input type="text" value="text" class="text"/></div>
    <div class="form-field"><textarea name="textarea" cols="30" rows="3" class="textarea">textarea</textarea></div>
  </form>

 </body>

通过上图可以看到：
1）submit、 reset、 button、 text、 select、 textarea 默认情况下都带有 border。
2）submit、 reset、 button 默认情况下会有 6px 的左右 padding，以及上下的 padding;
3）text 默认情况下会有 1px 的上下 padding；
4）CheckBox 默认情况下会有 margin：3px 3px 3px 4px，且高宽默认为 13px；
5）redio 默认情况下会有 margin：3px 3px 0px 5px，且高宽默认为 13px；
6）textarea 默认情况下会有 2px 的padding。

注意：只有 text 和 textarea 遵循 W3C标准盒模型，其余的都是 IE 的怪异盒模型。

为了使所有元素参数统一，使用 margin: 0px; padding: 0px; border-width: 1px; box-sizing: border-box 。

.submit, .reset, .button, .text, .select, .textarea, .checkbox, .radio{
        width: 80px;
        margin: 0px;
        padding: 0px;
        border-width: 1px;
        border-color: red;
        height: 17px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
}
.checkbox, .radio{
        width: 13px;
        height: 13px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
}

参考Airen 的博客 CSS3 Box-sizing

安和-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS — （盒子模型）

盒子模型是 CSS 的基础，页面中任何一个元素都可以看做是一个盒子，每一个盒子又包括（从内到外）：内容（ content ）、内填充（ padding ）、边框（ border ）、外边距（ margin ）。W3C 标准盒模型比较符合常人思维，设置的 width 和 height 就是 content 的 width 和 height。所谓的 IE 怪异盒子模型，就是之前 IE 浏览器实现的一种怪异的盒子模型
复制链接

扫一扫