当前位置: 首页 > news >正文

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精灵图技术

http://www.wxhsa.cn/company.asp?id=3691

相关文章:

  • Java-JDK8新特性
  • 解决MySQL ONLY_FULL_GROUP_BY 错误的方案
  • 博客园美化
  • spatial 一个芯片设计语言的简介 scala dsl 并行支持 -1
  • NOIP备考
  • NVIDIA GPGPU 访存通路设计调研
  • 用 Java 和 Tesseract 实现验证码图像识别
  • AGC003D
  • Java 实现验证码图像识别与处理流程详解
  • 图论杂题。
  • 暑假训练小结
  • 初识python:一些基础的知识(函数)
  • Java并发编程(3)
  • 斐波那契子序列
  • [豪の学习笔记] 软考中级备考 基础复习#10
  • 题解:CF2137D Replace with Occurrences
  • 题解:CF2137C Maximum Even Sum
  • 第02周 java预习
  • 编码规范
  • 深入解析:【译】Visual Studio 八月更新已发布 —— 更智能的人工智能、更出色的调试功能以及更多控制权
  • 命令模式在 TPL Dataflow 反馈回路管道中的应用及问题解决
  • Ubuntu 24.04 服务器调整MySQL 8.0.42 三节点集群(一主两从架构)安装部署配置教程
  • 使用almalinux基础镜像创建nginx镜像
  • docke容器版Nessus登录+破解+激活+特征库更新
  • 我把Cursor当磁盘清理工具用,非常棒! - ukyo-
  • vue项目
  • 第九篇:数据库服务克隆应用
  • Anti-Proxy Attendance 题解
  • 【2024-2025第二学期】助教工作总结
  • 开始每小时记录日程