一周一章前端书·第23周：《HTML与CSS进阶教程》S02E10

第13章：CSS实战技巧

13.1 水平居中

13.1.1 非块元素的水平居中

• 文字、inline行内元素和inline-*复合行内元素用text-align:center来实现水平居中。复合行内元素包括：inline-block、inline-table和inline-flex等元素。

text-align:center;

13.1.2 块元素的水平居中

• block块元素通过margin-left:auto;margin-right:auto;实现水平居中

margin:0 auto;

13.2 垂直居中

• 单行文字垂直居中

    
        
        
        
    
    
        
单行文字垂直居中
    

• 多行文字的垂直居中

    
        
        
        
    
    
        

            
                多行文字的垂直居中
                名人实名举报信发布后被自行删除
                中国网络直播用户规模达4.22亿 年增长率达22.6％
                美国否决中资收购芝加哥证券交易所
                中戏“艺考”今日拉开序幕 易烊千玺现身考场
            
        
    

• inline、inline-block和block块元素都可以通过position的方式实现垂直居中

• inline-block元素还可以通过table-cell结合vertical-middle来实现垂直居中

13.3 CSS Sprite

• CSS Sprite技术是将零散的图片合并成一张大的背景图，然后利用background-position属性进行背景定位从而显示相应的小背景图。
• CSS Sprite的工具：
  • CSS Sprite Generator可以上传一个图片文件夹的压缩包，然后工具会自动生成雪碧图；
  • Sprite Cow可以选中雪碧图中某个图标，自动生成CSS代码；
• 虽然CSS Sprite很方便，但也存在明显的缺点，就是开发和维护比较困难。所以我们在使用CSS Sprite技术的时候，1. 应该在开发后期使用，如果在开发前期就使用，可能需要频繁的变换图标；2. 应该有条理地组织“雪碧图”，按照类型、风格、大小等分门别类放好图标；3. 控制好雪碧图的大小，如果图片超过200KB，会耗费更多的传输时间，则应该分隔成多个雪碧图

13.4 Icon Font图标

使用IonFont图标的四个步骤：

1. 从iconfont或者icomoon网站下载所需的图标字体文件到项目中；
2. 在CSS代码检查并调整@font-face属性，通常该属性会定义目标字体的.woff/.ttf/.svg/.eot等文件；
3. 在元素中通过iconfont和图标字符串来引用图标 class='iconfont user'；