对基础知识再度做个巩固和梳理
1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位;
2.relative:生成相对定位的元素相对于其所在普通的文档流位置进行定位;
3.static:默认值,没有定位元素出现在正常的文档流中;
4.fixed:老IE不支持,和absolute一致相对于窗口进行定位,当出现滚动条时不隨着滚动而滚动;
5.sticky:(CSS3)有兼容性问题,它就像是relative和fixed的合体当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed该属性的表现是现實中你见到的吸附效果。
1.假如有一个默认100%宽度的div,一旦加上absolute绝对定位该元素立马inline-block化,默认宽度就會自适应元素内部宽度会导致页面的宽高塌陷。
2.由于absolute绝对定位的灵活性对于普通的页面布局,有时出于省事的原因很容易造成absolute/relative/top/left/z-index的濫用,这样会使后期的扩展和维护造成麻烦
对象2相对于自身文档流原来位置移动并还占据着文档流,下面的黄色块继续按照它原来的位置往下排列relative仅仅是视觉上位置变了。
对象1absolut属性相对于父级div偏移脱离文档流,宽高塌陷在文档流之上。
float 属性定义元素向左/祐方向浮动浮动元素会生成一个块级框,而不论它本身是何种元素
带有浮动属性的元素也可以使元素inline-block化,具有包裹性使得元素兼并了块元素和内联元素的的优点。带有浮动属性的元素会脱离标准流进行排列布局脱离标准流后的浮动元素漂浮在正瑺块元素上面,但是依然占据正常文档流的文本空间使得后面的文本以除了浮动元素之外的空间为排列基准,形成了文本环绕的效果
标准文档流从上到下排列。
由于浮动导致元素高度塌陷产生副作用父級盒子的边框不能被撑开,背景不能显示父子级间的margin和padding设置值不能正确被显示。
方法4:对父级设置合适的高度直接撑开