正确使用"width:100%"

"width:100%"是一个很常用的属性,当对子元素这样设置的时候,子元素的宽度就等于父元素的宽度。
但是,这句话还不够准确。子元素的宽度指什么?子元素内容区域的宽度还是包括padding/border的总宽度?父元素的宽度指什么?父元素内容区域的宽度还是包括padding/border的总宽度?
这就是这篇博客的主要议题。我们直接来看例子:

// html
<body>
  <div class='parent'>
    parent
     <div class='child'>
        child
     </div>
  </div>
</body>
// css
.parent{
  margin:100px auto;
  width:600px;
  border:100px solid #ddd;
  padding:100px;
}
.child{
  width:100%;
  border:50px solid pink;
  padding:50px;
}

结果:


由图可知:
父元素内容区域宽度:600px,padding:100px,border:100px,总宽度:1000px;
子元素内容区域宽度:600px,padding:50px,border:50px,总宽度:800px。
由此可知,子元素设置宽度的百分比是指子元素内容区域相对于父元素内容区域;同时,正是由于子元素设置宽度的百分比是指子元素内容区域相对于父元素内容区域,所以造成了子元素溢出了父元素

在以上示例中,我们没有设置box-sizing属性,因此box-sizing默认为content-box。现在,我们为元素设置box-sizing:content-box,再看看结果:

// css
*{
  box-sizing:border-box;
}

结果:


由图可知:
父元素内容区域宽度:200px,padding:100px,border:100px,总宽度:600px;
子元素内容区域宽度:0px,padding:50px,border:50px,总宽度:200px。

由此可知,当设置box-sizing:border-box时,子元素设置宽度的百分比是指子元素整个盒子区域相对于父元素内容区域

总结:
1、当设置"box-sizing:content-box"时,子元素设置宽度的百分比是指子元素内容区域相对于父元素内容区域
2、当设置"box-sizing:border-box"时,子元素设置宽度的百分比是指子元素整个盒子区域相对于父元素内容区域
3、如果想要正确使用"width:100%"这一属性,一定要设置"box-sizing:border-box",否则会造成子元素溢出。

由于个人水平有限,博客错误之处,烦请指正!

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,110评论 1 91
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 2,872评论 0 26
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 2,486评论 0 6
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,036评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 1,118评论 0 11