css样式_课外知识补充（持续更新）

angelCopy
80 阅读3分钟

1.rgba和opacity

  • rgba
    • background:rgba(10,10,10,0.2)
      • 最后的0.2表示透明度
      • 0：表示完全透明
      • 1：表示完全不透明
    • 且不影响字体
    • 子代元素不会继承该属性

image.png

  • opacity
    • 设置元素的透明度
      • 0：表示完全透明
      • 1：表示完全不透明
    • 与rgba不同的是，opacity会影响到字体，即元素的所有内容都会被该元素影响
    • 子代元素会继承该属性

image.png

image.png

2.css属性中的百分比

  • width
    • 普通元素相对于父级的宽度
    • 定位元素，相对于最近定位父级的padding+内容区域的宽度
  • height
    • 普通元素相对于父级的高度
    • 定位元素，相对于最近定位父级的padding+内容区域的高度
  • padding、margin
    • 普通元素相对于父级的宽度
    • 定位元素，相对于最近定位父级的padding+内容区域的宽度
      • 即父元素padding+context的宽度为400px
      • 子代元素的padding设置为10%，则padding为400 * 10% = 40px

image.png

image.png

3.css样式的计算过程

  • 确定声明值

    • 浏览器默认给的声明值，如a标签的下划线和颜色
    • 之后没有开发者设置样式，则使用浏览器的声明值

  • 层叠冲突

    • 若浏览器有声明值，开发者没有设置样式，则使用浏览器声明值
    • 若两者同时存在，则使用开发者设置的样式
    • 若开发者对同个div设置多个同样的属性
      • 1.先判断权重，权重高的为最终样式
      • 2.若权重相同，则判断书写顺序，后声明的覆盖前面的

  • 使用继承

    • 若浏览器没有给声明值，开发者也没有设置样式，此时该样式若能使用继承，则继承父元素的样式
    • 若不能继承，则使用默认样式

  • 默认样式和浏览器声明值不是同一个东西

    • 默认样式：所有css样式的默认样式都是一样的
    • 浏览器声明值：浏览器对某个标签定义了对应的样式

4.精灵图的使用（雪碧图）

  • 页面每显示一张图片，都得请求一次接口，当图片太多时，服务器就会频繁的接收到图片请求，造成服务器请求压力过大，这将大大降低页面的加载速度
  • 此时可以将网页中的一些小背景图片整合到一张大图中，这样服务器就只需要处理一次请求就好了，也就是使用精灵图。
  • 精灵图的核心
    • 主要是将多个小背景图片整合到一张图片上
    • 通过设置背景图片，并移动背景图片的位置，让其只显示对应的小背景
<body>
  <div class="sprite"></div>
</body>
<style>
  .sprite {
    width: 70px;
    height: 70px;
    background: url(./spr.png) no-repeat -38px -48px;
  }
</style>

spr.png

image.png

5.contenteditable属性

  • 我们平常用来进行文本编辑时，一般都是使用input、textreat进行编辑，而div、p标签这些则无法进行编辑
  • 若我们想对这些标签进行编辑，我们可以使用contenteditable属性
  • 这个属性，可以用来做富文本，也就是我们常常使用的第三方插件
<div class="item" contenteditable="true"></div>
<style>
  .item {
    height: 100px;
    border: 1px solid red;
    overflow: auto;
  }
</style>

image.png

avatar
文章
阅读
粉丝