浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
- 浮动元素脱离了正常的文档流，使普通文档流的元素无法识别浮动元素，文档的普通流中的元素表现的就像浮动元素不存在一样。
- 普通文档流中的行内框（如文本）能够感知到浮动元素的存在，能够实现简单的文字环绕效果，这也是浮动出现的本质。
- 浮动元素直到碰到它的包含框或另一个浮动框的边缘。
- 浮动元素具有BFC特性，如浮动元素间不会发生外边距重叠。
- 清理浮动后，该元素的边框与浮动元素的外边距相邻，即外边距可能在浮动框内。
- 浮动元素具有包裹性，在没有设置width的情况下，宽度由内容撑开。
- 即使是inline元素，浮动后也能显示的设置宽高。
影响： - 因为其不再普通文档流中， 能造成父元素“高度塌陷”。
- 其他浮动元素会"察觉"到浮动元素的存在按照从左到右的"正常文档流"排列。
- 普通元素会表现的像浮动元素不存在一样，不过行内框（如文本）能感知到。
- 行内框（如文本）会环绕浮动元素，实现文字环绕效果。
清除浮动指什么? 如何清除浮动? 两种以上方法
- 清楚浮动指的是解决浮动所带来的父容器高度塌陷，行内元素环绕浮动元素，浮动元素覆盖普通元素等问题。
- 第一种方法，为父容器设置overflow:hidden.
-
-
- 第二种方法，给父容器增加一个空元素。
-
有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
z-index 有什么作用? 如何使用?
- z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
- z-index属性适用于定位元素（position属性值为 relative 或 absolute 或 fixed的对象），用来确定定位元素在垂直于显示屏方向（称为Z轴）上的层叠顺序，也就是说如果元素是没有定位的，对其设置的z-index会是无的。
- 如果两个元素都没有定位发生位置重合现象或者两个都已定位元素且z-index相同发生位置重合现象，那么按文档流顺序，后面的覆盖前面的。
- 如果两个元素都没有设置z-index，使用默认值，一个定位一个没有定位，那么定位元素覆盖未定位元素.
- 如果父元素z-index有效，那么子元素无论是否设置z-index都和父元素一致，会在父元素上方。
- 如果父元素z-index失效（未定位或者使用默认值），那么定位子元素的z-index设置生效。
- 如果兄弟元素的z-index生效，那么其子元素覆盖关系由父元素决定。
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- 负margin会使元素在文档流中的位置发生偏移，它会放弃偏移之前占据的空间，紧挨其后的元素会填充这部分空间；
- 相对定位后元素位置发生偏移，它仍会坚守原来占据的空间，不会让文档流的其他元素流入。
BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
- BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
1、内部的Box会在垂直方向，一个接一个地放置。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3、每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4、BFC的区域不会与float box重叠。
5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6、计算BFC的高度时，浮动元素也参与计算. - 哪些元素会生成BFC?
1、根元素
2、float属性不为none
3、position为absolute或fixed
4、display为inline-block, table-cell, table-caption, flex, inline-flex
5、overflow不为visible - BFC的应用。
- 自适应两栏布局。
-
- 清楚内部浮动
-
- 防止垂直外边距合并。
-
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
- 相邻元素：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
- 父子元素：当一个元素包含在另一个元素中时（如没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
- 空块元素：如果存在一个空的块级元素，其 border、padding、inline content、height、min-height 都不存在，那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。
如何合并
- 两个相邻的外边距都是正数时，合并取它们两者之间较大的值。
- 两个相邻的外边距都是负数时，合并取两者绝对值的较大值。
- 两个外边距一正一负时，合并取两者相加的和。
如何不让相邻元素外边距合并？
- 两个元素外边距会不会合并主要看它们外边距之间有没有分界线存在。要想让两个元素的外边距不合并，就要让它们之间有道分界线，这个分界线可以是border，padding或者是BFC形成的独立空间。
- 设置border或padding使外边框隔离。
- 设置父元素overflow属性取值为除visiable外的其他值，构建BFC区域进行隔离，该元素和它的子元素之间的margin不会被折叠。
- 设置浮动元素(float:left/right)，不与任何元素的外边距合并。
- 设置绝对定位元素（position:absolute），不与任何元素的外边距合并。
- 设置display:inline-block的元素，不与任何元素的外边距合并。
网友评论