【前端】HTML+CSS复习记录【5】

文章目录

  • 前言
  • 一、padding、margin、border(边框边距)
  • 二、样式优先级
  • 三、var(使用 CSS 变量更改多个元素样式)
  • 四、media quary(媒体查询)
  • 系列文章目录


前言

长时间未使用HTML编程,前端知识感觉忘得差不多了。通过梳理知识点,重新学习和巩固前段相关知识。
学习位置:W3CSchool:HTML + CSS 基础实战


一、padding、margin、border(边框边距)

  • ​padding(内边距)​ ​margin(外边距)​ ​border(边框)​,均可单边设置,可如下描写。
  • 这四个值按顺时针排序:上,右,下,左,并且设置的效果等同于特定声明每一个方向的padding。
    border属性不会继承到子元素中
    在这里插入图片描述

​padding​控制着元素内容与​border​之间的空隙大小。
在这里插入图片描述
​margin​(外边距)属性控制元素的边框与其他元素之间的距离。margin为正值时,元素大小不变,外部元素大小变化。值越大,离外部元素距离越大。margin为负值时,元素大小会根据值的绝对值大小变化,外部元素大小不变,可被内部元素覆盖。
在这里插入图片描述

二、样式优先级

  • CSS 优先规则1: 最近的祖先样式比其他祖先样式优先级高。
  • CSS 优先规则2:"直接样式"比"祖先样式"优先级高。
  • CSS优先规则3:优先级关系:内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器。(补充学习:CSS基础之伪类选择器)
  • CSS优先规则4:属性后插有 !important 的属性拥有最高优先级。
 p {color: red !important;}
  • CSS 优先规则5:第二个声明始终优于第一个声明。
  • HTML 元素里应用的 ​class ​的先后顺序无关紧要。但是,在​<style>​标签里面声明的class顺序十分重要。第二个声明始终优于第一个声明。如果​.blue-text​在​.pink-text​的后面声明,所以​.blue-text​会覆盖​.pink-text​的样式。

三、var(使用 CSS 变量更改多个元素样式)

background:var(custom-property-name, value)

ustom-property-name 是必需的, 自定义属性的名称,必需以 -- 开头。value 可选,备用值,在自定义属性不存在或未生效的时候使用。
:root伪类选择器常常被用于定义全局的CSS变量或者设置全局的CSS样式

:root {--main-bg-color: coral;/*定义*/--main-txt-color: blue;--main-padding: 15px;
}#div1 {background-color: var(--main-bg-color);/*使用*/color: var(--main-txt-color);padding: var(--main-padding);
}#div2 {background-color: var(--main-bg-color);color: var(--main-txt-color);padding: var(--main-padding);
}

四、media quary(媒体查询)

媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等。​CSS ​变量可以简化媒体查询的方式。 当屏幕小于或大于媒体查询所设置的值,通过改变变量的值,那么应用了变量的元素样式都会得到响应修改。

:root {--rabbit-ear-shadow: pink;--rabbit-basecolor: gray;/*一般生效*/--rabbit-skincolor:whitesmoke;--rabbit-background:rgb(198, 250, 241);
}@media (max-width: 350px) {:root {--rabbit-basecolor:white;  /*当宽度小于等于350px时,代替上面定义的变量生效*/}
}	

系列文章目录

【前端】HTML+CSS复习记录【1】
【前端】HTML+CSS复习记录【2】
【前端】HTML+CSS复习记录【3】
【前端】HTML+CSS复习记录【4】
【前端】HTML+CSS复习记录【5】(本章)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/39178.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

去中心化革命:探索区块链技术的前沿

随着信息技术的飞速发展&#xff0c;区块链技术作为一种新兴的去中心化解决方案&#xff0c;正逐渐改变着我们的经济、社会和技术格局。本文将从区块链的基本原理、当前的应用实例以及未来的发展趋势三个方面&#xff0c;深入探讨区块链技术在革命性变革中的角色和影响。 1. 区…

构建工程化:建立平台化工程体系

一、功能描述 工程化体系主要是解决能够统一进行打包的问题&#xff0c;故需要对整体进行描述 1.1、子项目描述 1.1.1、配置管理 对于每一个子项目而言&#xff0c;需要有专门的配置管理目录&#xff0c;目录的建议组建方式为conf/defalut和conf/local&#xff0c;其中defa…

TypeScript中,如何利用数组生成一个联合类型

本文由 ChatMoney团队出品 在开发中我们常常会遇到这样一个问题&#xff0c;代码如下&#xff1a; const arr ["a","b","c","d","e","f","g","h","i","j","k&quo…

利用区块链技术实现返利App的透明化追溯

利用区块链技术实现返利App的透明化追溯 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将探讨如何利用区块链技术实现返利App的透明化追溯&#xff0c…

【信息学奥赛】CSP-J/S初赛06 信息编码(ASCLL码及汉字信息编码)

本专栏&#x1f449;CSP-J/S初赛内容主要讲解信息学奥赛的初赛内容&#xff0c;包含计算机基础、初赛常考的C程序和算法以及数据结构&#xff0c;并收集了近年真题以作参考。 如果你想参加信息学奥赛&#xff0c;但之前没有太多C基础&#xff0c;请点击&#x1f449;专栏&#…

51单片机点亮第一个LED灯

