浮动定位BFC边距合并
1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响?
当浮动元素的边框触碰到父元素的边框或者其他浮动元素的边框,他就会停下来。
浮动会让元素脱离文档流,如果浮动的元素后面有一个文档流中元素,那么这个元素的框会表现的和浮动元素不存在一样。但是框的文本内容会为浮动元素留出位置空间。
2.清除浮动指什么? 如何清除浮动? 两种以上方法
清除浮动:清除对应的单词是 clear,对应CSS中的属性是 clear:left | right | both | none;
(1)利用clear属性清楚浮动
(2)使父元素形成bfc
3.有几种定位方式,分别是如何实现定位的,参考点是什么,使用场景是什么?
Inherit 规定应该从父元素继承position的值
static 默认值,没有定位元素出现在正常的流中(忽略top,bottom,left,right或者z-index声名)
relative 生成相对定位的元素,相对于元素本身正常位置进行定位,因此left 20px会向元素的left位置添加20px;
absolute 生成绝对定位的元素,相对于static定位以外的第一个祖先元素进行定位,元素的位置通过left,top,bottom,right属性进行规定。
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位,元素的位置通过left,top,bottom,right属性进行规定。
Sticky CSS3新属性,表现类似position:relative和position:fixed的合体,在目标区域在屏幕中可见时,他的行为就像position:relative
4.z-index 有什么作用? 如何使用?
z-index 属性指定了一个元素及其子元素的 z-order。 当元素之间重叠的时候,z-order 决定哪一个元素覆盖在其余元素的上方显示。 通常来说 z-index 较大的元素会覆盖较小的一个。
对于一个已经定位的元素(即position属性值是非static的元素),z-index 属性指定:
1.元素在当前堆叠上下文中的堆叠层级。
2.元素是否创建一个新的本地堆叠上下文。
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
负margin文档流的位置发生偏移,position:relative文档流的位置不会发生偏移
6.BFC 是什么?如何生成 BFC?BFC 有什么作用?举例说明
BFC全称是Block Formatting Context,即块格式化上下文。包括浮动,绝对定位的元素,还有某些块容器(比如设置绝对定位,固定定位,浮动,inline-block,table-cell,over-flower:auto,hidden,scroll的块级元素。),会建立新的块级格式化上下文。
bfc会阻止垂直外边距的折叠,不会重叠浮动元素,可以包含浮动
7.在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例同一文档流中的两个相邻块级元素,会出现外边距合并。
合并方式:
(1)上下两个相邻的块级元素,会margin发生合并,合并的值以两者距离较大的值为准,可通过建立BFC来取消外边距合并;
(2)父子元素的外边距合并。可以给父元素添加边框,内边距或内容当做分界线,也可以让父元素形成bfc,这样就不会发生边距合并。