1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
浮动元素有什么特征：
1.浮动元素会脱离标准流，不占据普通文档流的空间,，浮动的几个元素特定的方向排列，遇到父级边界或相邻的浮动元素，浮动元素之间不会发生重叠的现象，也不会发生外边距重叠的现象。
1.对没有设置高度的父元素会引起父元素的塌陷，
2.对其他浮动元素，如果父元素的宽度足够，则几个浮动元素会显示在同一行。如果宽度不够，则会向下移动。
3.如果普通元素位于浮动元素之前，则不会发生任何变化，若普通元素为于浮动元素之后，则普通元素会覆盖浮动的元素
4.文字所在的行框（display：inline-block）会围绕在浮动元素周围。
2清除浮动指什么? 如何清除浮动? 两种以上方法
清除浮动是指：元素的侧边不允许出现浮动元素，使得不设置高度的父盒子塌陷的问题得到了解决。
1.在浮动元素周后的元素加上 clear：both
.clearfix{
overflow:hidden;
_zoom:1/*for ie 6*/}
2.在浮动的元素上加一个类：clear：：after{
display:block;
clear:both;
content:"";
}
3.利用BFC原理清除浮动，在浮动元素的父盒子上加：overflow：hidden或浮动或display：inline-block等
3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
3.1：inherit
从父元素继承position属性的值
3.2：static默认值，元素相对于正常流中
3.3：relative 相对定位，相对于元素正常位置的定位变化,属性值有left，top，right，bottom
3.4：absolute绝对定位，相对于非static定位以外的第一个祖先元素进行定位。属性值有left，top，right，bottom
3.5：fixed固定定位相对于浏览器串口进行定位。属性值有left，top，right，bottom
3.6：sticky兼容性差一般不用
4.z-index 有什么作用? 如何使用?
.z-index设置了在z轴方向上的堆叠顺序。
使用在position为非static的元素上，且z-index的只能在兄弟元素之间进行比较
参照http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
position:relative 是相对于自己原来的位置发生偏移，不会影响其他的元素在普通流中的位置。而margin出来让元素发生偏移，还会影响其普通流中的元素。
6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC可以格式化上下文，可以理解为BFC为一个箱子，箱子不受任何外界的影响，只管好内部。
形成条件：
1：float：left/right
2:position为非static
3.display：inline-block
4.display:table-cell
5.display:flow-root
6.overflow:为非visible
7.display：table-caption
应用：
1.两栏布局
2.清楚内部浮动。如没有高度的父元素中内部有几个浮动的元素，给父元素添加overflow：auto就会避免了浮动带来的塌陷问题。
3.解决了“外边距重合的问题”
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例。
·1.相邻的元素外边距合并，当二者都有外边距的时候，取二者最大
2.父盒子与子盒子会发生外边距合并
如何合并
1.当两个外边距发生合并的时候，取二者最大的。不管正负值
2.当两个外边距值是一正一负的时候，然后是二者进行相加取的值
不让相邻元素合并的方法是：形成一条分隔线
1.加padding，border，或clear分隔开
2.形成BFC
图1
解决办法
图2
代码1https://jsbin.com/desoviyete/edit?output
代码2https://jsbin.com/joyigofeso/edit?output
网友评论