粘性定位

postion 属性值共有6个:

  1. position: static // 默认值
  2. position: inherit // 继承父元素的postion值
  3. position: relative // 相对定位,遵循文档流
  4. position: absolute // 绝对定位,脱离文档流
  5. position: fixed // 固定定位
  6. position: sticky // 粘性定位

sticky是CSS规范中新加入的一个属性值。
这个属性值的作用表现为当一个列表元素位于一个可滚动区域内时,当滚动到特定的位置,例如顶部的时候,就会触发fixed特性,固定在顶部这样。
粘性定位的应用场景随处可见,例如segmentfault的文章页面中,顶部的导航条就使用了sticky。或者很多新闻类的app里面的粘性标题栏等等。

代码示例:

HTML

<main>
       <header>标题一</header>
       <div class="content">
       </div>
       <header>标题二</header>
       <div class="content">
       </div>
       <header>标题三</header>
       <div class="content">
       </div>
       <header>标题四</header>
       <div class="content">
       </div>
   </main>

CSS

main {
    width: 400px;
    height: 300px;
    margin: 200px auto;
    overflow: auto;
}
header {
    position: sticky;
    top: 0;
    height: 30px;
    background-color: blanchedalmond;
}

JS

let num = 20
let html = ''
for (var i = 0; i < num; i++) {
    html += `<p>${i + 1}</p>`
}
let contentsDom = document.getElementsByClassName('content')
let contentsArr = [...contentsDom]
contentsArr.forEach(item => {
    item.innerHTML = html
})

 

清浮动技巧

了解为什么页面元素会浮动之前先明白一个概念—— 块级格式化上下文:BFC(block formatting contexts) 默认是关闭状态
BFC的特性
* 块级格式化上下文会阻止外边距叠加
* 块级格式化上下文不会重叠浮动元素
* 块级格式化上下文通常可以包含浮动
CSS3里面对触发BFC这个规范做了改动,称之为:flow root

float
overflow
display
position(absolute,fixed)

表单元素
所有css3清浮动的几种方式为

overflow: hidden;
overflow: auto;
float: left;
display:inline-block;
position: fixed;

 

 

CSS布局垂直居中(已知高度和未知高度)

已知高度使用用传统的绝对定位-margin高度的一半方法,这里不多介绍。
未知高度常用的三种方法:
1.表格 cell-table方法

.parent1{
display: table;
background-color: #FD0C70;
}
.parent1 .child{
display: table-cell;
vertical-align: middle;
}

2. 决定定位 transform:translate(-50%;-50%)

.parent2{
position: relative;
}
.parent2 .child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

3.弹性布局 flex

.parent3{
display: flex;
justify-content: center;
align-items: center;
}