日常项目推进中，各类开发人员经常遇到的一个问题就是页面的样式调整问题，有时候项目组的开发人员经常会自己亲自上阵调整样式，这样可以快速的解决问题，但同时也有可能造成一些隐患，接下来就我在工作中参与的样式调整经验分享一些正确“姿势”。
核心概念
css最核心的概念，就是盒模型，页面上的每一个元素都可以看做是一个盒子，以chrome控制台下某元素和模型为例
html:我是一个元素css:.box { margin: 20px; padding: 20px; width: 200px; height: 200px; border: 1px solid #333;}复制代码
效果：
对应的盒子模型：
以某个项目的前端页面为例
优先级
在不同的复杂场景下，css选择器的优先级粗略如下（以五种比较常见的写法为例）（从高到低排序） 1.在属性后使用!important会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素内的内联样式
3.id选择器
4.类选择器
5.通配符选择器
6.浏览器自定义或继承的属性
可以看到，很多人最常用的style内联属性样式的优先级非常高，如果项目大量运用这种高优先级的写法的话，那么这些元素的样式后续的调整将是非常困的。 一般调整页面的样式。首选的方案就是通过link标签引入css文件，那么css的选择器那么多，我如何知道这些选择器的优先级呢？
接下来介绍一下css选择器优先级算法，css选择器可以参考，只要理解，无需死记硬背也能熟练使用。首先来看一下对css优先级计算的介绍
翻译过来意思大概就是，选择器的优先级遵循以下准则： 1.计算id选择器的数量赋值给a 2.计算类选择器、属性选择器、伪类选择器的数量赋值给b 3.计算标签选择器和伪元素选择器的数量赋值给c 4.忽略通配符选择器。。。 否定伪类中的选择器也会被计算，而否定伪类本身不计算在内（这句不重要，使用场景很少，可以忽略） 计算出abc的值后，将abc连接起来，数值越大，优先级越高。
还有一张有趣的css优先级
兼容性
只有高级浏览器才支持酷炫的css3属性，如果项目兼容性要求为ie7、8等“古老的浏览器”，那么只能跟那些酷炫的效果say byebye了。。。如果你不清楚某个想要使用的css属性的兼容性，可以利用查询。
经常遇到的问题及对应的解决方案
- 滚动条问题
- 样式不生效
- 外边距塌陷
- z-index
- 样式错乱
小技巧
- 渐进增强的酷炫效果