<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒模型、盒子的尺寸、位置参数</title>
<style>
#content {
width: 200px;
height: 200px;
padding: 10px;
border: 10px solid lightskyblue;
overflow-y: auto;
margin: 20px;
}
#sub-content {
width: 100px;
height: 300px;
padding: 10px;
margin: 20px;
border: 10px solid red;
background-color: gray;
}
::-webkit-scrollbar {
width: 16px;
height: 16px;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #555;
}
</style>
</head>
<body>
<div id="content">
<div id="sub-content">
</div>
</div>
<h3>IE盒模型与W3C盒模型</h3>
<p>说到尺寸计算，必须先说盒模型</p>
<p>IE盒模型 content(width height) 包含 padding border</p>
<p>W3C盒模型 content(width height) 就是content</p>
<p><b>css3的box-sizing属性给了开发者选择盒模型解析方式的权利。W3C的盒模型方式被称为“content-box”，IE的被称为“border-box”，使用box-sizing: border-box;就是为了在设置有padding值和border值的时候不把宽度撑开。</b></p>
<p>chrome box-sizing 默认为 content-box, 也就是元素的 width height 决定元素的宽高，而padding border 不会影响元素的宽高</p>
<h3>
clientWidth clientHeight
</h3>
<h4>
<p>1 clientWidth = css width + padding-left + padding-right - 垂直滚动条的宽度(16px)</p>
<p> el1.clientWidth = 200 + 10 + 10 - 16 = 204</p>
<p>2 clientHeight = css height + padding-top + padding-bottom - 水平滚动条的高度(16px)</p>
<p> el1.clientHeight = 200 + 10 + 10 = 220 (这里没有出现水平滚动条)</p>
</h4>
<hr>
<h3>
<p>offsetWidth offsetHeight 只与自身属性有关，与滚动条无关</p>
</h3>
<h4>
<p>1 offsetWidth = css width + padding-left + padding-right + border-block-left + border-block-right</p>
<p> el1.offsetWidth = 200 + 10 + 10 + 10 + 10 = 240</p>
<p>2 clientHeight = css height + margin-top + margin-bottom + border-block-start + border-block-end</p>
<p> el1.clientHeight = 200 + 10 + 10 + 10 + 10 = 240</p>
</h4>
<hr>
<h3>offsetParent: 返回距此元素最近的外层父级元素，且该父级元素已被定位，否则返回 body </h3>
<p>el1.offsetTop = el1的margin值</p>
<p>el2.offsetTop = el2的margin 20px + el1的padding 10 + el1的border 10 + el1的margin 20</p>
<hr>
<h3>scrollWidth和scrollHeight即可视区域宽高度+被隐藏区域宽高度。</h3>
<p><b>下面计算是W3C盒模型，content boder padding </b></p>
<p>这里的el1，由于el1的和el2的margin border padding，导致el1被隐藏了100px以作滚动显示, el1.offsetHeight = 可见的300px + 隐藏的100px</p>
<p>这里的el2，被隐藏了40px el2.offsetHeight = 300px + 40px</p>
<p><b>下面计算是IE盒模型，由于content包含了padding border，所以</b></p>
<p>这里的el2，被隐藏了20px el2.offsetHeight = 300px + 20px</p>
<hr>
<script>
var el1 = document.getElementById('content')
el2 = document.getElementById('sub-content');
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
