CSS中非布局样式(一)

9 篇文章 0 订阅

CSS布局是一块非常重要的内容,这里单独介绍非布局样式。非布局样式有下面几种分类(还有其它分类看系列文章):

字体,字重,颜色,大小,行高

这些是跟文字相关的样式。

字体族

族,顾名思义,就是一堆的东西,字体族就是一堆的字体,具体可以分为五个字体族:

  • serif 是衬线字体,字体周围会有一些装饰性的小勾角,英文解释就是:a short line at the top or bottom of some styles of printed letters 衬线,截线(部分印刷体的西文字母顶端或底部的短线)。比如 宋体就是衬线字体。
  • sans-serif 是非衬线字体,这种字体的笔划的 起和收 都是比较规整的。比如 黑体
  • monospace 是等宽字体,就是每一个字母占的空间都是一样的,我们一般在写代码的时候用的就是等宽字体。
  • cursive 是手写体,在网页中用的较少。
  • fantasy 是花体,在英文中很常见。
    这五个字体族并不代表某个具体的字体,而是当指定一个字体族的时候会从中找
多字体fallback

就是当一个指定的字体找不到时会接着往后找。
比如:在Microsoft系统里

body{
            font-family: "monaco";      
  }

虽然body设置的font-familymonaco,但我系统里没有这种字体,浏览器就会fallback用别的字体来渲染。
在这里插入图片描述
在实际项目中,每个系统会有不同的字体。
Mac系统自带的字体是"monaco" "PingFang SC",微软雅黑 在Mac系统中也会有用户安装,尤其是安装了office的用户基本上都会有微软雅黑字体,那就意味着,在写字体的顺序中如果 "Microsoft Yahei"写在最前面 Mac系统就会首先用"Microsoft Yahei"字体,但是在Mac系统中"Microsoft Yahei"字体的显示效果是没有"PingFang SC"好的。所以把只有一个平台会有的字体写在最前面,再把其它的写在后面,像下面:

.body {
            font-family: "PingFang SC", "Microsoft Yahei", monospace;
   }

注意:字体名称加引号,字体族 不能加引号

自定义字体

既然是自定义字体无非就是规定 a字体 长什么样,b字体 长什么样,如果我规定 a字体 长的是一个手机的图标,b字体 长的是一个电脑的图标,那就可以把文字当成图标用了,这就是所谓的 iconfont。比如:

html代码:

<div class="custom-font">你好 Hello World</div>

css代码:

@font-face {
            font-family: "IF";
            src: url("./IndieFlower.ttf");
        }
        .custom-font{
            font-family: IF;
        }

效果如下:
在这里插入图片描述
网上有很多图标库,比如 阿里巴巴矢量图标库,里面有很多丰富的字体图标。

行高的构成

行高是由 line-box 决定的,line-box 是由inline-box组成的,inline-box 的高度会决定行高的高度:

html代码:

<body>
    <div>
        <span class="c1">inline box 中文</span>
        <span class="c2">inline box</span>
        <span class="c3">inline box</span>
        inline box
        <span class="c5">inline box</span>
    </div>
</body>

css代码:

    <style>
        span {
            background: pink;
        }

        .c1 {
            line-height: 20px;
        }

        .c2 {
            line-height: 8px;
        }

        .c3 {
            line-height: 30px;
        }

        .c5 {
            line-height: 28px;
        }
    </style>

这里有五个span元素,它们的行高都不同,虽然它们的行高不同但它们渲染的高度是相同的,这涉及到文字的排版,文字排版中有几条线,底线和顶线之间是文本占据的区域, 默认情况下文字的排版对齐都是按照基线(baseline)对齐的,所以这些文本虽然行高不同但都是对齐的,行高会决定文字上下之间多余的宽度,进而把外面的盒子撑起来,所以line-height会撑起来inline-box的高度。
在这里插入图片描述
在这里插入图片描述

行高相关的现象和方案

1,div元素中字体能垂直居中的原理:

<div style="border:solid 1px red;">
        <span style="background:blue;color:#fff;font-size:20px;line-height:60px;">
            居中xfg&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
        </span>
    </div>
     

效果:
在这里插入图片描述
这里的div没有定高,div中的span元素也是没有定高的(当然,span元素默认是内联元素,给它定高也没用);span元素中的line-height:60px;在这里比字体的高度(font-size:20px;)要高,所以会把div元素撑起来,导致span元素在div元素中上下都有等高空白留出,这样span内联元素就在div中垂直居中,所以平时写字体垂直居中时一般设置line-height就可以了,而且此时可以不用设置div的高度。
2,字体大小不一样默认情况下按基线(baseline)对齐:

    <div class="c1">
        <span class="cc1">第一段</span>
        <span class="cc2">第二段</span>
        <span class="cc3">第三段</span>
    </div>
   <style>
        .cc1 {
            font-size: 12px;
        }

        .cc2 {
            font-size: 18px;
        }

        .cc3 {
            font-size: 24px;
        }
    </style>

效果:
在这里插入图片描述

中文字体的底部(注意:不是底线,是底部)就是基线的位置,所以会看到字体会底部对齐。此时div的高度是由第三个span元素撑起来的(但高度并不是字体大小)。
如果想要div元素中的文字都垂直居中,只需要分别将三个span元素设置vertical-align:middle即可。
3,文字旁边图片的空白:

<div style="background:red">
        <span>文字</span>
        <img src="test.png"/>
    </div>

在这里插入图片描述
有空白是因为img默认是一个内联元素,内联元素就要遵守行高的规则,它也会按照基线(baseline)对齐,基线对齐就意味着 基线到底线之间 是有一段空隙的,这是这个空隙产生的原因,空隙的大小由字体大小来定,如果字体是12px,那空隙将会是3px,这就是经典的图片3px空隙问题。既然图片也遵守垂直对齐的规则,那只需要调整成vertical-align:bottom;按底线对齐即可,这样缝隙就没有了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值