面试官追问方式路线图:
标准模型和ie模型
标准模型
ie模型
css如何设置这两种模型
box-sizing: conten-box 默认标准盒模型
box-sizing: border-box 设置为ie盒模型
js如何设置盒模型的宽和高
dom.style.width / height 只能取到内联的样式,取不到外联和style节点
dom.cruuentStyle.width / height 只有ie支持。
window.getComputedStyle(dom).width 兼容火狐和chrome。通用性更好
dom.getBoundingClientRect().width / height 获取到的宽和高是包含border的
这个方法能获取 left、top、right和bottom,单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。当滚动位置发生了改变,top和left属性值就会随之立即发生变化(因此,它们的值是相对于视口的,而不是绝对的)。
如果你需要获得相对于整个网页左上角定位的属性值,那么只要给top、left属性值加上当前的滚动位置(通过window.scrollX和window.scrollY),这样就可以获取与当前的滚动位置无关的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js运行机制</title>
</head>
<style>
.div {
width: 100px;
height: 100px;
background: red;
}
</style>
<body>
</body>
<div class="div" id="div"></div>
<script>
var div = document.getElementById('div');
console.log(div.style.width);
console.log(window.getComputedStyle(div).width);
console.log(window.getComputedStyle(div).background);
console.log(div.getBoundingClientRect().width);
console.log(div.getBoundingClientRect().left);
</script>
</html>
marign合并
定义:兄弟结构水平方向的margin正常,但是垂直方向上面的margin会合并,并且这里的取到的是较大的一个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<style>
/* common style */
.wrapper {
width: 400px;
height: 400px;
border: 2px solid red;
}
.wrapper > div {
width: 100px;
height: 100px;
background: gray;
}
/* test style */
.top {
margin-bottom: 100px;
}
.bottom {
margin-top: 100px;
}
</style>
<body>
<section class="wrapper">
<div class="top">我在上面</div>
<div class="bottom">我在下面</div>
</section>
</body>
<script>
</script>
</html>
上下两个方块间隔应该是200px,实际还是100px,marign发生了合并。
一般情况下,margin合并我们可以不处理,合理安排垂直方向的margin就能达到需求效果。
margin塌陷
定义: 父子结构的元素,垂直方向上的margin,会取最大那个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<style>
/* common style */
.wrapper {
width: 400px;
height: 400px;
border: 2px solid red;
}
.father {
width: 100px;
height: 100px;
background: gray;
}
.son {
width: 50px;
height: 50px;
background: yellow;
}
/* test style */
.father {
margin-top: 100px;
}
.son {
margin-top: 50px;
}
</style>
<body>
<section class="wrapper">
<div class="father">
<div class="son"></div>
</div>
</section>
</body>
</html>
解决margin塌陷问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<style>
/* common style */
.wrapper {
width: 400px;
height: 400px;
border: 2px solid red;
}
.father {
width: 100px;
height: 100px;
background: gray;
}
.son {
width: 50px;
height: 50px;
background: yellow;
}
/* test style */
.father {
margin-top: 100px;
overflow: hidden;
/* trigger BFC solve marign collapse */
}
.son {
margin-top: 50px;
}
</style>
<body>
<section class="wrapper">
<div class="father">
<div class="son"></div>
</div>
</section>
</body>
</html>
黄色小块移动到了灰色小块的下方
BFC(边距重叠解决方案)
面试会问的五个方面
- 基本概念:Block formatting context 块级格式上下文,它是一个独立渲染区域。
- 原理(渲染规则):
- (1)BFC元素垂直方向的边距会发生重叠。
- (2)BFC的区域不会与浮动元素的box重叠。
- (3)BFC在页面上是一个独立的容器,外面的元素不会影响里面的元素,里面的元素也不会影响外面的元素。
- (4)计算BFC高度时,浮动元素也会参与计算。
- 如何创建BFC:
- (1)float值不为none。
- (2)position不是static或relative。
- (3)display是table相关的。
- (4)overflow不是visible
- 使用场景:
- (1)解决margin塌陷。
- (2)清除浮动。
- (3)不与浮动元素相重叠。
不与浮动元素相重叠实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<style>
/* common style */
.wrapper {
width: 400px;
height: 400px;
border: 2px solid red;
}
/* test style */
.left {
width: 100px;
height: 200px;
float: left;
background: gray;
}
.right {
height: 220px;
background: green;
}
</style>
<body>
<section class="wrapper">
<div class="left"></div>
<div class="right"></div>
</section>
</body>
<script>
</script>
</html>
发现有一个蔓延的效应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<style>
/* common style */
.wrapper {
width: 400px;
height: 400px;
border: 2px solid red;
}
/* test style */
.left {
width: 100px;
height: 200px;
float: left;
background: gray;
}
.right {
height: 220px;
background: green;
overflow: auto;
/* trigger BFC */
}
</style>
<body>
<section class="wrapper">
<div class="left"></div>
<div class="right"></div>
</section>
</body>
<script>
</script>
</html>
加上overflow: auto会发现,不与浮动元素相重叠了。
清除浮动示例
bfc的子元素即使是float也会参与计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<style>
/* common style */
.wrapper {
width: 400px;
height: 400px;
border: 2px solid red;
}
.container {
margin: 10px;
background: gray;
/* overflow: auto; */
}
.floatelement {
float: left
}
</style>
<body>
<section class="wrapper">
<div class="container">
<div class="floatelement">this is float element</div>
</div>
</section>
</body>
<script>
</script>
</html>