美文网首页让前端飞程序员
一周一章前端书·第23周:《HTML与CSS进阶教程》S02E1

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

作者: 梁同学de自言自语 | 来源:发表于2018-02-21 01:44 被阅读24次

    第13章:CSS实战技巧

    13.1 水平居中

    13.1.1 非块元素的水平居中

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

    13.1.2 块元素的水平居中

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

    13.2 垂直居中

    • 单行文字垂直居中
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                div{
                    height: 40px;
                    line-height: 40px;
                    border: 1px dashed gray;
                }
            </style>
        </head>
        <body>
            <div>单行文字垂直居中</div>
        </body>
    </html>
    
    • 多行文字的垂直居中
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                div{
                    display: table-cell;
                    vertical-align: middle;
                    height: 300px;
                    width: 500px;
                    border: 1px dashed gray;
                }
                
                span{
                    display: inline-block;
                }
            </style>
        </head>
        <body>
            <div>
                <span>
                    多行文字的垂直居中
                    名人实名举报信发布后被自行删除
                    中国网络直播用户规模达4.22亿 年增长率达22.6%
                    美国否决中资收购芝加哥证券交易所
                    中戏“艺考”今日拉开序幕 易烊千玺现身考场
                </span>
            </div>
        </body>
    </html>
    
    • inlineinline-blockblock块元素都可以通过position的方式实现垂直居中
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                .wrapper{
                    position: relative;
                    height: 200px;
                    width: 400px;
                    border: 1px dashed gray;
                }
                
                .content{
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-top: -25px;/*取自身height的一半*/
                    margin-left: -50px;/*取自身width的一半*/
                    width: 100px;
                    height: 50px;
                    background-color: gray;
                }
            </style>
        </head>
        <body>
            <div class="wrapper">
                <div class="content"></div>
            </div>
        </body>
    </html>
    
    • inline-block元素还可以通过table-cell结合vertical-middle来实现垂直居中
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                .wrapper{
                    display: table-cell;
                    vertical-align: middle;
                    text-align: center;
                    width: 440px;
                    height: 260px;
                    border:1px dashed gray;
                }
                
                img{
                    vertical-align: middle;
                    border: 1px solid black;
                }
            </style>
        </head>
        <body>
            <div class="wrapper">
                <img src="../img/weibo.png" alt="weibo" />
            </div>
        </body>
    </html>
    

    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'

    相关文章

      网友评论

        本文标题:一周一章前端书·第23周:《HTML与CSS进阶教程》S02E1

        本文链接:https://www.haomeiwen.com/subject/qasntftx.html