1. 浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
-
浮动元素的特征
-
float属性可以使一个元素脱离正常的文档流，不占据文档流中的空间，因此后面的元素会占据原本浮动元素的空间
-
-
影响
- 如果父容器中的子元素都浮动，会造成父容器高度塌陷
-
float属性值相同多个浮动元素按顺序依次排列，宽度不够时会被排到下一行（如果浮动元素的高度不一样，向下移动的时候可能会被卡住） - 文本和内联元素可以感知浮动元素，因此会环绕浮动元素排列
2. 清除浮动指什么? 如何清除浮动? 两种以上方法
- 浮动会让元素脱离文档流，不再占据文档流中的位置，但是会影响其周围的元素布局，为了某些元素的浮动布局，而又不影响其周围元素的布局，我们就需要使用清理浮动了
- 方法
- 在父元素的最后面添加一个
<div style="clear: both;"></div>，缺点是增加了无意义的标签 - 常用方法
.clearfix{ *zoom: 1; } /*兼容IE6,7*/ .clearfix::after{ content: ""; display: block; clear: left; }- 使父容器形成BFC，因为BFC可以包含浮动，达到清理浮动的效果
- 在父元素的最后面添加一个
3. 有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
-
inherit继承父元素 position 属性的值 -
static默认值，没有定位，元素出现在正常的文档流中（忽略top, bottom, left, right或者z-index声明） -
relative相对定位，相对于它自己正常位置的定位，通过top, bottom, left, right属性来设置偏移量，但是元素在文档中的位置还是保留的，不会影响其他元素的位置，只是视觉上的偏移- 使用场景：为绝对定位设定参照物或对元素自身位置进行局部调整
-
absolute绝对定位，相对于非stastic定位的第一个祖先元素进行定位，若没有已定位的祖先元素，则相对于根元素<html>进行定位，原位置不保留，对其他元素来说，绝对定位的元素的位置是不可见的，当设置left、top等属性时，以定位元素的内边框为基准进行定位- 使用场景：当想让元素参照特定参照物进行定位时使用。
-
fixed绝对定位，相对于屏幕视口的绝对定位，原位置不保留，对其他元素来说，绝对定位的元素的位置是不可见的，当设置left、top等属性时，以屏幕视口为基准进行定位- 使用场景：当想让元素一直出现在屏幕上某个位置时使用。
-
stickyCSS3新属性，表现类似position: relative;和position: fixed;的合体，在目标区域在屏幕中可见时，它的行为就像position: relative;而当页面滚动超出目标区域时，它的表现就像position: fixed;，它会固定在目标位置， 兼容性差，不常使用
4. z-index 有什么作用? 如何使用?
因为绝对定位的元素脱离了文档流，可以覆盖在页面上其他元素的上方，z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
z-index值可为负数z-index仅能在定位元素上奏效（非position: static;）！
5. position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- 使用负
margin，使元素位置发生了偏移，原位置会被其他后续元素占据，影响其他元素的位置。 - 使用
position: relative，元素在文档中的位置还是保留的，不会影响其他元素的位置，只是视觉上的偏移
6. BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
- BFC，块级格式化上下文（Block Format Content），创建了BFC的元素就是一个独立的盒子，盒子里布局不受外部影响，也不影响外部元素的布局
- 生成BFC
-
float除了none以外的值 - 绝对定位的元素
position: absolute / fixed; display: inline-block / table-cell / table-caption / flex / inline-flex-
overflow除了visible以外的值 -
<fieldset>元素
-
- BFC作用
7. 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
- 外边距合并的场景
- 必须是处于常规文档流（非
float和绝对定位）的块级盒子并且处于同一个BFC当中 - 都属于垂直方向上相邻的外边距
- 必须是处于常规文档流（非
- 合并规则
- 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
- 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
- 两个外边距一正一负时，折叠结果是两者的相加的和
- 去除外边距合并
- 加边框
border或者内边距padding - 生成BFC，使他们不在同一个BFC中
- 加边框
- 父子外边距合并示例
网友评论