css简单介绍

205 阅读3分钟

日常项目推进中,各类开发人员经常遇到的一个问题就是页面的样式调整问题,有时候项目组的开发人员经常会自己亲自上阵调整样式,这样可以快速的解决问题,但同时也有可能造成一些隐患,接下来就我在工作中参与的样式调整经验分享一些正确“姿势”。

核心概念

css最核心的概念,就是盒模型,页面上的每一个元素都可以看做是一个盒子,以chrome控制台下某元素和模型为例

html:
  <div class="box">我是一个元素</div>

css:
.box {
  margin: 20px;
  padding: 20px;
  width: 200px;
  height: 200px;
  border: 1px solid #333;
}

效果:

image.png

对应的盒子模型:

image.png

以某个项目的前端页面为例

选择器

优先级

在不同的复杂场景下,css选择器的优先级粗略如下(以五种比较常见的写法为例)(从高到低排序) 1.在属性后使用!important会覆盖页面内任何位置定义的元素样式

Paste_Image.png

2.作为style属性写在元素内的内联样式

Paste_Image.png

3.id选择器

Paste_Image.png

4.类选择器

Paste_Image.png

5.通配符选择器

Paste_Image.png

6.浏览器自定义或继承的属性

Paste_Image.png

Paste_Image.png

可以看到,很多人最常用的style内联属性样式的优先级非常高,如果项目大量运用这种高优先级的写法的话,那么这些元素的样式后续的调整将是非常困的。 一般调整页面的样式。首选的方案就是通过link标签引入css文件,那么css的选择器那么多,我如何知道这些选择器的优先级呢?

接下来介绍一下css选择器优先级算法,css选择器可以参考w3c,只要理解,无需死记硬背也能熟练使用。首先来看一下w3c官方文档对css优先级计算的介绍

Paste_Image.png

翻译过来意思大概就是,选择器的优先级遵循以下准则: 1.计算id选择器的数量赋值给a 2.计算类选择器、属性选择器、伪类选择器的数量赋值给b 3.计算标签选择器和伪元素选择器的数量赋值给c 4.忽略通配符选择器。。。 否定伪类中的选择器也会被计算,而否定伪类本身不计算在内(这句不重要,使用场景很少,可以忽略) 计算出abc的值后,将abc连接起来,数值越大,优先级越高。

还有一张有趣的css优先级示例图

AEA6B6071887A6F935BA71D6CD4A7DB9.jpg

兼容性

只有高级浏览器才支持酷炫的css3属性,如果项目兼容性要求为ie7、8等“古老的浏览器”,那么只能跟那些酷炫的效果say byebye了。。。如果你不清楚某个想要使用的css属性的兼容性,可以利用caniuse查询。

经常遇到的问题及对应的解决方案

  1. 滚动条问题
  2. 样式不生效
  3. 外边距塌陷
  4. z-index
  5. 样式错乱

小技巧

  1. 渐进增强的酷炫效果
  2. 巧妙地利用伪元素
  3. 强大的计算属性
  4. 合理利用单位