css fixed 滚动条_[CSS基础] 1 - 总结

1 - BFC

Block Formatting Context: 一块儿盒子的独立上下文。

很好理解，每个div 标签里的内容都是独立的部分。都是一个独立的渲染区域。

BFC: 独立渲染区域，内部和外部隔离开来。

// 根元素，即HTML元素
position: fixed / absolute
float 不为none
overflow 不为visible
display 的值为inline-block、table-cell、table-caption


同一个BFC的两个相邻块级子元素的上下margin会发生重叠

深入理解BFC - 小火柴的蓝色理想 - 博客园

2 - CSS选择器优先级

内联 > ID > CLASS > 标签

3 - 有哪些方式CSS可以隐藏页面元素？

• opacity: 0 透明度 占据空间
• visibility:hidden 占据空间 只是不显示
• display:none 删除了 dom节点，不占据空间
• overflow:hidden 把溢出box外的给隐藏

4 - em px rem区别？

• px pixel像素 针对分辨率而言的
• em 相对单位。指1em=16px 浏览器默认字提高是 16px。基准点为 父节点字体 的大小。
• rem root em 相对单位。根据 HTML根元素 的相对大小 来调整。

em是根据父节点, rem根据 HTML根元素。

5 - 水平 / 垂直 居中?

5.1 - 水平

1. 行内元素 - 文字或inline或inline-block

  text-align: center; // 水平
  height: 1000px;
  line-height: 1000px; // 针对单行文本 垂直

2. 块级元素 - 水平居中 margin: 0 auto;

3. absolute + 固定width + left 50% + margin-left: -0.5 * width

4. absolute + top left + margin

5.2 - 垂直

1.文本: line-height

2. inline-block: vertical-align:middle

3. absolute + 固定height + top 50% + margin-top: -0.5 * height

必须限定长宽

4. absolute + top bottom + margin auto

16种方法实现水平居中垂直居中

还有什么flex 兼容性不是很好 没怎么用过 参考: 解决flex布局新旧版本的兼容性写法

6 - position

• static: 正常文档流定位
• relative: 相对于 static
• absolute: 相对他的父级而产生偏移
• fixed: 指定位置, 根据屏幕视口的位置来指定的位置
• sticky: 类似 relative + fixed 合体。 例子: 原来在最下面，当滚动条滑动上去的时候，就sticky到最上面了。其在实际应用中的近似效果就是IOS通讯录滚动的时候的『顶屁股』。

7 - z-index

定义图层的位置。跟叠书一样。

8 - 盒模型理解

由下面四个组成:

• content
• padding
• border
• margin

标准模式盒子: content 就是标准的

怪异模式盒子: content = border + padding + content

9 - 为什么用translate来改变位置而不是定位？

• translate 是 transform 里一个值，translate 和 opacity 不会影响 浏览器 reflow或 repaint
• 但是定位会影响reflow 从而引发浏览器 repaint => composite => GPU

translate 是 会让浏览器 新创建个GPU图层。因此translate()更高效，可以缩短平滑动画的绘制时间。

10 - 三栏布局

1 - BFC

// 根元素，即HTML元素
position: fixed / absolute
float 不为none
overflow 不为visible
display 的值为inline-block、table-cell、table-caption

2 - position relative, absolute 定位布局

还有例如 flex, table 布局

11 - flex

• 根据不同分辨率和设备尺寸来影响布局。
• 优势是 弹性布局