关于CSS一些细节问题

本文是2016年的最后一篇文章，主要是将一些CSS细节问题整理一下。

• background-position取值为百分比的计算方式

• margin相邻折叠问题

• position的absolute和relative定位top、left、right、bottom问题

• 覆盖样式问题

一、background-position取值为百分比的计算方式

background-position属性相信你用的很多，但是当取值为百分比时，你是否定为它是相对于背景图片的尺寸来计算（我以前也是这种想法，但看了大漠老师的《你真的了解background-position》后，才知大错特错）

来看看下面的代码：

.box {   
  width:400px;   
  height:400px;   
  background-color:black;   
  background-image:url(mm.jpg);   /* 图片原尺寸150 * 225 */
  background-repeat:no-repeat;   
  background-position:50% 50%;  
}

相信background-position: 50% 50%你用的很多，这是让背景图片居中，至关于center center。

效果以下：

若是50%是按照图片的尺寸（150 225）来计算的，那么其值转换为像素值应该是75px 112.5px，你以为背景图片能在400 400的块里居中吗？答案很明显，是否认的，那是如何计算的呢？

其实官方说法是这样的：

当背景图片尺寸（background-size）不作任何的重置（也就是100% 100%）时，水平百分比的值等于容器宽度百分比值减去背景图片宽度百分比值。垂直百分比的值等于容器高度百分比值减去背景图片高度百分比值。

水平位置： (400 - 150) * 50% = 125px
垂直位置： (400 - 225) * 50% = 87.5px

二、margin相邻折叠问题

在开发中，咱们偶尔会遇到明明两个div都设置了margin，但是它们之间的距离就是不等于两个div的margin之间的和，这是为何呢？实际上是由于在某些状况下，两个或多个块元素的相邻边界（其间没有任何非空内容、padding、边框）会发生合并成单一边界，也就是标题说的折叠。

先来看看兄弟块级元素的折叠，以下图所示：

还要注意的是，父元素与其子元素之间也会发生折叠：

2个或多个块级相邻元素的外边距（margin）的折叠规则：

• 外边距都为正值时，取最大值

• 不全是正值时，则用正值减去（全部值的绝对值中）最大值

• 全为负值时，则取最小值

不发生折叠状况：

• 水平（左右）外边距不会折叠

• 浮动元素的外边距不会折叠，而且浮动元素与它的子元素之间也不会发生折叠

• 设置了overflow且值不为visible的块级元素与它的子元素之间的外边距也不会被折叠

• 绝对定位（position:absolute;）元素的margin不与任何margin发生折叠，而且与它的子元素之间的margin也不会发生折叠

解决折叠的方法：

• 外层元素用padding替代margin

• 外层元素设置overflow:hidden

• 内层元素加padding:1或者border

• 内层元素加浮动（float）或设为（display:inline-block）

• 内层元素使用绝对定位（position:absolute;）

三、position的absolute和relative定位top、left、right、bottom问题

绝对定位（position:absolute）的top、left、right、bottom是相对于其具备相对定位属性（position不为static）的父元素（不必定是其直接父元素，有多是祖先元素）。

若是二者（top、bottom）同时存在时，只有top起做用；若是二者（left、right）同时存在时，只有left起做用。

相对定位（position:relative）元素会保留原来占有的位置，其后面的元素按原来文档流仍然保持原来的位置
top的值表示对象相对原位置向下偏移的距离
bottom的值表示对象相对原位置向上偏移的距离
left的值表示对象相对原位置向右偏移的距离
right的值表示对象相对原位置向左偏移的距离
若是二者（top、bottom）同时存在时，只有top起做用；若是二者（left、right）同时存在时，只有left起做用。

看一个例子：

<style>
.prev{   
  width:100px;    
  height:100px;   
  position:relative;   
  background:blue;   
  top:20px;   
}   
.next{   
  width:100px;   
  height:100px;   
  background:red;   
}   
.fl{   
  float:left;   
  margin:20px;   
}
</style>

<div class="fl">   
  <div class="prev" style="position:static"></div>   
  <div class="next"></div>   
</div>   
<div class="fl">   
  <div class="prev"></div>   
  <div class="next"></div>   
</div>

从上面的代码和效果图，你能够看出，设置了position:relative的元素设置了top:20px，虽然（相对其原位置）向下移动了20px，但是并不会影响其后面的元素。

四、覆盖样式问题

好比咱们有一个公共文件，其下有一个公共样式：

.box {
  color: red;
}

有些时候，咱们须要覆盖这个样式，好比将红色改成绿色。因为是公共元素，咱们不能直接修改，但方法仍是有多种：

/*第一种*/
.parent .box {
  color: green;
}
/*第二种*/
.box {
  color: green !important;
}

上面这些是咱们经常使用的，但还有一个小技巧，是咱们日常不太注意的，能够以下设置：

.box.box {
  color: green;
}

今天就介绍这么多，若有错误，欢迎指正！

原文连接：关于CSS一些细节问题