发表于： 2018-11-03 21:22:32
1 878
今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
深入理解line-height与vertical-align
line-height、font-size、vertical-align是设置行内元素布局的关键属性。
这三个属性是相互依赖的关系，改变行间距离、设置垂直对齐等都需要它们的通力合作。
line-height：
值: <length> | <percentage> | <number> | normal | inherit
初始值: normal(通常line-height:normal的值为font-size值的1.2倍)
应用于: 所有元素
继承性: 有
百分数: 相对于元素的字体大小font-size
line-height行高是指文本行基线之间的距离。
行高line-height实际上只影响行内元素和其他行内内容，而不会直接影响块级元素，也可以为一个块级元素设置line-height，但这个值只是应用到块级元素的内联内容时才会有影响。
在应用到块级元素时，line-height定义了元素文本基线之间的最小距离，即最小行高
[注意]如果块级元素中的某一个子级内联元素设置的行高比最小行高大，则行框以设置行高来渲染；如果小，则以最小行高来渲染。因为，每一个子级内联元素的行高都是行内框的高度，只有一行中所有的行内元素(包括代表父级元素的匿名文本)，最大的行内框高度才能成为整行的行高。
初始值: normal(通常line-height:normal的值为font-size值的1.2倍)
font-size确定了内容区的高度
内容区加上行间距等于行内框。
vertical-align
vertical-align是设置元素的垂直对齐方式，
用来设置垂直对齐方式，所有垂直对齐的元素都会影响行高
值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <length> | <percentage> | inherit
初始值: baseline
应用于: 行内元素、替换元素、表单元格
继承性: 无
百分数: 相对于元素的行高line-height
[注意]IE7-浏览器中vertical-align的百分比值不支持小数行高，且取baseline、middle、text-bottom等值时与标准浏览器在展示效果不一样，常用的解决办法是将行内元素设置display:inline-block
line-height
一直以来都是负责一行内的居中
line-height一行垂直居中，而vertical-align不管有多少行，都能垂直居中！
这个可以理解为vertical-align的布局方式，红色的是默认的布局，所以底下会有一部分空白
解决方法：
1、设置vertical-align的值，不使用baseline，使用bottom/middle/top都是可以。
2、我们知道vertical-align 的默认值是 baseline，它会和文字的基线对齐，我们直接去掉文字的高度也是可以了的，而文字的高度是由行高决定的，所以我们直接给div设置 line-height: 0; 也能解决问题。
3、说一下 line-height，它的默认值一般为1.2，当 line-height取值为数字或百分数时，它是基于当前字体尺寸来计算的，也就是font-size的大小，所以我们直接给div设置font-size: 0; 也是可以解决问题的。
4、我们最开始提到过，只有元素属于inline或是inline-block ，vertical-align属性才会起作用。所以我们直接让vertical-align属性失效也可以解决问题，那就直接给img 设置 display: block; 就可以了
总结
1、只有元素属于inline或是inline-block ，vertical-align属性才会起作用。
2、vertical-align，取值是百分数值时，是相对于此标签继承的line-height值决定的。
3、line-height，取值是百分数值时，是相对于当前的font-size值决定的。
4、文中提到的图片下方会有空隙，必须是HTML5文档声明才会有的，其他的文档声明没有空白，就是必须要有<!DOCTYPE html>这句才可以。
在HTML5文档声明下，块状元素内部的内联元素的行为表现，就好像块状元素内部还有一个（更有可能两个-前后）看不见摸不着没有宽度没有实体的空白节点，这个假想又似乎存在的空白节点，我称之为“幽灵空白节点”，
解决方案：
div { line-height: 240px; font-size: 0; }
img { vertical-align: middle; }
了解了一下什么是雪碧图：
雪碧图：多个图片集成在一个图片中的图
雪碧图是根据CSS sprite音译过来的，就是将很多很多的小图标放在一张图片上，就称之为雪碧图。
background-position属性使用频率非常高，大量的网站为了减少http请求数，会将大量的图片图片合成一张雪碧图（Sprite）来使用。
雪碧图的使用就是通过控制background-position属性值来确定图片呈现的位置，不得不说它的作用非常重要，当然除了在使用雪碧图的场景外，别的某些场景也常常会使用到这个属性，这次就总结下它的用法。
background-position的定义：
background-position 属性设置背景图像的起始位置。
CSS继承性：
继承性：
1）关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。
2）关于盒子、定位、布局的属性，都不能继承。
层叠性：
当多个选择器，选择上了某个元素的时候，要按照如下顺序统计权重：
id的数量，类的数量，标签的数量
因为对于相同方式的样式表，其选择器排序的优先级为：
ID选择器 > 类选择器 > 标签选择器
选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。
没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。
important是英语里面的“重要的”的意思。我们可以通过如下语法：
k:v !important;
来给一个属性提高权重。这个属性的权重就是无穷大。
明天计划的事情：（一定要写非常细致的内容）
完成任务六
遇到的问题：（遇到什么困难，怎么解决的）
暂无
收获：（通过今天的学习，学到了什么知识）
了解了继承性
了解了雪碧图和line-height和vercical-align
返回列表
评论