2018-06-06 盒模型、外边距叠加和定位模型
css相关知识.png
一、盒模型
1.1 标准模式
width = content.width；设置的宽度只等于内容的宽度
height=content.height；设置的高度只等于内容的高度
标准盒模型.png
1.2 怪异模式（IE浏览器）
在IE6，在混杂模式中使用自己的非标准盒模型。这些浏览器的width属性不是内容的宽度而是内容，内边距和边框的宽度总和。
width = content.width + padding.width + border.width
height = content.height + padding.height + border.height
怪异盒模型.png
IE现在的版本的盒模型是符合标准模式的。
1.3 box-sizing
border-box：怪异模式
content-box：标准模式
二、外边距叠加
当两个或更多垂直边距相遇时，它们将形成一个边距，这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。
2.1 当一个元素包含在另一个元素中时（假设没有内边距或边框将外边距分开），它们的顶和或底外边距也会发生叠加。
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{ padding: 0px; margin: 0px;
} .box1{ width: 200px; height: 200px; background-color: #e8e8e8; margin-top: 10px;
} .box2{ width: 200px; height: 150px; background-color: green; margin-top:20px;
} </style></head><body>
<div class="box1">
<div class="box2"></div>
</div></body></html>
叠加1.png
然而在有内边距和边框分开的情况下，就可以消除这种叠加效果的产生。
.box1{ width: 200px; height: 200px; background-color: #e8e8e8; margin-top: 10px; border: 1px solid yellow;
}.box2{ width: 200px; height: 150px; background-color: green; margin-top:20px; border: 1px solid red;
}
添加边框.png
所以，避免叠加1效果的产生的最好方法就是为元素设置上内边距和边框。
2.2 当一个元素出现在另一个元素上面时，第一个元素的底外边距和第二个元素的顶外边距发生叠加。
.box1{ width: 200px; height: 150px; background-color: #e8e8e8; margin-bottom: 30px;
}.box2{ width: 200px; height: 150px; background-color: green; margin-top: 20px;
}
叠加2.png
但是这种情况下为两个元素都添加边框就不起效果了
.box1{ width: 200px; height: 200px; background-color: #e8e8e8; margin-bottom: 10px; border: 1px solid yellow;
}.box2{ width: 200px; height: 150px; background-color: green; margin-top:20px; border-top: 1px solid green;
}
添加边框.png
消除这种情况出现的最好方法就是，为相邻的元素设定相同的外边距，要设置margin-top就都设置margin-top
2.3 一个空元素，它有外边距，但是没有边框和内边距。在这种情况下，顶外边距和底外边距就碰到了一起，它们会发生叠加。
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{ padding: 0px; margin: 0px;
} .box1{ width: 200px; margin-top: 30px; margin-bottom: 20px;
} </style></head><body>
<div class="box1"></div></body></html>
叠加3.png
实际上，从效果上面看上去，margin-top和margin-bottom都是依旧存在的，然而接下来再添加一个元素的时候就会发现区别。
所以避免这种外边距叠加的效果出现，最好的就是千万不要为空元素添加外边距。
2.4 上面的空元素的外边距如果碰到另一个元素的外边距，会继续发生叠加，正好可以看到上面一种情况叠加的效果。
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{ padding: 0px; margin: 0px;
} .box1{ width: 200px; margin-top: 30px; margin-bottom: 20px;
} .box2{ width: 200px; margin-top: 30px; margin-bottom: 20px;
} </style></head><body>
<div class="box1"></div>
<div class="box2">外边距叠加</div></body></html>
叠加4.png
叠加4的效果是在叠加3的margin-top和margin-bottom叠加成为margin-bottom之后，然后与下一个元素的margin-top继续叠加，产生现在的效果。
只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会叠加。
三、定位模型 ：普通流、浮动和绝对定位。
3.1 普通流
除非专门指定，否则所有框都在普通流中定位。顾名思义，普通流中元素框的位置由元素在HTML中的位置决定。
相对定位实际上被看做普通流定位模型的一部分，因为元素的位置是相对于它在普通流中的位置的。
3.2 浮动：脱离文档流
float属性
float：left
float：right
clear：both清除浮动
请参考2018-05-23 清除浮动、左边固定右边自适应、水平垂直居中这篇文章
3.3 绝对定位 ：脱离文档流
position：absolute
绝对定位的元素的位置是相对于距离它最近的那个已定位的祖先元素确定的。如果元素没有已定位的祖先元素（也就意味着一定要使用position设置定位方式），那么它的位置是相对于包含块的。固定定位 position：fixed
固定定位是绝对定位的一种，差异在于固定元素的包含块是视口，这就使得我们能够创建总是出现在窗口中相同位置的浮动元素。
3.举例：右下角回到顶部
我们经常在网站上看到在页面下拉时右下角出现回到顶部的按钮，那么这样的按钮就是通过固定定位来实现的，往往需要通过使用JS来控制其动态效果。
.top_btn{ position: fixed; right: 10px; bottom: 10px;
}
作者：瑾瑜爱上猫
链接：https://www.jianshu.com/p/3a69c4c2d569
共同学习，写下你的评论
评论加载中...
作者其他优质文章