欢迎入群共同学习交流 时间记录&#xff1a;2024/7/2 一、电路原理图 二、代码程序 1.项目代码结构 2.主程序代码 #include <reg51.h>sbit ledP1^0;void delay(int ms) {int i0;while(ms--){for(i0;i<110;i);} }int main() {while(1){led 1;delay(1000);led 0;d…

01-android studio实现闪屏页功能

在Android开发中&#xff0c;闪屏页面是指应用程序启动时展示的第一个页面&#xff0c;通常用来展示应用的logo或者介绍信息&#xff0c;让用户在应用加载完毕前看到一个友好的界面。本文将介绍如何实现一个简单的Android闪屏页面。 一、创建一个新的SplashActivity 首先&…

EFCore_悲观锁与乐观锁(MySQL)

简述 悲观锁&#xff1a;对并发可能导致的资源抢占问题持悲观态度&#xff0c;总是认为会有其他的线程来抢占资源&#xff0c;所以会在实际上对资源上锁 乐观锁&#xff1a;对并发可能导致的资源抢占问题持乐观态度&#xff0c;并不对资源实际上锁&#xff0c;而是在对资源进行…

git 禁止dev合并到任何其他分支

创建 pre-merge-commit 钩子 导航到 Git 仓库的钩子目录&#xff1a; cd /path/to/your/repo/.git/hooks创建或编辑 pre-merge-commit 钩子&#xff1a; 也可以通过指令创建 nano pre-merge-commit在钩子文件中添加以下代码&#xff1a; #!/bin/sh# 获取当前分支名称 curr…

矮油,希喂、喜崽、爱立方主食冻干是超贵的进口平替?最新测评

相信很多铲屎官一到选粮就苦恼&#xff0c;尤其是主食冻干&#xff0c;虽说主食冻干对猫咪的好处是普通猫粮无法比的&#xff0c;其价格也是远超普通猫粮的。所以很多铲屎官就很担心&#xff0c;花了高价买的主食冻干却营养不高。其实除了营养还有更多需要考虑的&#xff0c;比…

Spring Boot与Solr的集成应用

Spring Boot与Solr的集成应用 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们来聊聊Spring Boot与Solr的集成应用。Solr是一个高性能的开源搜索平台&am…

proto的前后端使用

首先定义一个input.proto文件 内容如下 syntax "proto3";message InputData {int32 UserId 1; // 将 number 改为 int32 或 int64string UserInput 2;string DrunkState 3; }message ResponseData {string AIResponse 1;string prompt 2;string emoti…

VBA提取word表格内容到excel

这是一段提取word表格中部分内容的vb代码。 Sub 提取word表格() mypath ThisWorkbook.Path & "\"myname Dir(mypath & "*.doc*")n 4 index of rowsRange("A1:F1") Array("课程代码", "课程名称", "专业&…

Linux miniconda 安装tensorflow-gpu遇到找不到GPU问题

背景&#xff1a; Linux Miniconda python3.9 安装步骤 1、 pip install tensorflow-gpu2.8.0 -i https://pypi.tuna.tsinghua.edu.cn/simple 2、报错如下&#xff1a; 更换镜像源&#xff0c;单独安装 pip install tf-estimator-nightly2.8.0.dev2021122109 -i https:/…

Java中的机器学习模型集成与训练实践

Java中的机器学习模型集成与训练实践 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 机器学习模型集成概述 在实际应用中&#xff0c;机器学习模型的集成与训…

主从同步binlog

主从同步的原理是怎样的 提到主从同步的原理&#xff0c;我们就需要了解在数据库中的一个重要日志文件&#xff0c;那就是 Binlog 二 进制日志&#xff0c;它记录了对数据库进行更新的事件。实际上主从同步的原理就是基于 Binlog 进 行数据同步的。在主从复制过程中&#xff…

【2024】LeetCode HOT 100——二分查找

目录 1. 搜索插入位置1.1 C++实现1.2 Python实现1.3 时空分析2. 搜索二维矩阵2.1 C++实现2.2 Python实现2.3 时空分析3. 在排序数组中查找元素的第一个和最后一个位置3.1 C++实现3.2 Python实现3.3 时空分析4. 搜索旋转排序数组4.1 C++实现4.2 Python实现4.3 时空分析5. 寻找旋…

在U盘/移动硬盘上安装热插拔式Ubuntu系统,并将Docker目录挂载到NTFS硬盘

Windows10的WSL2的确给开发人员带来了很多方便&#xff0c;但是仍然有很多缺点。比如&#xff1a;太占系统内存&#xff1b;有些软件无法在WSL2中编译成功&#xff1b;相当于虚拟机&#xff0c;性能不如原装系统。 装双系统&#xff0c;相信大家都不陌生&#xff0c;但它会占用…

SpringBoot 项目整合 MyBatisPlus 框架,附带测试示例

文章目录 一、创建 SpringBoot 项目二、添加 MyBatisPlus 依赖三、项目结构和数据库表结构四、项目代码1、application.yml2、TestController3、TbUser4、TbUserMapper5、TestServiceImpl6、TestService7、TestApplication8、TbUserMapper.xml9、MyBatisPlusTest 五、浏览器测试…

网安小贴士(3)网安协议

一、前言 网络安全协议是构建安全网络环境的基础&#xff0c;它们帮助保护网络通信免受各种威胁和攻击。 二、定义 网络安全协议是指在计算机网络中用于确保网络通信和数据传输安全的协议。它们定义了在网络通信过程中的安全机制、加密算法、认证和授权流程等&#xff0c;以保…