正确使用"width:100%"

Posted 2023-05-10

参考技术A

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

结果：

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

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

结果：

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

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

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

Javascript 宽度100%，要怎么写

这个width：160，要改为100%， 但是写width: '100% ' 或者width:“100%” 都不对。怎么写才正确呢，或者换一种JS写法来实现也可以。

参考技术A

代码如下：

<script type="text/javascript">

function init()

var a=document.getElementById("test");

a.style.width="100%";

a.style.height="100%";

window.onload=init;

</script>

追问

傻逼年年有，今年就是你，不懂就不要装懂，乱写一通，真的好吗？