line height

line height相关知识

• line-height理解和应用

  最近工作中碰到了一个问题，在line-height都等于1，vertical-align:baseline的情况下同一个字体下， 30px的数字和14px的文字并不是真的视觉上的“文字底部对齐”，虽然心里想着应该和字体有关，也确实换了不同字体试过，不同字体的呈现差距不一样，但还是想趁这个机会深入学习下line-height和vertical-align的一些知识。看了慕课网的张鑫旭讲的line-height和vertical-align，很详细，很生动，所以为了加深点理解，自己整理了个笔记。步入正题：CSS盒子模型想要理解line-height，先要理解css的盒子模型。盒子模型，从大到小分为【包含盒子containing box】，【行框盒子line box】，【内联盒子inline box】和【内容盒子 content area】。除了内联盒子和内容区域没有包含关系，其他都是包含关系。内容区域：是围绕文字看不见的一个盒子，其大小只和font-size有关，和line-height无关。按照张大神的说法，
• 内联元素的两大基石之 line-height

  行高的作用 如果想让单行文字在垂直方向上居中，相信我们都曾像下面这样使用line-height 属性： <style> h1 { background-color: darkcyan; color: #fff; font-size: 20px; text-align: center; line-height: 60px; } </style> <h1>love</h1> 例子中，我们可以看到，h1 的高度为 60px，并且，其内部的文字，在距离上方和下方的高度也是基本一致的。那么，line-height 在其中到底发挥了怎样的作用呢？ 行高与行距 内联元素的行高 line-height，译为"行高"，专指行盒子的
• CSS line-height

  在 CSS 中经常会设置文本之间的行高line-height，到底行高是如何定义的，它和文字的底线、基线、中线、顶线有什么关系？行框行框（line box）是文字一行的虚拟矩形框，它并没有实际的现实，是浏览器渲染文字的一种规则。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度），当有多行内容时，每行都会有自己的行框。line-box.png文字的四条线在vertical-align样式属性中有四个选项：top、middle、baseline和bottom，它们对应以下的四条线：vertical-align.png行高、行距、半行距多行文字之间还有一些距离：行高、行距和半行距，它们三者之间的关系又是如何的：line-height.png
• 一个由line-height引发的血案与思考

  原文地址：一个由line-height引发的血案与思考爆炸  最近UI走查，发现页面中所有包含文字区块的高度与设计稿中的高度完全不一致，然后UI妹子就爆炸了!  找了一下原因，发现是由于UI设计稿中设计的文字大部分是font-size:24px;line-height:24px,代码实现时为了不至于每处都写一遍字体大小，故直接在根节点上统一设置字体与字体大小为24px，小部分不一致的地方再单独设置字体大小，从而忽略了设置line-height为字体的高度。造成的结果就是文字所在的行的行高高于设计稿中的行高。为什么文字行高与字体大小不相等呢？  翻了一下line-height的<a href="https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">官方说明</a>，如下所示：这里写图片描述  文档里说line-height的默认值为normal,给normal的推荐设置值为1.0到1.2之间。相当于

line height相关课程

• CSS深入理解之line-height 本课程将带领大家深入理解line-height的定义、line-height与恒内框盒子模型的关系、高度机理、各类属性值、图片的表现等内容，同时张鑫旭老师将倾情分享一些实际开发中应用的经验！

  讲师：张鑫旭 中级 42948人正在学习

• CSS深入理解之vertical-align 本课程将带领大家深入的理解CSS中的属性vertical-align所支持的各类属性值们，会简单介绍下vertical-align所存在的兼容性问题，也会分享一些开发中的实际应用经验以及一些最佳的实践效果

  讲师：张鑫旭 中级 39167人正在学习

• CSS深入理解之absolute 深入理解CSS的position:absolute声明的表现、掌握一些position:absolute的高级应用。

  讲师：张鑫旭 中级 51720人正在学习

line height相关教程

• 1.5 height 定义图片的高度，在 HTML5 中推荐使用 css 的 height 样式替代：970上述定义了一个 height 分别是 50 像素和 100 像素的图片，如果使用 CSS 定义的话，是这样的：971
• 5. 实例 选择 demo 内第 3 个子元素背景为红色。使用 nth-child。.item{ width: 100px; height: 100px; text-align: center; line-height: 100px; border: 1px solid #ccc; background: #f2f2f2;}.item:nth-child(3){ background: red;}效果图：第三个背景变红效果图673使用 nth-last-child。.item{ width: 100px; height: 100px; text-align: center; line-height: 100px; border: 1px solid #ccc; background: #f2f2f2;}.item:nth-last-child(2){ background: red;}效果图第三个背景变红效果图674使用nth-of-type。.item{ width: 100px; height: 100px; text-align: center; line-height: 100px; border: 1px solid #ccc; background: #f2f2f2;}.item:nth-of-type(3){ background: red;}效果图第三个背景变红效果图675
• 6. 实例 <div class="demo">慕课网</div>给demo添加一个阴影。.demo{ width: 100px; height: 100px; text-align: center; line-height: 100px; box-shadow: 1px 1px 5px #ccc;}效果图添加一个阴影效果图给demo添加多个阴影。.demo{ width: 100px; height: 100px; text-align: center; line-height: 100px; box-shadow: 1px 1px 5px #ccc,2px 2px 5px rgba(255, 25, 25,.5),3px 3px 1px rgba(5, 206, 89, 0.5) ;}效果图添加多个阴影效果图
• 5. 实例 设置一个容器，当内部的内容超过容器的宽度时候向下换行。.demo{ display: flex; flex-wrap: wrap;}.item{ width: 200px; height: 100px; line-height: 100px; background: #ccc; border-right: 1px solid #fff; text-align: center;}效果图换行效果图655设置一个容器当内部的项目超过容器的宽度时候反向向下换行。.demo{ display: flex; flex-wrap: wrap-reverse;}.item{ width: 200px; height: 100px; line-height: 100px; background: #ccc; border-right: 1px solid #fff; text-align: center;}效果图换行反向效果图656
• 5. 实例 让子元素从上到下垂直方向排列.demo{ display:flex; flex-direction:column; text-align: center; line-height: 100px;}.item{ background:#ccc; height:100px; border-bottom:1px solid #fff; }效果图从上到下排列效果图651让子元素从下到上反向排列.demo{ display:flex; flex-direction:column-reverse; text-align: center; line-height: 100px;}.item{ background:#ccc; height:100px; border-bottom:1px solid #fff;}效果图从上到下反向排列效果图652让子元素从左到右排列.demo{ display:flex; flex-direction:row; }.item{ background:#ccc; height:100px; width: 100px; border-right:1px solid #fff; }效果图从左到右排列效果图653让子元素从左到右反向排列.demo{ display:flex; flex-direction:row-reverse; }.item{ background:#ccc; height:100px; width: 100px; border-right:1px solid #fff; }效果图从左到右反向排列效果图654
• 1.2 height width 属性 通过设置 height 和 width 可以控制 iframe 的高和宽，但是实际项目中有时你并不知道所引用的 iframe 的宽高，或者说 iframe 的宽和高是动态不固定的，这时需要先获取到引用的 iframe 的宽高，然后将值设置给其属性，例如：1028注意： 上述代码需要有一些 JavaScript 基础才能理解，不了解的同学可以单击 《JavaScript 入门教程》 学习。

line height相关搜索

label labelfor label标签 lambda lambda表达式 lamda lang last latin latin1 layers layui leave left leftarrow legend length lengths length函数 less

查看更多慕课网实用课程