深入浅出CSS（三）：隐藏BOSS大盘点之默认属性小总结

写在前面

　　严重警告，本文包含大量文字，且无配图，请做好充分心理准备后，再进行阅读！

序言
　　HTML+CSS作为前端入门语言，其使用难度并不大，但其复杂度并不低。想学会HTML+CSS不难，想写好就很难了。君不见，达到同样的页面效果，有人div、float、position等等齐上阵，洋洋洒洒上千行的代码。有人header、footer、flex，几百行就可以搞定。其区别就在于结构的设计，以及CSS属性之间的关联，还有最重要的，就是默认的属性的应用。玩过游戏的人都知道，隐藏的剧情或者BOSS往往在难度上要高于主线剧情。但发现隐藏BOSS，打倒隐藏BOSS这个过程的成就感，以及隐藏BOSS的奖励之吸引人，都让人无法抵挡其诱惑。HTML以及CSS的默认属性，就像隐藏BOSS一样，了解它们，掌握它们，运用它们，可以大大提高代码质量以及工作效率。

---------------------------------正文开始---------------------------------

隐藏BOSS一：百分比（%）声明的计算
　　在进行元素的宽高、或者margin、padding、position、translate等设置时，通常我们声明一个固定值，但在自适应，或者盒模型水平、垂直居中时，多少会用到百分比（%）声明。这时候，就会出现想象中的效果 VS 实际效果的差别。

那么，了解百分比（%）声明的计算方式，就必不可少，下面针对常用的百分比（%）声明，我将进行一个简单的小总结：

width、height：默认以父元素的width、height按百分比（%）计算。

　　　　需要注意的地方有3点：
　　　　　1、父元素为inline属性时，子元素百分比（%）声明后，因为inline元素width、height的无效。子元素的百分比（%）声明将跳过父元素，继续向上需要

　　　　　　符合条件的计算基数。所以在inline元素内嵌套block或inline-block时，记得给inline元素display改变属性；

　　　　　2、子元素设置了position:absolute;后，百分比（%）声明将根据设置了position:relative;或position:absolute;的父元素或更上级的元素为基数计算；

　　　　　3、父元素中只有一个子元素，且父元素为inline-block，width、height均为auto时，百分比（%）声明无效；

margin、padding：不论是margin-left还是margin-top，默认都以父元素的widh按百分比（%）计算。（在确定宽度计算基数的方式上，与width百分比（%）的

　　　　计算基数确定方法一致）。

position：position分两种情况，relative和absolute。

　　　　　　　1、relative：relative由于未脱离文档流，所以width、height、margin、padding，都是按照正常逻辑计算的。而top、right、bottom、left，

　　　　　　　　　　则是按照对应的width、height，按照父元素的值为基数进行计算；例如：top：50%；right：50%；，则是根据父元素的width与height，

　　　　　　　　　　计算出结果——top：height * 50%；right：width * 50%；结合margin的计算方式，当我们通过relative方法想让一个盒模型水平居中时，

　　　　　　　　　　left：50%；再margin-left：50%；是在原地不动的，就是这个道理。所以要用translative或者给一个固定的margin-left值才可以；

　　　　　　　2、absoulte：在计算方式上，absolute与relative并无区别，两者的区别就在于absolute脱离文档流后，计算基数的寻找不再是遵循父元素原则，

　　　　　　　　　　而是以position：relative;的上级元素为计算基数。

　　　　　　　　　　　　理解起来的话，absolute就是个拜金女，上边的大佬谁有relative，谁就是她干爹；当然了，拜金女的精力也不是无限的，所以干爹也只能有一个，

　　　　　　　　　　也就是离她最近的那个，近水楼台先得月嘛~

translate：默认以自身的width、height按百分比（%）计算。（结合position，实现不定宽或不定高元素，水平或垂直居中的关键属性）
background-position：这个解释起来几句话说不清楚，请阅读我之前的文章《深入浅出CSS：关于雪碧图、background-position与steps函数的三角恋情》进行理解

隐藏BOSS二：float的隐性改变元素属性以及BFC的形成

　　float是我们常用的将元素居左或居右的方法，同时，float之后进行元素间的对齐也是常常需要解决的问题。那么就必须知道float之后，元素本身的哪些属性被默认改变了。

　　经过我个人的实践观察，主要影响为4点：

元素属性的改变：float会隐性改变元素的属性为display：inline-block；这也是为什么inline元素float之后，不需要属性声明，就可以直接设置width、height等；
改变元素vertical-align：top：float后的元素会自动顶端对齐。相比于display: inline-block；令元素一行排列后，元素基线对齐的不良影响，以及修正对齐方式的繁琐。

　　　　　　vertical-align：top；显然在操作及显示上优势更加明显；

清除HTML换行符的影响：float之后，元素间由于换行符产生的间隔将清除。在display：inline-block；将元素一行排列时，受HTML书写时换行产生的换行符影响，每个

　　　　　　元素间会产生一段间隔。要消清除这段间隔，可以设置父元素font-size: 0; 或在HTML结构中取消标签间的间隔。

形成BFC盒模型：margin-top叠加的问题是BFC盒模型的经典问题，通常在操作中，如果想让父元素内的元素相对于父元素的顶端向下移动一段距离，可通过给父元素

　　　　　　加padding-top来实现，或者让父元素形成BFC盒模型。形成BFC盒模型的方法有很多，float就是其中之一。所以float后元素都会形成BFC盒模型，其子元素相对父元素

　　　　　　的margin-top溢出问题，自动解决~

隐藏BOSS三：vertical-align对img嵌套的高度影响

　　实际项目中，常常会有img作为子元素嵌套的情况。而这种情况通常会伴随一个问题，那就是在不设置img父元素高度的情况下，img父元素高度要高于img的高度。而且父元素高度还会根据font-size值而改变大小。

　　出现这种问题，原因就在于元素默认的基线对齐——也就是受vertical-align：baseline；的影响。那么要解决这种问题，根据不同的需求，通常有三种做法：

img设置float属性：多见于图文左右搭配，本质上是通过float隐性改变vertical-align：top；解决影响；
img属性改为display: block；：利用vertical-align只对inline或inline-block元素有效的性质，解决影响；
父元素设置font-size：0；：抹除文字，改变基线位置，解决影响；

更多隐藏BOSS，等我发现并打到它后再来添加攻略~

感谢阅读！

巴特西

深入浅出CSS（三）：隐藏BOSS大盘点之默认属性小总结

最新文章

热门文章