css基础之显示模式、背景、三大特性

显示模式、背景

一、元素显示模式

1.块级元素

独占一行,例如div,p,hr,h1-h6,ul,ol,form,table
可以设置高度宽度,外边距,内边距
宽度默认容器宽度
里面可以放行内或块级元素
注意:
文字类元素不能使用块级元素

<p>或<h1>等里不能放<div>

2.行内元素

例如:span,a,i,em
相邻行内元素一行可以放多个
宽高直接设置没有效果
默认宽度是本身内容宽度
行内元素只能放文本或其他行内元素
注意:
链接里不能放链接
链接里可以放块级元素

3.行内块元素

一行可以放多个
默认宽度是本身内容宽度
可以控制高度宽度,外边距,内边距

4.显示模式的转换

(例如a是行内元素,不能设置宽度,但我们想改变链接点击的宽度,也就是要改变为块级元素)
(常用)转化为块级元素:display: block;
转化为行内元素:display: inline;
(常用)转化为行内块元素:display: inline-block;

<style>a {color: pink;text-decoration: none;width: 150px;height: 50px;display: block;}
</style>
<a href="#">小猪佩奇</a>c

5.qq截图ctrl+alt+a

6.让文字行高等于盒子高度时可以实现文字垂直居中

二、背景(logo一般用background实现)

1.背景元素(默认透明transparent)

background-color: pink;

2.背景图片

(当既有图片又有背景颜色,图片会压住颜色)
background-image: url(image/Logo.png)

3.背景平铺(默认平铺repeat)

background-repeat
background-repeat: no-repeat;没有平铺
background-repeat: repeat-x;沿x轴平铺
background-repeat: repeat-y;沿y轴平铺

4.背景图片位置

background-position: 方位名词;
方位名词:
x轴:right,left,center
y轴:center,top,bottom
当只有一个方位名词,另外一个轴默认居中
当两个方位名词时,与前后顺序无关
background-position: center top;

background-position: 精确方位;
当只有一个精确单位的值时,一定为x轴,y轴默认居中
当为精确方位时,必须先x轴再y轴
background-position: 20px 50px;

background-position: 混合单位
background-position: center 20px;

5.背景固定(默认scroll)

background-attchment: scroll背景随对象滚动
background-position: fixed背景固定

6.背景复合写法

background: black url() repeat-y fixed top;无顺序要求

7.背景色半透明

background: rgba(0,0,0,0.3);最后一个数字取值范围[0,1]控制透明度

三大特性

1.层叠性

当给结构设置了相同的样式时,根据层叠性的就近原则,实现离结构近的样式,或者说后面的代码会覆盖

2.继承性

子标签会继承父标签的与文字相关的某些样式

行高的继承性:font: 12px/1.5 Microsoft YaHei;1.5指的是行高为当前文字大小的1.5倍也可以写带单位px的模式

3.优先级

选择器相同根据层叠性
选择器不同根据选择器权重
选择器权重:!important(color: pink!important)为无穷>style (

)为1000>id为100>类,伪类为10>元素为1>继承为0

注意:
浏览器单独给链接a设置了样式,不能通过body来修改样式
复合选择器有权重叠加,但不会进位
此时的字为红色,虽然id的权重比元素的大,但是p继承的权重最低为0

<style>#father {color: pink;}p {color: red;}
</style>
<body><div id="father"><p>好看</p></div>
</body>

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

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

相关文章

Ajax的请求方式

1 get 1 $.get() //通过远程Http Get请求载入信息 $.get("请求地址",{id:1;name:"一一"},function(data) {//请求成功执行的代码写在这里 }) //或者直接拼接参数 $.get("请求地址?id"id"&name"name,function(data) {//请求成功…

[ARM系列]coresight(一)

原文链接 目的&#xff1a;对复杂SOC实现debug和trace的架构 典型环境 包含&#xff1a;2个ARM core&#xff0c;一个DSP&#xff0c;众多coresight组件 coresight组件实现对core、DSP的debug和trace功能 环境中包含3个通路 trace通路&#xff1a;将core和DSP内部信息输出到…

跨域问题(服务器和浏览器之间)待补充

一、为什么产生&#xff1a; 同源策略&#xff08;域名&#xff0c;协议&#xff0c;端口&#xff09;&#xff0c;安全问题 二、怎么解决&#xff1a; 1、cros:修改响应头 2、jp&#xff1a;采用js标签 3、代理&#xff08;创建服务器&#xff0c;定义规则&#xff0c;服…

JVM笔记3-经典的垃圾收集器

上图展示了7种&#xff0c;适用于不同分代中的收集器。如果两者之间由连线&#xff0c;说明可以搭配使用。 PS&#xff1a;在JDK8中将SerialCMS和ParNewSerial Old的组合声明为废弃&#xff0c;并且在JDK9中完全取消了这两种组合的支持。 1、Serial收集器 Serial收集器是JVM中…

C++:重写和重载

重写&#xff08;Override&#xff09;和重载&#xff08;Overload&#xff09;是面向对象编程中常用的两个概念&#xff0c;它们虽然都涉及到方法的定义&#xff0c;但是在实现和使用上有着不同的特点。 重写&#xff08;Override&#xff09;&#xff1a; 重写是指在子类中重…

js开启子线程及其使用

众所周知&#xff0c;js是单线程&#xff0c;但是可以开启子线程来帮忙处理一些数据&#xff0c;但是这个子线程是有限制的 1.必须是同源 2.完全受主线程控制 3.不能在子线程中操作dom节点 4.子线程没有window&#xff0c;可以使用self 5.等等 具体的查看官网 进程切换是要耗时…

