本文是学习慕课网上课程前端跳槽面试必备技巧的学习笔记,便于之后复习。
从以下方面理解盒模型
- 基本概念:标准模型和IE模型
- css如何设置这两种模型
- js如何获取盒模型对应的宽和高
- 边距重叠
1.基本概念
由里向外content,padding,border,margin.两种标准分别是标准模型和IE模型。
标准模型和IE模型的区别?
计算宽和高的方式不同,标准模型的宽高是内容区的宽高,IE模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高
2.css如何设置这两种模型? 默认的是什么?
使用CSS3 的属性box-sizing
/*标准模型 浏览器默认方式*/
box-sizing:content-box;
/* IE模型 若设置width=200其border=2px无padding内容区实际大小为 196px */
box-sizing:border-box;
3.js如何设置和获取盒模型对应的宽和高?
dom是getElementById拿到dom节点
1)这种方式只能取到dom元素内联样式所设置的宽高,也就是说如果该节点的样式是在<style></style>标签中或外联的CSS文件中设置的话,通过这种方法是获取不到dom的宽高的。
dom.style.width/height
2)这种方式获取的是在页面渲染完成后的结果,就是说不管是哪种方式设置的样式都能获取到。但这种方式只有IE浏览器支持。
dom.currentStyle.width/height
3)这种方式的原理和2)是一样的,这个可以兼容更多的浏览器,通用性好一些。
window.getComputedStyle(dom).width/height
4)这种方式是根据元素在视窗中的绝对位置来获取宽高的
dom.getBoundingClientRect().width/height
5)这个是最常用的,也是兼容最好的。
dom.offsetWidth/offsetHeight
4.边距重叠
1)什么是边距重叠
当两个垂直外边距相遇时,它们将形成一个外边距。例如:给两个相邻的div分别设置margin-bottom:20px和margin-top25px,然后你会发现两个div之间的间距不是45px,而是20px和25px中的较大值25px 这就是重叠了。
如下图,当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生合并:
当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的顶和底边界也发生合并:
2)边距重叠解决方案(BFC-- Block Formatting Context )
BFC原理:
①.内部的box会在垂直方向,一个接一个的放置
②.每个元素的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)
③.box垂直方向的距离由margin决定,属于同一个bfc的两个相邻box的margin会发生重叠
④.bfc的区域不会与浮动区域的box重叠
⑤.bfc是一个页面上的独立的容器,外面的元素不会影响bfc里的元素,反过来,里面的也不会影响外面的
⑥.计算bfc高度的时候,浮动元素也会参与计算
3)如何创建BFC?
①.float属性不为none(脱离文档流)
②.position为absolute或fixed
③.display为inline-block,table-cell,table-caption,flex,inine-flex
④.overflow不为visible即overflow为hidden或auto
⑤根元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.top{
height:100px;
margin-bottom:30px;
background: #0ff;
}
.middle{
height:100px;
margin-top: 30px;
margin-bottom: 30px;
}
.bottom{
height:100px;
margin-top:30px;
background: #ddd;
}
</style>
</head>
<body>
<section class="top">
<h1>上</h1>
margin-bottom:30px;
</section>
<!-- 没有使用bfc,上下边距重叠 -->
<section class="middle">
<h1>中</h1>
margin-top:30px;
margin-bottom:30px;
</section>
<!-- 给下面这个块添加一个父元素,在父元素上使用overflow:hidden创建bfc -->
<div style="overflow:hidden">
<section class="bottom">
<h1>下</h1>
margin-top:30px;
</section>
</div>
</body>
</html>