HTML+CSS面试题总结：（第三天）

目录

9.position属性和值的含义

10.display:inline-block为什么显示间隙,如何删除间隙？

11.你对BFC的理解?

创建BFC

利用BFC解决问题

---

9.position属性和值的含义

position 属性规定元素的定位类型。

值	描述
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
absolute	生成绝对定位的元素，距离最近已经定位的父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
sticky(了解)	粘性定位(而sticky相当于加了一个滚动事件的处理，当页面滚动到相对应的元素上，就会变成固定定位的效果。当滚动到父元素不在可视区域范围内时，定位效果就会消失。)
static	默认值。没有定位，元素出现在正常的流中

10.display:inline-block为什么显示间隙,如何删除间隙？

1. 将子元素放置在同一行
2. 为父元素中设置font-size: 0，在子元素上重置正确的font-size
3. 为inline-block元素添加样式float:left
4. 设置子元素margin值为负数

11.你对BFC的理解?

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域。

创建BFC

1. html根元素
2. 设置浮动,float的值是left或者right
3. 设置定位

• • position不是static或者relative
  • 是absoulte或者fixed

1. display的值是inline-block,table-cell(表格单元格)
2. 设置overflow

• • overflow的值不是visible
  • 是hidden，auto，scroll

1. 弹性布局，flex

利用BFC解决问题

1. 解决外边距的塌陷问题(垂直塌陷)
2. 利用BFC解决包含塌陷
3. 清除浮动产生的影响
4. BFC可以阻止标准流元素被浮动元素覆盖