浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响?
浮动元素脱离了普通文档流,文档的普通流中的元素表现的就像浮动元素不存在一样。浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 对父容器的影响:如果父容器的子元素都是浮动元素,那么父容器会失去高度。
- 对其他浮动元素的影响:如果包含块儿太窄无法容纳水平排列的几个浮动元素,那么其它浮动块儿向下移动,直到有足够的空间,如果浮动元素的高度不同,那么向下移动的时候可能被卡住。
- 对普通元素的影响:因为浮动元素脱离了文档的普通流,文档的普通流中的元素表现的就像浮动元素不存在一样。
- 对文字的影响:文字会感应到浮动元素的存在,并产生文字环绕浮动元素的效果。
清除浮动指什么? 如何清除浮动? 两种以上方法
清楚浮动指解决浮动元素父容器高度塌陷问题。
- 在父容器最后添加一个空div,并清理这个div。
clear:both;
- 使父容器生成一个BFC,因为BFC可以包含浮动。
规定满足下列CSS声明之一的元素便会生成BFC。
- 根元素
- float的值不为none
- overflow的值不为visible
- display的值为inline-block、table-cell、table-caption
- position的值为absolute或fixed
- 通用的清除浮动方法。
/*方法1*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:block;
clear:left;
}
/*方法2*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
clear:both;
}
有几种定位方式,分别是如何实现定位的,参考点是什么,使用场景是什么?
|定位方式|实现方式|参考点|使用场景|
| :--------- :|-----------|----------|------------|
|static|默认值,没有定位,元素出现在正常的流中。|无||
|relative|相对定位,元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。|元素本身位置|元素的偏移|
|absolute|绝对定位,元素框从文档流中删除,元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。|距离最近的非static元素,否则为body|元素垂直水平居中|
|fixed|固定定位,生成绝对定位元素,但不随着滚动条的移动而改变位置。|浏览器窗口|登录框覆盖层|
z-index 有什么作用? 如何使用?
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。如果为正数,则离用户更近,为负数则表示离用户更远。Z-index 仅能在定位元素上奏效。
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
相对定位与负margin都可以是元素位置发生偏移。
区别:使用负margin的元素在文档流中的位置会变动,而相对定位不会,只是显示的位置发生变化。
BFC 是什么?如何生成 BFC?BFC 有什么作用?举例说明
BFC的全称是 Block Format Content,块级格式化上下文。
规定满足下列CSS声明之一的元素便会生成BFC。
- 根元素
- float的值不为none
- overflow的值不为visible
- display的值为inline-block、table-cell、table-caption
- position的值为absolute或fixed
BFC 作用
- BFC会阻止垂直外边距(margin-top、margin-bottom)折叠
按照BFC的定义,只有同属于一个BFC时,两个元素才有可能发生垂直Margin的重叠,这个包括相邻元素,嵌套元素,只要他们之间没有阻挡(例如边框,非空内容,padding等)就会发生margin重叠。
因此要解决margin重叠问题,只要让它们不在同一个BFC就行了,但是对于两个相邻元素来说,意义不大,没有必要给它们加个外壳,但是对于嵌套元素来说就很有必要了,只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠 - BFC不会重叠浮动元素
- BFC可以包含浮动。
在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
-
相邻元素外边距合并。第一个元素的下外边距与第二个元素的上外边距会发生合并。
-
父子外边距合并。假设没有内边距或边框把外边距分隔开,那么它们的上和/或下外边距也会发生合并。
-
空元素外边距合并。假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并。
如果这个外边距遇到另一个元素的外边距,它还会发生合并: