「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」。
前言
css相信大家都很熟悉，但是你真的了解吗？认识的一些后端小伙伴会说css很容易，但是又无厘头。 这里记录一些大家容易忽视的小问题，可能会让你了解为什么会出现这些奇怪的问题。
一、盒子模型
浏览器中将元素表示为一个个矩形的盒子（box），css决定盒子的属性，这一标准称为盒模型。
每个盒子由四部分组成：内容区域 content area、内边距区域 padding area、边距区域 border area、外边距区域 margin area。
Note: box-sizing可以改变盒子模型的计算方式，IE中盒子模型的宽度只有width(..早点放弃它吧)。
二、css优先级。
!important => 内联样式 => ID选择器 => 类选择器&属性选择器&伪类选择器 => 类型选择器&伪元素
Note: specifishity.com/specifishit…
三、margin重叠。
块的上下边距在：“同层相邻元素之间”、“没有内容将父元素和后代元素分开”、“空的块级元素”，情况下会产生边距重叠，其大小为单个边距的最大值(如果它们相等，则仅为其中一个)，合理把握这一特点可提高效率。
Note:上边距与下边距重叠。
四、margin下沉。
子元素设置margin-top后导致父元素一同下沉，设置父元素的border、padding、overflow:hidden等可以避免下沉。也可以使用padding代替margin使用。
五、BFC(块级格式上下文)。
简单来说，可以理解为具有bfc特性的盒子是一个独立的渲染区。通过这一特性可以解决上面margin重叠塌陷等问题，在浮动定位中也有很大的作用。
Note:如何让盒子具有BFC特性自行百度。
六、z-index。
Note:只在定位元素上生效（如：absolute relative），并且z-index 是同级元素之间的层级堆叠
七、padding-bottom为percentage。
当内边距为百分比时，百分比是和本身包含的元素的宽度有关。
八、用css实现一个三角形。
运用border均分特性
{
width:0px;
height:0px;
border-top:10px solid red;
border-right:10px solid transparent;
border-bottom:10px solid transparent;
border-left:10px solid transparent;
}
九、transition和animation它们之间有什么区别?
transition:主要是为元素提供一个过渡效果，一般需要触发条件，只有开始->结束也就是2帧form-to。 animation:主要是设置一个动画的每一个过程，可以配合@keyframe设置每一帧。
十、当元素出现锯齿时可以怎么解决？
1、通过CSS3 3D transforms触发GPU加速。
2、有一个很好用的属性will-change,在我们出现锯齿需要优化（不局限于此问题）的元素上使用会有明显效果。但是使用时机很重要。具体我们可以查看使用介绍:链接
*Note:这里就不说margin:-1px;这种奇淫技巧了。
十一、display:none与visibility：hidden的区别？
display：none 不显示对应的元素，在文档布局中不再分配空间，所有的子元素不显示。 visibility：hidden 隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明，可单独设置子元素显示与否。
十二、浏览器限制显示字体最小12px怎么办？
通过transform:scale(0.8);缩小。
十三、图片之间出现😶间隙怎么办？
为图片元素添加display: block;
Note:img元素之间的换行符会被当成空格处理
十四、position: fixed和position: absolute的区别？
绝对定位固定元素是相对于 <html> 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。
结尾
有时候会有一些想不明白的问题，其实嘛存在既有其道理，只有不断总结并了解其原因。
