概念
CSS盒模型 包含：content padding border margin
类型
CSS盒模型分为 标准模型和IE模型，二者的差别在于width、height的计算
标准模型中width = content 相当于box-sizing：content-box
IE模型中width = content + padding + border 相当于box-sizing：border-box
如何获取盒模型的宽度
例如
HTML 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="box" style="width:200px">
this is a css box
</div>
</body>
</html>
css 代码
#box{
width:100px;
}
对于内联样式：
var box=document.getElementById('box');
var width=box.style.width;
console.log(width)/200px/
适用于内联样式也适用于外联样式
var box=document.getElementById('box');
var width=window.getComputedStyle(box).width;
console.log(width)/200px/
适用于内联样式也适用于外联样式
var box=document.getElementById('box');
var width=box.getBoundingClientRect().width;
console.log(width)
盒模型边距重叠问题
边距重叠是指 父子元素 兄弟元素之间 相邻的margin不会叠加 而是重叠取大值
例如
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="box">
<div id=child1>child1</div>
<div id=child2>child2</div>
</div>
</body>
</html>
当子元素上的margin 并没有参与到父元素的大小计算
解决方式：在父元素上添加overflow：auto(是一种BFC方案，会取消边距重叠效果)
/*父子元素*/
#box{
width:100px;
background:yellow;
/*overflow:auto;*/
}
#child1{
background:green;
margin-top:10px;
}
#child2{
background:red;
}
连个相邻的兄弟元素 竖直方向上margin 会重叠 只显示较大值作为margin
解决方式：将每一个子元素外面套一个父元素，并在父元素上添加overflow属性
/*兄弟元素*/
#box{
width:100px;
background:yellow;
overflow:auto;
}
#child1{
background:green;
margin-bottom:10px;
}
#child2{
background:red;
margin-top:10px;
}
边距重叠的解决方案
BFC(块级格式化上下文 block foramting content)是一种解决边距重叠的方式，具体实现方式入下：
- overflow: auto/hidden、scroll
- position:不为static、relative
- float:不为none
- display: inline-block/table-cell/table-caption
- HTML根元素
BFC的工作原理
形成一个封闭的空间，里面和外面的元素互不影响，具体表现有：
- 消除margin重叠
- 消除float的影响
网友评论