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

news/2024/9/26 1:23:19/

显示模式、背景

一、元素显示模式

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.ppmy.cn/news/1454374.html

相关文章

Vue 开发中的一些问题简单记录,Cannot find module ‘webpack/lib/RuleSet‘

您好&#xff0c;我是码农飞哥&#xff08;wei158556&#xff09;&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f4aa;&#x1f3fb; 1. Python基础专栏&#xff0c;基础知识一网打尽&#xff0c;9.9元买不了吃亏&#xff0c;买不了上当。 Python从入门到精…

四种粒子群算法的Matlab实现

粒子群算法&#xff0c;又称为粒子群优化&#xff08;Particle Swarm Optimization&#xff0c;简称PSO&#xff09;&#xff0c;是一种基于群体智能的优化算法。它最初由James Kennedy和Russell Eberhart于1995年提出&#xff0c;灵感来源于鸟群捕食行为的研究。在PSO中&#…

overflow:hidden对解决外边距塌陷的个人理解

外边距塌陷&#xff1a; 子元素的上外边距大于父元素的上外边距&#xff0c;导致边距折叠&#xff0c;取两者之间最大值&#xff0c;即子元素外边距&#xff0c;导致父元素上外边距失效。 解决办法&#xff1a;在父元素样式添加overflow:hidden;或者border:1px solid black;(不…

Crossplane 实战:构建统一的云原生控制平面

1 什么是 Crossplane Crossplane 是一个开源的 Kubernetes 扩展&#xff0c;其核心目标是将 Kubernetes 转化为一个通用的控制平面&#xff0c;使其能够管理和编排分布于 Kubernetes 集群内外的各种资源。通过扩展 Kubernetes 的功能&#xff0c;Crossplane 对 Kubernetes 集群…

医学统计学和医学方面的数据分析的软件有哪些呢

医学统计学对于医学生来说确实是一门至关重要的课程&#xff0c;它贯穿了医学生的整个职业生涯。针对你提到的医学统计学的学习难点和常见问题&#xff0c;以下是一些建议和解答&#xff1a; 学习医学统计必须掌握的知识点&#xff1a; 除了基本的统计概念&#xff08;如均值…

【Java从入门到精通】Java 正则表达式

目录 正则表达式实例 &#x1f349;java.util.regex 包 &#x1f349;实例 &#x1f349;捕获组 &#x1f349;实例 &#x1f349;RegexMatches.java 文件代码&#xff1a; &#x1f349;正则表达式语法 &#x1f349;Matcher 类的方法 &#x1f349;索引方法 &#…

C# WCF服务(由于内部错误,服务器无法处理该请求。)

由于内部错误&#xff0c;服务器无法处理该请求。有关该错误的详细信息&#xff0c;请打开服务器上的 IncludeExceptionDetailInFaults (从 ServiceBehaviorAttribute 或从 <serviceDebug> 配置行为)以便将异常信息发送回客户端&#xff0c;或打开对每个 Microsoft .NET …

HTML/CSS1

1.前置说明 请点这里 2.img元素 格式&#xff1a; <img src"图片地址" alt"占位文字" width"图片宽度" height"图片高度">其中alt是当图片加载失败时显示的文字 而且不同内核的浏览器显示出来的占位文字的效果也是不尽相同的…