css-1

css的三大特性

  1. 继承性:子元素继承父元素样式主要是跟文字相关的样式继承。

  2. 层叠性:后面样式会覆盖前面样式,主要解决样式冲突问题。但是要看选择器权重来确定优先级

  3. 优先级:优先级由选择器的 权重 决定,权重高的规则覆盖权重低的规则

css的优先级

  1. 原则:1. 优先级相等的时候,CSS 中最后的那个声明的样式将会被应用到元素上。(层叠遵循就近原则)2. 其余判断那个选择器权重高,优先执行那个样式。3. 权重是4位一组,是分开的层级,不能进位。
  2. 权重
    image
  3. 权重计算举例
    image

盒子模型

  1. 分类
    image
  2. 盒子模型的组成
    image
  3. 盒子模型的组成——边框
    image
    image
    image
    image
  4. 盒子模型的组成——内边距
    image
  5. 盒子模型的组成——外边距
    image
  6. 盒子模型的组成——外边距实现水平居中
    image
  7. 盒子模型的组成——外边距折叠
    image
  8. 盒子模型的组成——外边距塌陷
    image
.father {
  width: 150px;
  height: 150px;
  background-color: pink;
  // 1. 给父盒子添加上边框。(父盒子本身有边框则不会出现问题)
  //border: 1px solid #000;
  // 2. 给父盒子添加上内边距。(同理)
  //padding-top: 20px;
  //3. 给父盒子添加: overflow: hidden; 属性
  overflow: hidden; 

}
  1. 盒子模型的尺寸计算
    image
    image

  2. 盒子背景
    image
    image

//不是针对当前元素,而是针对的是当前视口
background-attachment: fixed
  1. 背景渐变
    image
    image

  2. 盒子阴影
    image

  3. 过渡
    image

  4. 样式初始化
    image
    image

  5. 字体图标

  6. css精灵图技术

posted @ 2025-09-14 16:50  技术蓝鱼  阅读(8)  评论(0)    收藏  举报