浏览器默认文字大小：16px

行高：是基线与基线之间的距离

行高=文字高度+上下边距

一行文字行高和父元素高度一致的时候，垂直居中显示。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        .box1 {

            width: 400px;

            height: 200px;

            background-color: aliceblue;

            line-height: 200px;

        }

    </style>

</head>

<body>

    <div class="box1">

        你好

    </div>

</body>

</html>

效果：

注释：因为行高的定义是文字高度+上下边距，所以当行高定义的值与父元素一样时，它就会去找上下边距，自然的就会居中。

CSS——行高的更多相关文章

  1. CSS行高--line-height

    遇到的问题:在css中,不理解line-height:1与line-height:1px的区别 发现的过程:最近在学做一个网站的过程中,设置两行文字之间的行高时需要用到line-height,发现了这 ...

  2. 李洪强和你一起学习前端之(6)css行高,盒模型,外边距

    李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...

  3. 【转】css行高line-height的一些深入理解及应用

    一.前言 前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”,是个不错的文章,学到了不少东西,建议您看看. 这里,我也要讲讲我对line-height的一些理解,所讲解的东西绝大多 ...

  4. CSS行高——line-height 垂直居中等问题

    CSS行高——line-height   初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了,随着以后工作问题层出不穷,才逐渐了解到CSS并不是几个sty ...

  5. css - 行高

    css - 行高 line-height行高 取值:px | em | rem | 百分比 | 纯数字 | normal | inherit 设置给:块.行内.行内块 应用给:文本 继承:块.行内.被 ...

  6. CSS行高——line-height

    初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了,随着以后工作问题层出不穷,才逐渐了解到CSS并不是几个style属性那么简单,最近看了一些关于行高的知 ...

  7. CSS行高line-height的理解

    一.行高的字面意思 “行高“顾名思义指一行文子的高度.具体来说是指两行文子间基线间的距离. 基线是在英文字母中用到的一个概念,我们刚学英语的时候使用到的那个英语本子每行有4条线,其中底部第二条线就是基 ...

  8. (转)CSS行高——line-height

    原文地址:http://www.cnblogs.com/dolphinX/p/3236686.html 初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了 ...

  9. css行高line-height的用法（转）

    本文导读: “行高“指一行文子的高度,具体来说是指两行文子间基线间的距离.在CSS,line-height被用来控制行与行之间的垂直距离.line- height 属性会影响行框的布局.在应用到一个块 ...

  10. CSS行高line-height的一些深入理解及应用

    一.一些字面意思. “行高”大约是指:一行文字的高度.具体来说是指两行文字间基线之间的距离.基线是在英文字母中用到的一个概念,我们刚学英语使用的那个英语本子每行有四条线,其中底部第二条线就是基线,是a ...

随机推荐

  1. BIV+CSS网页的标准化布局

    DIV用于搭建网站结构(框架),CSS用于创建网站表现(样式/美化) DIV+CSS模式设计网站的优势: 1.表现和内容分离. 2代码简洁,提高网页浏览速度. 3.易于维护,改版. 4.提高搜索引擎对 ...

  2. MySQL常用函数（转）

    一.数学函数 ABS(x):返回x的绝对值 BIN(x):返回x的二进制(OCT返回八进制,HEX返回十六进制) CEILING(x):返回大于x的最小整数值 EXP(x):返回值e(自然对数的底)的 ...

  3. 【CV论文阅读】Dynamic image networks for action recognition

    论文的重点在于后面approximation部分. 在<Rank Pooling>的论文中提到,可以通过训练RankSVM获得参数向量d,来作为视频帧序列的representation.而 ...

  4. js滚轮换切屏

    因为全项目不是自己写的,仅仅是帮别人写js滚轮代码,并且别人项目也还未上线.所以仅仅贴出自己写的那段部分代码, 效果:鼠标滚轮滚动时.网頁屏幕一屏一屏的上下切换 (下面代码在本地电脑的IE,chrom ...

  5. Pell Sequence

    /* * PellSequence.cpp * * Created on: 2013-09-08 16:46 * Author: lg * Description: a1 = 1, a2 = 2, . ...

  6. css中合理的使用nth-child实现布局

    写这篇文章的目的.主要是今天要实现一个布局:li.每行三个,总数不定.仅仅能相邻的li之间须要10px的间距.效果例如以下图: watermark/2/text/aHR0cDovL2Jsb2cuY3N ...

  7. 苹果官方Instruments工具之Automation的介绍

    instruments中国的工具測试有非常多,包含非常多方面.eg:内存泄露的測试.网络连接.和cpu内存的使用情况一系列数据的图形界面的显示. 功能的介绍能够看以下的截图图片: watermark/ ...

  8. Linux下的ssh实验环境搭建与管理

    实验环境[size=10.5000pt]1:网桥模式[size=10.5000pt]2:安装好vmtoos[size=10.5000pt]3:安装好yum[size=10.5000pt]4:安装好ss ...

  9. DIV+CSS在不同浏览器中的表现

     在给员工培训DIV+CSS的过程中.他们向我提出了非常多问题,有些问题我自己也没有想到过于是抽了些时间自己进行了一番实验,所有实验在IE7和Firefox中进行: 实验一.假设一个div没有指定 ...

  10. Android隐藏状态栏和标题栏，相当于全屏效果

    隐藏标题栏需要使用预定义样式:android:theme=”@android:style/Theme.NoTitleBar”. 隐藏状态栏:android:theme=”@android:style/ ...