css_css3_实用属性_随时补充更新

父元素宽度被子元素宽度撑开width:max-content

css3提供了一个新特性,width:max-content.让父元素的宽度被子元素撑开.父元素宽度等于子元素

width:max-content

 img和文字顶部对其（vertical-align：top）

下图中，通过控制台可以看到文字和图片是处于顶部对其的状态，为实现该效果，需要3个属性：line-height:1；display:inline-block写在span标签去掉文字默认上下距离，vertical-align：top写在img标签让图片和文字的对齐基准线在顶部

 

line-height：1的效果

未设置line-height:1；display:inline-block时可以看到，红线标出的文字自带的默认上下距离

 

 设置line-height:1；display:inline-block时

 

 

vertical-align

用于img的属性设置元素的垂直对齐方式，默认是底部基准线，当设置为top的时候，文字和图片的基准线就位于顶部，如第一个图

currentColor

css3特性，举个例子，项目中经常使用iconfont图片，希望它能在鼠标移入文字时图片和文字颜色一起改变，这时候就可以用currentColor。

currentColor利用颜色可以继承的特性，将icon包裹在文字中，设置文字颜色，icon会跟随文字颜色