网络直播|web前端入门教程(非常详细)( 四 )

使用对象不同：line-height 一般是针对字体来设置， height 与 line-height 相同时，文字会垂直居中， height 是设置元素高度的。

使用范围不同：line-height 针对有文字的任意元素， height 针对块级元素，行级元素会失效。

数值大小关系：line-height 与 height 同时设置时，它们之间的大小关系，对布局的影响：line-height = height 时，单行文字居中，多行文本会超出元素范围。或 line-height > height 时，文本会溢出元素范围。

十二、css 绘制三角形
绘制三角形在项目中非常常见，总是记不住绘制的时候到底哪个是有颜色的，其他的透明，今天给大家总结一个规律。
下图是一个大小为0 ，设置了四个不同颜色的边框的正方形：

可以归纳出：
方向朝下的三角形，上边框有颜色，其他三个边框为透明色。
方向朝上的三角形，下边框有颜色，其他三个边框为透明色。
方向朝左的三角形，右边框有颜色，其他三个边框为透明色。
方向朝右的三角形，左边框有颜色，其他三个边框为透明色。
简单点就是：朝下上有，朝上下有，朝右左有，朝左右有。
十三、移动端如何适配？
关于移动端适配的常见方案：

媒体查询的方式，即 css3 的 media。
flex 或 grid 的弹性布局。
viewport 缩放
动态 rem 方式
vw 适配方案

适配方案对比：
1、媒体查询
该方式比较老，要写很多的样式，写起来麻烦还不好用，基本没人用了。
2、flex 或 grid 布局

该方案基本不需要适配。
常见布局就是水平排列和两栏布局
不需要使用 JS

3、viewport缩放方案

适配原理简单
需要使用JS
直接使用设计稿标注无需换算
方案死板只能实现页面级别整体缩放

4、动态REM方案

适配原理稍复杂
需要使用JS
设计稿标注的px换算到CSS的rem计算简单
方案灵活技能实现整体缩放又能实现局部不缩放

5、vw方案

适配原理简单
不需要JS即可适配
设计稿标注的px换算到CSS的vw计算复杂
方案灵活技能实现整体缩放又能实现局部不缩放

实践是检验真理的唯一标准，看完如果不懂的技术手动敲一敲加深印象。
获取方式：
请评论+关注，最后私信“1”获取！
私信方法：
第一步，点击头像
【网络直播|web前端入门教程(非常详细)】第二步：头像旁边有一个私信按钮，发送【1】即可！