如何在Gin框架中使用Websocket?

在Gin框架中使用Websocket&#xff0c;你需要使用一个第三方库&#xff0c;例如github.com/gorilla/websocket。以下是一个基本的示例&#xff0c;展示了如何在Gin中设置一个Websocket服务器&#xff1a; 首先&#xff0c;你需要安装gorilla/websocket包&#xff0c;你可以使用…

【备战软考(嵌入式系统设计师)】07 - 计算机网络模型

七层模型 计算机网络中比较常见的有OSI七层模型和TCP/IP四层模型。 软考中主要考七层模型&#xff0c;但是实际中使用的还是四层模型比较多&#xff0c;我们主要是为了考试&#xff0c;那就主要讲讲七层模型。不过实际上四层模型就是将七层模型压缩了三层&#xff0c;本质上是…

openssl相关命令

报错keytool error: java.lang.Exception: Input not an X.509 certificate 该报错表示需要 X.509 格式的证书,可以通过下面的命令转换 openssl x509 -in <原证书> -out <X.509证书> # 例如 openssl x509 -in test.crt -out test509.crt 参考: Error Importing…

深度学习中的注意力机制一(Pytorch 15)

一 简介 灵长类动物的视觉系统接受了大量的感官输入&#xff0c;这些感官输入远远超过了大脑能够完全处理的程度。然而&#xff0c; 并非所有刺激的影响都是相等的。意识的聚集和专注使灵长类动物能够在复杂的视觉环境中将注意力引向感 兴趣的物体&#xff0c;例如猎物和天敌。…

电子电器架构 --- 主机厂产线的两种刷写方法

电子电器架构 — 主机厂产线的两种刷写方法 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证…

DS:顺序表、单链表的相关OJ题训练(1)

欢迎各位来到 Harper.Lee 的学习小世界&#xff01; 博主主页传送门&#xff1a;Harper.Lee的博客主页 想要一起进步的uu可以来后台找我交流哦&#xff01; 在DS&#xff1a;单链表的实现 和 DS&#xff1a;顺序表的实现这两篇文章中&#xff0c;我详细介绍了顺序表和单链表的…

bert 微调合集

暂时没有时间总结&#xff0c;先贴上几个还不错的帖子 trick: PyTorch知识点补全_no_decay ["bias", "layernorm.bias", "layernorm.w-CSDN博客 Bert在fine-tune训练时的技巧&#xff1a;①冻结部分层参数、②weight-decay (L2正则化)、③warmup_…

Go限制运行时操作系统线程数量

Go语言的运行时系统使用了自己的调度器&#xff0c;该调度器使用了M:N模型&#xff0c;即M个goroutine可以在N个操作系统上进行调度。我们可以通过设置环境变量GOMAXPROCS或者使用runtime包中的GOMAXPROCS函数来限制Go程序可以使用的操作系统数。默认情况下&#xff0c;GOMAXPR…

IDEA基于Maven构建项目

IDEA基于Maven构建项目 一、Maven简介 Apache Maven 是一个软件项目管理和理解工具。基于项目对象模型的概念&#xff08;POM&#xff09;&#xff0c;Maven 可以从中心信息中管理项目的构建、报告和文档。 Apache Maven 可以用于构建和管理任何基于 Java 的项目。 下载地址…

【可实战】被测需求理解(需求文档是啥样的、从哪些角度进行需求评审、需求分析需要分析出哪些内容、如何提高需求分析能力)

产品人员会产出一个需求文档&#xff0c;然后组织一个需求的宣讲。测试人员的任务就是在需求宣讲当中&#xff0c;分析需求有没有存在一些问题&#xff0c;然后在需求宣讲结束之后通过分析需求文档&#xff0c;分析里面的测试点并预估一个排期。 一、需求文档是什么样的&#x…

视频教程下载:为 GPTs 商店构建 10 个 GPTs获得被动收入

欢迎来到 AI 驱动的内容创作新时代 - GPT 商店。这门综合课程是您成为定制和利用 GPT 模型解决多样化应用的专家的路线图。无论你是错过了应用商店革命的初始浪潮还是乘着它取得了成功&#xff0c;这都是你站在下一个重大数字飞跃前沿的机会。 课程模块&#xff1a; - 介绍 Ch…

Unity 性能优化之动态批处理(四)

提示&#xff1a;仅供参考&#xff0c;有误之处&#xff0c;麻烦大佬指出&#xff0c;不胜感激&#xff01; 文章目录 前言一、动态合批是什么&#xff1f;二、使用动态批处理1.打开动态合批2.满足条件 三、检查动态合批是否成功五、动态合批弊端总结 前言 动态批处理是常用优…

libmodbus使用

安装可以看这个博客&#xff1a; https://blog.csdn.net/hanhui22/article/details/105786762 它的安装可以&#xff0c;但是编译测试看不太懂&#xff0c;我没跟着它的编译&#xff0c;完了后把/lib下的 放到开发板的/usr/lib下 编写代码: #include <stdio.h> #inclu…

UI组件库和内容文字的中英文切换

同时实现UI组件库(这里以ElementPlus为例)和内容文字的中英文切换 1. 安装vueI18n和element-plus pnpm i vue-i18n element-plus 2. 然后在项目中src目录下新建lang文件夹&#xff0c;里面新建en.ts和zh.ts还有index.ts index.ts import { createI18n } from vue-i18n impor…