CSS3 动画相关属性实例大全（四)

（font、height、left、letter-spacing、line-height 属性）

本文目录：

一、font 属性（所有字体属性）

1.1、font-size属性（指定字体的大小）

1.2、font-size-adjust 属性（调整字体大小）

1.3、font-stretch属性（定义字体外观）

1.4、font-weight属性（指定字体的粗细程度）

二、height属性（元素的高度）

三、left属性（元素的左外边距边界与其包含块左边界之间的偏移）

四、letter-spacing属性（字符间距的大小）

五、line-height 属性（设置多行元素的空间量）

一、font 属性（所有字体属性）

font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写，或将元素的字体设置为系统字体

<div id="animation40">
  <p>font 属性是所有字体属性的简写p>
div>

改变 font 属性：font: 25px bold

  
1.1、font-size属性（指定字体的大小）

font-size CSS 属性指定字体的大小。
因为该属性的值会被用于计算 em 和 ex 长度单位，定义该值可能改变其他元素的大小

<div id="animation41">
  <p>逆境清醒p>
div>

改变 font-size 属性：从 font-size: xx-small;  到  font-size: 40px;

1.2、font-size-adjust 属性（调整字体大小）

1.3、font-stretch属性（定义字体外观）

<div id="animation44" style="text-align:center;">
  <p>逆境清醒p>
div>

改变 font-weight属性：从 font-weight: lighter;到 font-weight: bolder;

二、height属性（元素的高度）

height CSS 属性指定了一个元素的高度。

默认情况下，这个属性决定的是内容区（ content area）的高度，

但是，如果将 box-sizing 设置为 border-box ,

这个属性决定的将是边框区域（border area）的高度。

    <div id="animation45" style="text-align:center;">
        <p>逆境清醒p>
    div>

改变  height属性：从height: 50px;到 height: 200px;

三、left属性（元素的左外边距边界与其包含块左边界之间的偏移）

left属性定义了

定位元素的左外边距边界与其包含块左边界之间的偏移，

非定位元素设置此属性无效。

left的效果取决于元素的position属性：

• 当position设置为absolute或fixed时，left属性指定了定位元素左外边距边界与其包含块左边界之间的偏移。
• 当position设置为relative时，left属性指定了元素的左边界离开其正常位置的偏移。
• 当position设置为sticky时，如果元素在 viewport 里面，left属性的效果和 position 为relative等同；如果元素在 viewport 外面，left属性的效果和 position 为fixed等同。
• 当position设置为static时，left属性无效。
• 当left和right​​​​​​ 同时指定时，元素的位置会被重复指定。当容器是从左到右时，left的值会被优先设定；当容器是从右到左时，right的值会被优先设定。

<div id="animation46">逆境清醒div>

left属性定义了

定位元素的左外边距边界与其包含块左边界之间的偏移，

非定位元素设置此属性无效。

四、letter-spacing属性（字符间距的大小）

letter-spacing 属性

增加或减少字符间的空白，

表现效果为字符间距的大小

 <div id="animation47"><p>当 你 孤 单 无 助 地 面 对 强 敌 时，谁 会 是 那 个 信 得 过 的 战 友？逆 境 清 醒 送 你 一 只 守 护 兔。p>div>

etter-spacing 属性：

增加或减少字符间的空白，表现效果为字符间距的大小
 

改变 letter-spacing  属性：从 letter-spacing: normal;到 letter-spacing: 20px;

五、line-height 属性（设置多行元素的空间量）

line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。
对于块级元素，它指定元素行盒（line boxes）的最小高度。
对于非替代的 inline 元素，它用于计算行盒（line box）的高度。

<div id="animation48"><p>当 你 孤 单 无 助 地 面 对 强 敌 时，谁 会 是 那 个 信 得 过 的 战 友？逆 境 清 醒 送 你 一 只 守 护 兔。p>div>

改变  line-height 属性：从 line-height: normal;到 line-height: 50px;

 CSS3 动画相关属性实例大全系列目录：

• 1、CSS3 动画相关属性实例大全（一)（@keyframes ，background属性，border 属性）
• 2、CSS3 动画相关属性实例大全（二)（bottom 、box-shadow、clip、color 、column-count、column-gap、column-rule、column-rule-color、column-rule-width、column-width 属性）
• 3、CSS3 动画相关属性实例大全（三)（columns、filter、flex、flex-basis 、flex-grow、flex-shrink属性）
• 4、CSS3 动画相关属性实例大全（四)（font、height、left、letter-spacing、line-height 属性）
• 5、CSS3 动画相关属性实例大全（五)（margin 、max-height、max-width、min-height、min-width、opacity 、order 属性）
• 6、CSS3 动画相关属性实例大全（六)（outline 、outline-color 、outline-offset、outline-width、padding、padding-bottom、padding-left 、padding-right 、padding-top、perspective属性）
• 7、

CSS3 动画相关属性实例大全（七)（perspective-origin、right、text-decoration-color 、text-indent、text-shadow、top 、transform、transform-origin、vertical-align、visibility 、width、word-spacing、z-index属性）

            推荐阅读：CSS @规则(At-rules)详解系列索引目录