任务三小结

发表于   |   分类于   |  

position: sticky粘性定位

Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.

Sticky positioning is commonly used for the headings in an alphabetized listing. The B heading will appear just below the items that begin with A until they are scrolled offscreen. Rather than sliding offscreen with the rest of the content, the B heading will then remain fixed to the top of the viewport until all the B items have scrolled offscreen, at which point it will be covered up by the C heading.

1
2
> #one { position: sticky; top: 10px; }
>

  • 通俗点说position： sticky就像是相对定位和固定定位的结合体，设置了该属性的元素：
    • 不会脱离普通流，并保留元素在普通流中占位的大小
    • 若元素的的位置超出了容器的可视区域，元素在容器内固定在指定位置
    • 当祖先元素整体超出了容器的可视区域后，position由fixed转为relative
  • 激活条件：至少设置top，bottom，left，right中的一个

  • 一种应用场景——单词字母表。比如字母B下有3个单词boy、body、beauty，然后是字母C，依次下去。当B字母下的单词还在显示屏上的时候，字母B的position属性为fixed固定显示在屏幕上，当以B开头的单词在屏幕上消失后，字母B的position属性变为relative

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <div>
      <dl>
        <dt>A</dt>
        <dd>apple</dd>
        <dd>app</dd>
        <dd>age</dd>
        <dd>add</dd>
      </dl>
      <dl>
        <dt>B</dt>
        <dd>boy</dd>
        <dd>body</dd>
        <dd>beauty</dd>
        <dd>before</dd>
        <dd>bcz</dd>
      </dl>
      <dl>
        <dt>C</dt>
        <dd>cat</dd>
        <dd>cat</dd>
        <dd>cat</dd>
        <dd>cat</dd>
        <dd>cat</dd>
        <dd>cat</dd>
      </dl>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    * {
      margin: 0;
    }
    dt {
      background-color: #999;
      position: -webkit-sticky;
      position: sticky;
      top: 0; /* 设置固定的位置*/
    }

在线demo：由于兼容性原因请在Firefox或者Safari里打开，同时缩放浏览器至出现垂直滚动条

参考资料：

4种方式实现左右定宽中间自适应的三栏布局

NO.1 创建BFC，利用BFC不和浮动元素重叠的特性

HTML核心部分

  • 三栏的顺序分别为左-右-中
  • 左右两栏分别设置宽度以及左浮动和右浮动，脱离普通流，这时如果让中间栏高度大于2个边栏会发现两边栏实际上是叠在main上面的，因为main是块状元素，独占一行，浮动元素向相应的方法浮动，直到遇到容器的边框
  • 中间栏设置overflow：hidden创建BFC，这样就可以利用BFC不和浮动元素重叠的特性，让main的宽度自适应
  • 具体有关BFC的内容可以参考下面的链接
    1
    2
    3
    <div class="left">左边定宽</div>
    <div class="right">右边定宽</div>
    <div class="main">中间自适应</div>

CSS核心部分

1
2
3
4
5
6
7
8
9
10
11
.left {
    float: left;
    width: 200px
}
.right {
    float: right;
    width: 120px
}
.main {
    overflow: hidden; /*创建BFC*/
}

在线demo
参考资料：关于Block Formatting Context

NO.2 圣杯布局

HTML核心部分

  • 三栏的顺序为中-左-右，并包裹在warp容器内
  • 三栏同时设置float:left，左右两栏定宽、中间宽度100%
  • 利用负边距分别把left和right，这时视觉上left和right是叠在main上面的
  • 设置warp的左右padding分别为左右栏的宽度
  • 利用相对定位让left和right回到合适的位置
    1
    2
    3
    4
    5
    <div class="warp">
        <div class="main">中间自适应</div>
        <div class="left">左边定宽</div>
        <div class="right">右边定宽</div>
    </div>

CSS核心部分

  • left与main之间的20px间隔，可以利用相对定位时多加20个像素实现，同时warp设置padding的时候把这20px加进去
  • left与warp之间的20间隔，直接加20px的padding-left到warp上
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    .main {
      width:100%;
      float:left;
      background-color: red;
      height:300px;
    }
    .left {
      float: left;
      background-color: blue;
      height: 200px;
      width: 200px;
      margin-left: -100%;
      position: relative;
      left: -200px;
    }
    .right {
      float: left;
      background-color: yellow;
      height: 400px;
      width: 120px;
      margin-left: -120px;
      position: relative;
      right: -120px;
    }
    .warp {
      padding: 0 120px 0 200px;
    }

在线demo
参考资料：

NO.3 双飞翼布局

  • 双飞翼布局跟圣杯很像，区别在于圣杯利用padding控制main的位置，双飞翼用margin控制main的位置
  • 需要额外在main里面加一层div，用于margin控制，但是可以免去左右两栏的相对定位

HTML核心部分

1
2
3
4
5
6
7
<div class="main">
    <div class="main-warp">        
    中间自适应
    </div>
</div>
<div class="left">左边定宽</div>
<div class="right">右边定宽</div>

CSS核心部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.main {
  width:100%;
  float:left;
}
/*在双飞翼布局里，中间栏的边框、背景色要在`main-warp`里设置*/
.main-warp {
  background-color: red;
  height:300px;
  margin: 0 120px 0 200px; /*设置main的位置*/
}
.left {
  float: left;
  background-color: blue;
  height: 200px;
  width: 200px;
  margin-left: -100%;
}
.right {
  float: left;
  background-color: yellow;
  height: 400px;
  width: 120px;
  margin-left: -120px;
}

在线demo

NO.4 flex布局

HTML核心部分

  • 三栏的顺序为左-中-右，并包裹在warp容器内
  • warp设置display: flex，如果三栏高度自适应又希望顶部对齐，需要添加align-items: flex-start
  • 左右栏各自设置定宽
    1
    2
    3
    4
    5
    <div class="warp">
        <div class="left">左边定宽</div>
        <div class="main">中间自适应</div>
        <div class="right">右边定宽</div>
    </div>

CSS核心部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.main {
  flex: 1;
  background-color: red;
  height:300px;  
}
.left {
  background-color: blue;
  height: 200px;
  width: 200px;
}
.right {
  background-color: yellow;
  height: 400px;
  width: 120px;
}
.warp {
  display: flex;
}

在线demo
参考资料：

关于兼容性

  • 前三种方法支持IE8及以上浏览器和各种现代浏览器，demo里用了1个css3伪元素last-child，所以在IE8下面右边栏最后一个logo会有问题
  • flex布局部分支持IE10+和现代浏览器，具体参见CAN I USE

关于浮动清除

关于浮动清除，推荐几个资料

目前最优雅的打开清除浮动方式应该是这样的(具体理由参考上面第二篇)

1
2
3
4
5
.clearfix:after {
    content:" ";
    display:block;
    clear:both;
}