高考报名时间2022年11月1日还剩 天 距离2023年6月7日高考还有 天
栏目分类:
子分类:
返回
名师互学网用户登录
名师互学网
快速导航关闭
当前搜索
当前分类
前沿技术 软件开发 系统运维 产品运营 生活办公 面试经验 考试题库
子分类
人工智能 大数据 云计算 区块链 物联网 深度学习 机器学习 NLP 计算机视觉 语音识别 其他 大数据系统 数据可视化 数据挖掘与分析 其他 Docker/k8s 虚拟化 云平台 其他 基本原理 数字货币 智能合约 EOS应用 其他 通讯技术 嵌入式开发 单片机 物联网应用 HarmonyOS 其他 后端开发 Web开发 移动开发 游戏开发 Python Java 架构设计 C/C++/C# PHP .Net Go语言 R语言
实用工具
学习工具 小学数学练习 字帖生成 在线画板 函数绘制 拼音字母表 在线词典 黄历查询 亲戚关系计算 安全期计算 中国历史 Excel函数 模拟请求 json格式化 浏览器指纹
热门搜索
路由器设置 木托盘 宝塔面板 儿童python教程 心情低落 朋友圈 vim 双一流学科 专升本 我的学校 日记学校 西点培训学校 汽修学校 情书 化妆学校 塔沟武校 异形模板 西南大学排名 最精辟人生短句 6步教你追回被骗的钱 南昌大学排名 清朝十二帝 北京印刷学院排名 北方工业大学排名 北京航空航天大学排名 首都经济贸易大学排名 中国传媒大学排名 首都师范大学排名 中国地质大学(北京)排名 北京信息科技大学排名
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

学习张鑫旭前辈课程的有关笔记（二）

CSS教程 更新时间： 发布时间： IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

学习张鑫旭前辈课程的有关笔记（二）

上一篇手记是第一部分，共5个属性，接下来的这篇，是另外5个属性。
同样，仅作为大家观看张鑫旭前辈视频的参考文档。作为查阅文档也是可以的。

《深入理解vertical-align》

vertical-align支持的属性以及组成：
    1、线类：baseline、top、middle、bottom
    2、文本类：text-top、text-bottom
    3、上标下标类：sub、super
    4、数值百分比类：20px、2em、20% ……
 共性：都带数字、都支持负值、行为表现一致（在baseline对齐基础上上下偏移对应数值大小）
 差异：vertical-align的百分比值是相对于line-height计算的（IE6/7下vertical-align百分比值不支持小数line-height）
vertical-align起作用的前提：只能应用于 inline水平 以及 'table-cell' 元素（默认状态下，也即 图片、按钮、文字、单元格 支持vertical-align）
    inline水平：
 inline：、、、、未知元素 ...
 inline-block：(IE8+)、

《深入理解line-height》

line-height，行高，两行文字基线之间的距离
基线：请参考小学英语作业本的书写线条，倒数第二条(红色的那条)就是基线
为啥是基线：因为基线是顶线、中线、底线定义的根本（另外，不同的语言、字体，基线也是不一样的）
所有内联元素的样式表现都与行内框盒子模型有关！
行内框盒子模型：
    1、“内容区域”(content area)，是一种围绕着文字却看不见的盒子。“内容区域”的大小与font-size有关。
（查看方式：选中一段文字时所看见的背景颜色区域便是该段文字的内容区域）
    2、“内联盒子”(inline boxes)，“内联盒子”不会让内容成块显示，而是排成一行。如果外部含inline水平的标签（span、a、em等），则属于“内联盒子”。
“匿名内联盒子”，如果外部是个光秃秃的文字（没有span、a、em等包裹），则属于“匿名内联盒子”。
    3、“行框盒子”(line boxes)，每一行就是一个“行框盒子”，每个“行框盒子”又是由一个一个“内联盒子”组成。
    4、“包含盒子”(containing box)，block水平标签，此盒子由一行一行的“行框盒子”组成。
其中、4包含3，3包含2，2和1关系说不清。
内联元素的高度是由行高决定的。
拥有单行文本的block水平标签为啥其高度等于行高：
    1、行高由于其继承性，影响无处不在，即使单行文本也不例外；
    2、行高只是幕后黑手，高度的表现不是行高，而是内容区域和行间距。
