摘要：本文是年的最后一篇文章，主要是将一些细节问题整理一下。垂直百分比的值等于容器高度百分比值减去背景图片高度百分比值。如果两者同时存在时，只有起作用如果两者同时存在时，只有起作用。
本文是2016年的最后一篇文章，主要是将一些CSS细节问题整理一下。
background-position取值为百分比的计算方式
margin相邻折叠问题
position的absolute和relative定位top、left、right、bottom问题
覆盖样式问题
1、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
2、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;）
3、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起作用。
看一个例子：
从上面的代码和效果图，你可以看出，设置了position:relative的元素设置了top:20px，虽然（相对其原位置）向下移动了20px，可是并不会影响其后面的元素。
4、覆盖样式问题
比如我们有一个公共文件，其下有一个公共样式：
.box {
color: red;
}
有些时候，我们需要覆盖这个样式，比如将红色改为绿色。由于是公共元素，我们不能直接修改，但方法还是有多种：
/*第一种*/
.parent .box {
color: green;
}
/*第二种*/
.box {
color: green !important;
}
上面这些是我们常用的，但还有一个小技巧，是我们平常不太注意的，可以如下设置：
.box.box {
color: green;
}
今天就介绍这么多，如有错误，欢迎指正！
原文链接：关于CSS一些细节问题
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115436.html
摘要：真的是给我们新手学习移动端适配造成不少困惑英语真的很重要呀。细节高清屏上的处理其实并不是所有做移动端适配的人都一定会遇到这个问题。 一次搞清楚移动端这几个坑爹的单位慨念 目录: 一、让坑爹的单位,不再坑爹 二、需要准备什么样的设计稿 三、rem方案的原理和细节 高清屏上,位图的处理 高清屏上,关于border: 1px的处理 移动端屏幕的自动适配的处理 移动端屏幕上字体大小的处理...
摘要：真的是给我们新手学习移动端适配造成不少困惑英语真的很重要呀。细节高清屏上的处理其实并不是所有做移动端适配的人都一定会遇到这个问题。 一次搞清楚移动端这几个坑爹的单位慨念 目录: 一、让坑爹的单位,不再坑爹 二、需要准备什么样的设计稿 三、rem方案的原理和细节 高清屏上,位图的处理 高清屏上,关于border: 1px的处理 移动端屏幕的自动适配的处理 移动端屏幕上字体大小的处理...
摘要：群里听达峰大大讲用的是的方案留了个心眼之前查看过一些方案大致看过不知道哪个比较好但是既然有实践经验而且当时也是我看中的几个之一觉得比较安全从写法上看侵入性比较小直接就是然后生成的是基于的包裹的插入在当中的这样运行时甚至热替换时没有什么问 群里听达峰大大讲 Strikingly 用的是 emotion 的方案, 留了个心眼.之前查看过一些 CSS in JS 方案, 大致看过 emoti...
摘要：本文的题目是阴影技巧与细节。立体投影好，我们继续。下一个主题是立体投影。但是，使用它们生成的阴影通常只能是单色或者同色系的。你这么说，难道还可以生成渐变色的阴影不成额，当然不行。 关于 CSS 阴影，之前已经有写过一篇，box-shadow 与 filter:drop-shadow 详解及奇技淫巧，介绍了一些关于 box-shadow 的用法。 最近一个新的项目，CSS-Inspira...
阅读 1344·2023-04-25 14:12
阅读 586·2021-08-27 16:24
阅读 2396·2019-08-30 15:44
阅读 2791·2019-08-30 13:16
阅读 1470·2019-08-29 14:10
阅读 826·2019-08-29 13:54
阅读 1166·2019-08-29 13:09
阅读 1566·2019-08-26 18:37
