margin的问题:
1.margin-top向上传递
解决:1.父元素border边框,2.父元素使用overflow:hidden
3.为父元素或者子元素声明绝对定位,4.为父元素或者子元素声明浮动
2.margin上下叠压
解决
1.使用margin给其中一个元素加预想的margin值
2.没有特殊情况的话,使用padding代替
块元素的特征:1.默认独占一行,2.没有宽度时,默认撑满一行,3.支持所有css命令
内联元素的特征:1.同一行可以跟同类的标签,2.内容 撑开宽度,3.不支持宽高,
4.不支持上下的margin,5.代码换行被解析
清除浮动的方法:
1.加高度(扩展性不好)
2.给父元素加浮动(页面所有元素都假浮动,margin左右auto失效)
3.inline-block (margin左右auto失效)
4.空标签清除浮动 <div class="clearfix"></div> .clearfix{clear:both;} (每个要清楚浮动都要加)
5.after伪类清除浮动
BFC(标准浏览器)
1.float的值不为none;
2.overflow的值不为visible;
3.display的值为table-cell,table-caption,inline-block中的一个;
4.position的值不为relative和static;
5.width | height | min-width | min-height 不为auto;
haslayout(IE浏览器)
1.zoom不为normal;
只要触发了BFC或者haslayout,这个区域就是独立的不受外界影响
相对定位:
1.不影响元素本身的特性;
2.不使元素脱离文档流(元素移动之后原始位置会被保留)
3.如果没有定位偏移量,对元素本身没有任何影响
4.提升层级