CSS盒模型的认识

根据慕课学习视频总结的笔记
基本概念：标准模型+IE模型
CSS盒模型的认识
标准模型的宽和高就是指content的宽和高

IE模型的宽和高=content+padding+border
标准模型和IE模型的区别
就是计算宽高不同
CSS如何设置这两种模型
box-sizing:content-box ——标准模型（浏览器默认）
box-sizing:border-box ——IE模型
JS如何设置获取盒模型对应的宽和高

dom.style.width/height ——只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的。
dom.currentStyle.width/height ——拿到的渲染后的结果，三种CSS设置方式都能拿到，但是仅IE支持
window.getComputedStyle(dom).width/height ——兼容性更好，通用更好
dom.getBoundingClientRec().width/height ——计算一个元素的绝对位置，来获取宽高
dom.offsetWidth/offsetHeight ——最常用的

实例题(根据盒模型解释边距重叠）
CSS盒模型的认识
这个父元素的高是多少？
对于这个问题

这样可以看见父元素是100的高
源码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		padding:0;
		margin:0;
	}
	.mo{
		background-color: blue;
	}
	.child{
		background-color: pink;
		height:100px;
		margin-top: 10px;
	}
	</style>
</head>
<body>
	<div class="mo">
		<div class="child"></div>
	</div>
</body>
</html>

而如果加上 overflow: hidden;
则父元素的高变为110
CSS盒模型的认识
这样就给父级元素创建了BFC

BFC的基本概念
BFC就是块级格式化下文
BFC的原理（渲染规则）

BFC的垂直方向的边距会重叠
BFC的区域不会与浮动元素重叠
BFC是个独立的容器，外面不会影响里面，里面不会影响外面
计算BFC的高度，浮动元素也会参与计算

如何创建BFC

float不为none
position不为static或者relative
display为inline-block,table-cell,table-caption,flex,inine-flex
overflow不是visible

BFC的使用场景

解决BFC垂直方向边距重叠的问题
——给子元素加个父元素，父元素的属性是overflow：hidden
这个很容易，不演示

BFC不与float重叠
CSS盒模型的认识
右侧的入侵了左边区域
代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		padding:0;
		margin:0;
	}
	.mo{
		background-color: blue;
	}
	.child1{
		background-color: pink;
		height:100px;
		float:left;
		width:100px;
	}
	.child2{
		background-color: red;
		height:110px;
	}
	</style>
</head>
<body>
	<div class="mo">
		<div class="child1"></div>
		<div class="child2"></div>
	</div>
</body>
</html>

如果给右侧加上了overflow:hidden;就发生变化了
CSS盒模型的认识
清除浮动

CSS盒模型的认识
父级元素高度为0，不参与计算
同理，加了overflow:hidden 就有高度了

BFC就会考虑子元素的高度

相关推荐