CSS部分属性的深入学习

先上个张鑫旭大神的政治课,来个一棒打醒(手动滑稽);  说说CSS学习中的瓶颈;
虽然自己水平不高,但是对于重构这方面工作一直不怎么喜欢,可能觉得比较没有新意,但是看了大神文章突然有点一棍打醒的感觉,突然觉得自己的CSS水平好烂。。。。
 
 

一、vertical-align

①、触发元素:行元素、设置有display:inline/display:inline-block的元素、表单元素(display:table-cell);
                         虽然vertical-align属性只会在inline-block水平的元素上期作用,但是其影响到的元素涉及到inline属性的元素,这里千万记住,inline水平元素受vertical-align属性而位置改变等不是因为其对                         vertical-align属性敏感或起作用,而是受制于整个line box的变化而不得不变化的,这个后面会较为深入的分析。        
②、取值:
    来源:  http://www.zhangxinxu.com/wordpress/2010/05/%e6%88%91%e5%af%b9css-vertical-align%e7%9a%84%e4%b8%80%e4%ba%9b%e7%90%86%e8%a7%a3%e4%b8%8e%e8%ae%a4%e8%af%86%ef%bc%88%e4%b8%80%ef%bc%89/
描述
长度 通过距离升高(正值)或降低(负值)元素。'0cm'等同于'baseline'
百分值 – % 通过距离(相对于1line-height1值的百分大小)升高(正值)或降低(负值)元素。'0%'等同于'baseline'
baseline 默认。元素的基线与父元素的基线对齐。
sub 降低元素的基线到父元素合适的下标位置。
super 升高元素的基线到父元素合适的上标位置。
top 把对齐的子元素的顶端与line box顶端对齐。
text-top 把元素的顶端与父元素内容区域的顶端对齐。
middle 元素的中垂点与 父元素的基线加1/2父元素中字母x的高度 对齐。
bottom 把对齐的子元素的底端与line box底端对齐。
text-bottom 把元素的底端与父元素内容区域的底端对齐。
inherit 采用父元素相关属性的相同的指定值。
    常用的值有:top、middle、bottm、数值、百分比;
    注:数值和百分比为正值时,只会把文本下方拉伸,不会将文本往下挤;如果为负值时,会将文本往下方挤去;
     百分比是相对于此标签继承的line-height值决定的。
     CSS部分属性的深入学习_第1张图片       CSS部分属性的深入学习_第2张图片
 ③、vertical-align无效原因:是否满足①中的触发元素要求,对于块元素中的inline-block元素,需要使用line-height属性来让vertical-align有参照目标;
其他详细内容、兼容等请参考大神文章: 我对CSS vertical-align的一些理解与认识(一)、 CSS vertical-align的深入理解(二)之text-top篇、 CSS深入理解vertical-align和line-height的基友关系
 
 

二、background

  图景属性想必大家都很熟悉了,但是对于它的复杂用法可能不是太了解,下面就根据自己工作中遇到问题进行记录
   background:bg-color   bg-image   position  /     bg-size         bg-repeat         bg-origin      bg-clip   bg-attachment   initial|inherit;
           底色          图片       相对位置       背景图大小    背景图重复方式      显示源点       绘制区域   背景是否滚动   
   CSS部分属性的深入学习_第3张图片

  color / image / position / repeat 是大家最常用的属性,也没啥好讲的

  background-attachment 默认值是scroll,表示背景图随元素滚动,可选值有:fixed;不随元素滚动,类似于position: fixed;的效果,常用来做错层滚动的动画效果;

   主要想讲的是移动端中使用雪碧图时,需要搭配的 background-size 和 background-position来定位;

    首先说一下

 
 待续。。。
 

 

转载于:https://www.cnblogs.com/milo-wjh/p/6396953.html

你可能感兴趣的:(CSS部分属性的深入学习)