您当前位置: 南顺网络>> 官方资讯>> 建站知识

一些有趣的 CSS 魔法和布局(上)

懒加载占位图自适应

在商城中展示商品图片时,如果图片较多,一种比较好的体验是:会先有一个占位图,目的是为了让页面无抖动,也就是所谓的图片懒加载效果。但是,当遇到适配时就比较头痛,特别是手机的横竖屏切换。如果是通过 JavaScript 计算的话,就可能会出现抖动现象。

本着能用 CSS,就不用 JS 去实现的原则,就有了下面这种方案:

<div class="img-ratio">  
   <img src="http://via.placeholder.com/640x384"> 
 </div>
.img-ratio {   
  width: 100%;     
  position: relative;     
  padding-top: 75%;
} 
.img-ratio > img {   
  width: 100%;     
  height: 100%;    
   position: absolute;     
   top: 0;     
   left: 0; 
   }

可以适配不同屏幕,只要 UI 提供一张 4:3 的占位图即可。下图展示了不同宽高,但比例相同的 2 张图,都能完美地居中显示。

169a07e39ddd22b0.jpg

它的原理是:

  • 根据容器的宽度,按照宽高比例,自动计算出容器的实际大小,并且让容器内的如 img 等子元素自适应宽高。

  • 图片父容器宽度 100%,父容器的高度百分比为:100 * 3 / 4 = 75%。

  • 图片 absolute 并且完全铺满父容器。

移动端的横向滚动条

移动端的界面,寸土寸金。有时为了控制屏幕的滚动长度,会将一些模块横向排列。但是,横向排列会产生一些布局问题。

比如,移动端的滚动条样式,依赖与手机浏览器,各不相同。一种解决方案是:把滚动轴隐藏掉,但不能 overflow-x:hidden;,不然就滚不动了。然后算好每一个横向的块的宽度,让最右侧的块露出一部分,这样用户就知道右侧的屏幕之外还有内容,可以横向滑动。

又如果横向滚动的宽度是未知的,因为可能会随着业务的需要,改变横向模块的个数,那么横向排布就没法用 float 了。因为用了浮动,就得知道整个横向滚动的宽度,整个的宽度要比浮动块累加起来的宽度更宽,才能保证浮动不换行。

所以,就有了下面这样的写法:

<div class="wrapper">   
  <ul>      
     <li>1</li>         
     <li>2</li>         
     <li>3</li>         
     <li>4</li>         
     <li>5</li>         
     <li>6</li>   
  </ul>
</div>
.wrapper {   
  width: 340px;  
  height: 80px;     
  overflow: hidden; 
 } 
.wrapper ul {  
   height: 96px;     
   width: 100%;     
   white-space: nowrap;     
   overflow-x: scroll;     
   padding: 0;     
   margin: 0; 
 } 
 .wrapper li {
      display: inline-block;     
      width: 80px;     
      height: 80px;     
      background-color: #ddd;     
      line-height: 80px;     
      text-align: center;     
      font-size: 20px;    
      margin-right: 10px;
  }

它的思路是:ul 设置 white-space:nowrap;,li 设置 display:inline-block;。最外层的 div 利用高度差,把横向滚动条藏起来。

169a07fb35fc9e4c.jpg

顶部导航不定宽的居中展示

一些官网,有顶部导航栏,导航栏的内容区往往需要居中展示,两旁则留白,导航栏的下方可能还有根线或者阴影,作为区分顶部与主体内容。

.center-float { 
    float: left;     
    position: relative;     
    left: 50%; 
  } 
.center-float > ul {
     position: relative;     
     left: -50%; 
 }

这是居中浮动的一种做法,再配合相对定位。

footer 置底

当页面主内容区高度不够时,footer 依然显示在最下面。这里当然不是指 position: fixed,footer是紧跟在内容区下方的。有 2 种方法。

html 结构如下:

<html>   
  <body>       
    <div id="content">....</div>         
    <div id="footer">....</div>   
  </body>
</html>

1、margin & padding

html, body {  
   height: 100%;
 } 
 $footer-height: 30px; 
 #content {  
    min-height: 100%;     
    margin-bottom: -$footer-height;     
    padding-bottom: $footer-height;
  }
   #footer { 
       line-height: $footer-height;     
       text-align: center; 
    }

2、flex 布局

$footer-height: 30px;
 html { 
     height: 100%;
 } 
 body {  
    min-height: 100%;     
    display: flex;     
    flex-direction: column;
 } 
 #content {     
     flex: 1;
 }
  #footer { 
      line-height: $footer-height;     
      text-align: center; }

超宽的背景图片居中

一些传统的门户网站,它们的主内容区宽度大致为 980px 或 1000px 这样的经典宽度。有时候,会把较宽的图片作为整体背景图,居中放置,并且不要横向滚动轴,可以这么做:

.wrapper {     min-width: 1000px;     height: 800px;     background: url(test.jpg) no-repeat center top; } .mainContent {     position: relative;     width: 1000px;     margin: 0 auto; } 复制代码

::after 实现水平垂直居中

伪元素也能用来实现居中么?当时看到的一感觉就觉得挺神奇的,看下面这个例子:

<div class="wrapper">   
  <img src="test.png"> 
</div>
.wrapper { 
    width: 300px;     
    height: 300px;     
    border: 1px solid #ccc;     
    text-align: center; }
 .wrapper::after {
      content: '';     
      display: inline-block;     
      vertical-align: middle;     
      height: 100%;
      } 
  .wrapper > img {
       vertical-align: middle;
        }

水平方向很好理解。垂直方向,可以理解为 ::after 把 img 往下拉到了中间。





编辑:--史志成