内容区域高度(content area) + 行间距(vertical spacing) = 行高(line-height)
内容区域的特性：
    1、内容区域高度只与字号(font-size)以及字体(font-family)有关，与line-height没有任何关系。
    2、在宋体字体下，内容区域高度等于字体大小值。（此时 font-size + 行间距 = line-height）
行间距：是上下均分的。行半间距 = (行度 - 内容区域高度)/2
总结：
    1、行高决定内联盒子高度；
    2、行间距墙头草，可大可小(甚至负值)，保证高度正好等同于行高。
多行文本的高度就是单行文本高度的累加。
如果行框盒子里面有多个不同行高的内联盒子，通常情况下，行框盒子的高度等于最高的那个内联盒子的高度（如果该内联盒子使用了vertical-align等属性，则不成立）
line-height支持属性：
    1、normal：与元素字体、用户的浏览器相关联（具有不确定性）。
    2、：例如 1.5 ，根据当前元素的font-size大小进行计算。
    3、：例如 1.5em、1.5rem、20px、20pt ，使用具体长度作为行高值。
    4、：例如 150% ，相对于设置了该元素的font-size大小进行计算。
    5、inherit ，行高继承。（IE8+）
行高默认有继承性，但在 input 等元素下元素的默认行高是normal，使用inherit可让文本框样式可控性更强。
那么， 1.5 1.5em 150% 的区别是什么？
    计算无差别！差别在于子元素如果不声明line-height时：
 1.5 是所有可继承元素根据font-size重计算行高的。（子元素会根据 1.5 进行重计算）
 150%、1.5em 是根据当前元素根据font-size计算行高的，会继承给下面的元素。（子元素不会重计算，直接继承父元素的行高）
body全局数值行高使用经验：
    body{ font-size: 14px; line-height: 1.4286; }
    原因：匹配20像素，方便心算。
    line-height = 20px / 14px = 1.42857...
行高与图片实际占据高度的关系：
    行高不会影响图片的实际占据高度。
隐匿文本结点：
    例如 

    图片的左边处于 p 标签的中心，说明 p 标签里面有一个隐匿的文本结点
    例如 

    图片与p标签的底边有一段间隙，说明图片的右侧有一个隐匿的文本结点
消除图片底部间隙的方法：
    1、图片块状化—— img{ display: block; }
    2、图片底部对齐—— img{ vertical-align: bottom; }
    3、盒子行高足够小—— .box{ line-height: 0; }
line-height的实际应用：
    1、图片的水平垂直居中（IE8+）
 .box{ line-height: 300px; text-align: center; }
 .box > img{ vertical-align: middle; }
    2、多行文本水平垂直居中（IE8+）
 .box{ line-height: 250px; text-align: center; }
 .box > .text{ display: inline-block; line-height: normal; text-align: left; vertical-align: middle; }
    3、代替height，避免IE6/7下的 haslayout
 把 height: 36px; 改为 line-height: 36px;（注意，没有必要同时为元素添加相同大小的 height 和 line-height ，height在这里是多余的）

《深入理解overflow》

overflow基本属性值：
    1、visible（默认，正常显示超出的内容）
    2、hidden（隐藏超出的部分）
    3、scroll（直接添加滚动条）
    4、auto（不超出容器时，正常显示，一旦超出容器后则显示滚动条）
    5、inherit（IE8+）
overflow-x、overflow-y：
如果overflow-x与overflow-y的值相同，则两者加起来等同于overflow
如果它们的值不相同，要是其中一个被设置成hidden或scroll或auto，另外一个被设置为visible，则visible会被重置为auto
如何才能让overflow起作用：
    1、元素非 display: inline; 水平
    2、元素要有对应方位的尺寸限制。width/height/max-width/max-height/absolute拉伸 等。
overflow: visible;的妙用：
    BUG来源：IE7浏览器下，文字越多，按钮两侧padding留白就越大
    解决办法：给所有按钮添加CSS样式 overflow: visible; 即可
滚动条出现的条件：
    1、