基本概念:
标准模型+ IE模型
标准模型和IE模型区别
标准模型 width=content
IE模型 width=content+ padding+ border
CSS如何设置这两种模型
标准模型 box-sizing:content-box
IE模型 box-sizing:border-box
JS如何设置获取盒模型对应的宽和高
dom.style.width/height 只能获取内联属性
dom.currentStyle.width/height 拿到渲染以后的宽度和高度 只有IE支持
dom.getComputerStyle.width/height 拿到渲染以后的宽度和高度 兼容性好
dom.getBoundingClientRect().width/height left top width height 距离视窗的绝对位置
实例题(根据盒模型解释边距重叠)
screen 的高度是多少
<section class="screen">
<div class="child"></div>
</section>
* {
margin: 0;
padding: 0;
}
body {
padding: 30px 0;
}
.screen {
background: red;
overflow: hidden;
}
.child {
height: 100px;
margin-top: 10px;
background: #dedede;
}
BFC(边距重叠解决方案)
基本概念: BFC 块级格式化上下文
BFC原理
1:BFC容器的垂直方向上元素边距发生重叠
2:BFC区域不会与浮动元素重叠
3:BFC 是一个独立的容器 内外元素 互不影响
4:计算BFC高度的时候 浮动元素也会参与计算
如何创建BFC
1:float 的值不为none
2:position的值不是static 或者 relative;
3:display 各种不同的值 比如table
4:overflow: 不为 visible
BFC使用场景
1:边距重叠 在子元素外面包括BFC容器
2: BFC 不与float重叠
3: BFC清除浮动 高度会考虑子元素 的高度
//BFC
<section class="layout">
<div class="left">left</div>
<div class="right">right</div>
</section>
* {
margin: 0;
padding: 0;
}
.layout {
background: red;
}
.layout .left {
float: left;
width: 100px;
height: 100px;
background: pink;
}
.layout .right {
height: 110px;
background: #ccc;
overflow: hidden;
}
//实例2
<section class="layout">
<div class="left">left</div>
</section>
* {
margin: 0;
padding: 0;
}
.layout {
background: red;
float: left;
}
.layout .left {
float: left;
}