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

CSS易漏知识

复杂选择器可以通过(id的个数,class的个数,标签的个数)的形式,计算权重。
如果我们需要将某个选择器的某条属性提升权重,可以在属性后面写!important;注意!importent要写在;前面 很多公司不允许使用!important,因为这会带来不经意的样式冲突。

 一、复杂选择器

复杂选择器可以通过(id的个数,class的个数,标签的个数)的形式,计算权重。
如果我们需要将某个选择器的某条属性提升权重,可以在属性后面写!important;注意!importent要写在;前面 很多公司不允许使用!important,因为这会带来不经意的样式冲突。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 权重(2, 0, 1)*/#box1 #box2 p {color: red;}/* 权重(2, 1, 2)*/#box1 div.box2 #box3 p {color: green;}/* 权重(0, 3, 1)*/.box1 .box2 .box3 p {color: blue;}/* 权重(0, 1, 1)*/.list li {color: red;}/* 权重(0, 1, 0)*/.spec {color: blue !important;}</style>
</head><body><div id="box1" class="box1"><div id="box2" class="box2"><div id="box3" class="box3"><p>我是段落</p></div></div></div><ul class="list"><li>列表项</li><li class="spec">列表项</li><li class="spec">列表项</li><li>列表项</li><li>列表项</li><li>列表项</li><li>列表项</li></ul>
</body></html>

二、属性选择器

根据元素的属性值来选择元素,有以下多种匹配方式:

[alt] 有这个属性

[alt = "北京故宫"] 精确匹配

[alt ^= "abc"] 开头匹配

[alt $= "abc"] 结尾匹配

[alt *= "abc"] 任意位置匹配

[alt |= "abc"] abc-开头

[alt ~= "abc"] abc为空格分开的独立部分

三、伪类

伪类是添加到选择器的描述性词语,指定要选择的元素的特殊状态,超级链接有四个特殊状态。

a:link 没有被访问的超级链接

a:visited 已经被访问的超级链接

a:hover 正被鼠标悬停的超级链接

a:active 正被激活的超级链接(按下按键但还没松开按键)

a标签的伪类书写,要按照“爱恨准则”的顺序,否则会有伪类不生效。 LOVEHATE

四、CSS3新增伪类

:empty选择空标签 (注意有空格不被视为空标签)

:focus选择当前获得焦点的表单元素

:enabled选择当前有效的表单元素

:disabled选择当前无效的表单元素

:checked选择当前已经勾选的单选按钮或者复选框

:root选择根元素,即<html>标签

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.para {/* 宽度、高度 */width: 100px;height: 100px;/* 边框 */border: 1px solid #000;}.para:empty {background-color: red;}input:focus {background-color: rgb(239, 243, 181);}input:disabled {border: 1px solid #000;}input:enabled {border: 1px solid rgb(17, 84, 209);}/* +表示后面的兄弟元素 */input:checked+span {color: red;}:root {font-size: 20px;}</style>
</head><body><p class="para"></p><p class="para"></p><p class="para">123</p><p class="para"> </p><p><input type="text"><input type="text"><input type="text" disabled><input type="text" disabled><input type="text"></p><p><input type="checkbox"> <span>文字</span><input type="checkbox"> <span>文字</span><input type="checkbox"> <span>文字</span><input type="checkbox"> <span>文字</span></p>
</body></html>

五、伪元素

::before创建一个伪元素,其将成为匹配选中的元素的第一个子元素,必须设置content属性表示其中的内容。

::after创建一个伪元素,其将成为匹配选中的元素的最后一个子元素,必须设置content属性表示其中的内容。

::section

::first-letter会选中某元素中(必须是块级元素)第一行的第一个字母

::first-line会选中某元素中(必须是块级元素)第一行的全部文字

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a::before {content: "■";}a::after {content: "❤";}.box1 {width: 400px;height: 300px;border: 1px solid #000;}.box1::selection {/* 背景颜色 */background-color: springgreen;color: deeppink;}.box1::first-letter {font-size: 50px;}.box1::first-line {/* 添加下划线 */text-decoration: underline;}</style>
</head><body><p><a href="">我是超级链接</a></p><p><a href="">我是超级链接</a></p><p><a href="">我是超级链接</a></p><div class="box1">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
</body></html>

六、元素关系选择器

>子选择器 当使用>号分割两个元素时,他只会匹配那些作为第一个元素的直接后代元素,即两个标签为父子关系。与后代选择器的区别是后代选择器不一定限制是子元素。

div>p  div的子标签p

+相邻兄弟选择器,img+p 图片后面紧跟着的段落将被选中。

~通用兄弟选择器,a~b选择a元素之后所有同层级b元素。p~span p元素之后的所有同层级span元素。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box>p {color: red;}img {width: 300px;}img+span {color: green;}h3~span {font-style: italic;}</style>
</head><body><div class="box"><p>我是段落</p><p>我是段落</p><div><p>我是段落</p><p>我是段落</p></div></div><p>我是段落</p><p>我是段落</p><p><img src="images/0.jpg" alt=""><span>这是北京故宫</span></p><p><img src="images/1.jpg" alt=""><span>这是北京鸟巢</span></p><span>你好</span><span>你好</span><h3>我是一个三级标题</h3><span>我是后面的span</span><span>我是后面的span</span><span>我是后面的span</span><span>我是后面的span</span><p>我是一个段落</p><span>我是后面的span</span><span>我是后面的span</span><div><span>多了一个级别span</span><span>多了一个级别span</span></div>
</body></html>

七、文字水平垂直居中

需要分别设置水平和垂直居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 300px;height: 100px;background-color: orange;font-size: 40px;color: white;/* 水平居中 */text-align: center;/* 垂直居中,行高等于盒子高 */line-height: 100px;}</style>
</head>
<body><div class="box">行胜于言</div>
</body>
</html>

八、text-indent属性

text-indent 是一个CSS属性,用于指定块级元素中第一行文本的缩进量。这个属性可以接受多种单位,包括像素(px)、百分比(%)、em、rem等。

以下是一些使用 text-indent 的例子:

p {text-indent: 20px; /* 文本缩进20像素 */
}h1 {text-indent: 2em; /* 文本缩进当前字体大小的两倍 */
}div {text-indent: 10%; /* 文本缩进父元素宽度的10% */
}

text-indent 的几个关键点:

  • 它只对块级元素的第一行文本有效。
  • 如果值为负数,第一行文本会向左缩进,可能超出其容器的左边框。
  • 它通常用于段落(<p>标签)以创建首行缩进,这在印刷和出版行业中很常见。
  • text-indent 可以继承,因此应用于父元素的缩进也会应用于子元素,除非子元素有明确的样式覆盖。

这个属性在网页设计中常用于增强文本的排版效果,尤其是在文章或博客文章中,为段落添加首行缩进可以提升阅读体验。

九、margin和padding的区别

margin 和 padding 是CSS中用于控制元素空间布局的两个不同属性,它们的主要区别在于它们控制的是元素的不同区域:

  • margin用于设置元素边缘与其周围元素之间的空间。它位于元素的边框之外,是元素盒子模型的一部分。margin 可以接受一到四个值,分别代表上、右、下、左的边距。如果没有指定某个值,它将使用对边的值。

    例如,以下CSS规则将设置一个元素的四个边距为0:

    .element {margin: 0; /* 上右下左的边距都是0 */
    }
    
  • padding用于设置元素内容与其边框之间的空间。它位于元素的边框之内。与 margin 一样,padding 也可以接受一到四个值。

    例如,以下CSS规则将设置一个元素的四个内边距为0:

    .element {padding: 0; /* 上右下左的内边距都是0 */
    }
    

以下是 margin 和 padding 之间的主要区别:

  1. 位置

    • margin 位于元素的边框之外。
    • padding 位于元素的边框之内。
  2. 背景

    • margin 的背景是透明的,不会受到元素背景颜色或背景图像的影响。
    • padding 的背景颜色或背景图像与元素本身的背景相同。
  3. 布局影响

    • margin 影响元素与周围元素之间的空间,可以用于创建元素之间的间隔。
    • padding 影响元素内容与元素边框之间的空间,可以用于增加元素内部的空白区域。
  4. 折叠

    • margin 在某些情况下会发生折叠,特别是垂直方向上的相邻元素的相邻边距会合并为一个较大的边距。
    • padding 不会发生折叠。
  5. 继承

    • margin 通常不继承,即子元素不会继承父元素的 margin 值。
    • padding 可以继承,但通常会被子元素的 padding 值覆盖。

在网页设计中,通常将 margin: 0; 和 padding: 0; 用于重置浏览器默认样式,以确保在不同浏览器之间获得一致的布局效果。

十、盒模型的计算

width和height不是盒子的实际长宽而是盒子留给内容的长宽,即实际可用面积(相当于向外踹)。所以盒子的实际宽度是width+padding宽度+border的宽度。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 400px;height: 300px;padding: 10px;border: 6px solid blue;margin: 40px auto;}.box .c1 {/* 老大实际占有的宽度是400px,实际占有的高度是200px,并且向下踹20px *//* 它只给老二留下了80px */width: 388px;height: 188px;border: 6px solid green;margin-bottom: 20px;}.box .c2 {/* 老二还剩下什么?剩下了400px宽度、80px高度总空间 */width: 388px;height: 48px;padding: 10px 0;border: 6px solid orange;}</style>
</head><body><div class="box"><div class="c1">1</div><div class="c2">2</div></div>
</body></html>

 

相关文章:

CSS易漏知识

复杂选择器可以通过&#xff08;id的个数&#xff0c;class的个数&#xff0c;标签的个数&#xff09;的形式&#xff0c;计算权重。 如果我们需要将某个选择器的某条属性提升权重&#xff0c;可以在属性后面写!important&#xff1b;注意!importent要写在;前面 很多公司不允许…...

【10天速通Navigation2】(三) :Cartographer建图算法配置:从仿真到实车,从原理到实现

前言 往期内容&#xff1a; 第一期&#xff1a;【10天速通Navigation2】(一) 框架总览和概念解释第二期&#xff1a;【10天速通Navigation2】(二) &#xff1a;ROS2gazebo阿克曼小车模型搭建-gazebo_ackermann_drive等插件的配置和说明 本教材将贯穿nav2的全部内容&#xff0c…...

测试造数,excel转insert语句

目录 excel转sql的insert语句一、背景二、直接上代码 excel转sql的insert语句 一、背景 在实际测试工作中&#xff0c;需要频繁地进行测试造数并插入数据库验证&#xff0c;常规的手写sql语句过于浪费时间&#xff0c;为此简单写个脚本&#xff0c;通过excel来造数&#xff0…...

Python 应用可观测重磅上线:解决 LLM 应用落地的“最后一公里”问题

作者&#xff1a;彦鸿 背景 随着 LLM&#xff08;大语言模型&#xff09;技术的不断成熟和应用场景的不断拓展&#xff0c;越来越多的企业开始将 LLM 技术纳入自己的产品和服务中。LLM 在自然语言处理方面表现出令人印象深刻的能力。然而&#xff0c;其内部机制仍然不明确&am…...

从零开始:用Spring Boot搭建厨艺分享网站

2 相关技术 2.1 Spring Boot框架简介 Spring Boot是由Pivotal团队提供的全新框架&#xff0c;其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置&#xff0c;从而使开发人员不再需要定义样板化的配置。通过这种方式&#xff0c;Sprin…...

《2024中国泛娱乐出海洞察报告》解析,垂直且多元化方向发展!

随着以“社交”为代表的全球泛娱乐市场规模不断扩大以及用户需求不断细化&#xff0c;中国泛娱乐出海产品正朝着更加垂直化、多元化的方向发展。基于此&#xff0c;《2024中国泛娱乐出海洞察报告》深入剖析了中国泛娱乐行业出海进程以及各细分赛道出海现状及核心特征。针对中国…...

强化学习数学原理学习(一)

前言 总之开始学! 正文 先从一些concept开始吧,有一个脉络比较好 state 首先是就是状态和状态空间,显而易见,不多说了 action 同理,动作和动作空间 state transition 状态转换,不多说 policy 策略,不多说 reward 奖励,不多说 MDP(马尔科夫) 这里需要注意到就是这个是无…...

获 Sei 基金会投资的 MetaArena :掀起新一轮链上游戏革命

MetaArena 是一个综合性的 Web3 游戏开发和发布平台&#xff0c;集成了最先进的技术架构&#xff0c;包括 Unreal Engine 5.3、去中心化虚拟资产交易市场和分布式计算资源支持。平台不仅为开发者提供了高效的开发工具&#xff0c;还通过跨链功能和 AI 模块&#xff0c;极大简化…...

react-signature-canvas 实现画笔与橡皮擦功能

react-signature-canvas git 地址 代码示例 import React, { Component } from react import { createRoot } from react-dom/clientimport SignaturePad from ../../src/index.tsximport * as styles from ./styles.module.cssclass App extends Component {state { trimmed…...

004:ABBYY PDF Transformer安装教程

引言&#xff1a;本文主要讲解。 一、软件介绍 ABBYY PDF Transformer由ABBYY公司出品&#xff0c;属于一款家庭及商业都适用的PDF文档转换工具。它结合了ABBYY的OCR&#xff08;光学字符识别&#xff09;技术和Adobe PDF库技术&#xff0c;以确保能够便捷地处理任何类型的PDF…...

FlinkSQL之temporary join开发

在实时开发中&#xff0c;双流join获取目标对应时刻的属性时&#xff0c;经常使用temporary join。笔者在流量升级的实时迭代中&#xff0c;需要让流量日志精准的匹配上浏览时间里对应的商品属性&#xff0c;使用temporary join开发过程中踩坑不少&#xff0c;将一些经验沉淀在…...

第二十六节 直方图均衡化

图像直方图均衡化 图像直方图均衡化可以增强图像增强&#xff0c;对输入图像进行直方图均衡化处理&#xff0c;提升后续对象检测的准确率在Opencv人脸检测的代码演示中已经很常见了&#xff0c;此外对医学影像图像与卫星遥感图像也经常通过直方图均衡化来提升图像质量 Opencv…...

工单管理用什么工具好?8款推荐清单

本文推荐的8款项目工单管理系统有:1. PingCode; 2.Worktile; 3.Teambition; 4.致远OA; 5.TAPD; 6.Gitee; 7.Wrike; 8.Trello。 很多企业在处理项目工单时&#xff0c;依然依赖电子邮件、Excel表格&#xff0c;甚至是手动记录。这样做不仅效率低下&#xff0c;还容易导致工单遗漏…...

工地安全新突破:AI视频监控提升巡检与防护水平

在建筑工地和其他劳动密集型行业&#xff0c;工人的安全一直是管理工作的重中之重。为了确保工地的安全管理更加高效和智能化&#xff0c;AI视频监控卫士。通过人工智能技术&#xff0c;系统不仅能实时监控&#xff0c;还能自动识别工地现场的安全隐患&#xff0c;为工地管理者…...

World of Warcraft [CLASSIC][80][the Ulduar]

Ulduar 奥杜尔副本介绍 奥杜尔共计14个BOSS&#xff0c;通常说的10H就是10个苦难模式就是全通&#xff0c;9H就是除了【观察者奥尔加隆】&#xff0c;特别说明开启【观察者奥尔加隆】&#xff0c;是需要打掉困难模式4个守护者的。 所以人们经常说的类似“10H 观察者”、“10H…...

python实现数据库的增删改查功能,图形化版本

import tkinter from tkinter import * import psycopg2 from tkinter import messagebox#连接信息 t_conn{"dbname": "d1","user": "u1","password": "123qqq...A","port": "15400","h…...

pipeline开发笔记

pipeline开发笔记 jenkins常用插件Build Authorization Token Root配置GitLab的webhooks(钩子)配置构建触发器--示例 piblish over sshBlue OceanWorkspace Cleanup PluginGit插件PipelineLocalization: Chinese (Simplified) --中文显示Build Environment Plugin 显示构建过程…...

spark读取parquet文件

源码 parquet文件读取的入口是FileSourceScanExec&#xff0c;用parquet文件生成对应的RDD 非bucket文件所以走createNonBucketedReadRDD方法。 createNonBucketedReadRDD 过程&#xff1a; 确定文件分割参数 openCostInBytes4M 相关参数spark.sql.files.openCostInBytes4M…...

redis详细教程(1.String类型)

Redis 的 String 类型内部使用了一种叫做 SDS&#xff08;Simple Dynamic String&#xff09;的结构。SDS 的设计比传统的 C 语言字符串更加高效和安全&#xff0c;主要特点如下&#xff1a; 头部信息&#xff1a;SDS 的头部包含了一些元数据&#xff0c;比如字符串的长度、剩…...

用友U8接口-库存管理(7)

概括 本文的操作需要正确部署U8API主要讲述库存管理接口的使用&#xff0c;以产成品入库单作为说明&#xff0c;其他单据接口都是大同小异的&#xff01;许多时候先在ERP做个单&#xff0c;然后仿造ERP单据参数&#xff0c;构造接口JSON参数是不错的做法。 获取Token访问令牌…...

Spring Boot HikariCP数据库连接池入门

1. 概述 在我们的项目中&#xff0c;数据库连接池基本是必不可少的组件。在目前数据库连接池的选型中&#xff0c;主要是 Druid &#xff0c;为监控而生的数据库连接池。HikariCP &#xff0c;号称性能最好的数据库连接池。 至于怎么选择&#xff0c;两者都非常优秀&#x…...

Docker快速上手教程:MacOS系统【安装/配置/使用/原理】全链路速通

背景 最近换了个 Macbook Air M3, 写个人项目需要用到 Docker,配置过程有一点点坎坷,还是得记录下避免重蹈覆辙。 什么。为什么是买 Air 而不是 Pro Max? 因为码农的钱也是钱啊。 这里我不会先讲原理,我认为工程的事情都是先看到现象,有了概念的轮廓,才应该去研究原理,…...

【JavaSE】认识String类,了解,进阶到熟练掌握

#1024程序员节 | 征文# 下面就让博主带领大家一起解决心中关于String类的疑问吧~~~ 1.字符串构造&#xff1a; 第一种和第二种&#xff08;有一定的区别&#xff0c;在常量池上&#xff09; public static void main(String[] args) { // 使用常量串构造 String s1 "h…...

vue3 vben-admin 窗口大小更改后 echarts尺寸变为 100px的问题

问题描述: 当切换切换tab 并且窗口尺寸更改时, echarts的尺寸因为父元素为 0, 自动设置为 100px 网上查找资料的结果: 1,使用vue 中的 v-if 来重新设置dom树 缺点: 频繁操作dom树结构, 极其消耗性能 优点: 自适应展示 2,设置固定宽高 缺点: 不能自适应展示, 无需消耗额外…...

Web应用框架-Django应用基础(3)-Jinja2

1.创建姓名模板 username里的数据发生改变&#xff0c;页面中渲染的数据发生改变&#xff0c;该效果称为动态数据 #hello/views:def hello_user(request):username000html <!DOCTYPE html><html lang"en"><head><meta charset"UTF-8&quo…...

js(深浅拷贝,节流防抖,this指向,改变this指向的方法)

一、深浅拷贝 1.基本数据类型和引用数据类型的区别&#xff1a; 1. 基本数据类型的变量存储的是值 引用数据类型的变量存储的是地址值 2. 基本数据类型的变量存储的值在栈内存 引用数据类型的变量存储的值在堆内存 3. 基本数据类型的变量存储的是值和值之间相互不影响 引用数据…...

香橙派5(RK3588)使用npu加速yolov5推理的部署过程

香橙派5使用npu加速yolov5推理的部署过程 硬件环境 部署过程 模型训练(x86主机) 在带nvidia显卡(最好)的主机上进行yolo的配置与训练, 获取最终的best.pt模型文件, 详见另一篇文档 模型转换(x86主机) 下载airockchip提供的yolov5(从pt到onnx) 一定要下这个版本的yolov5, …...

基于MWORKS的蓝桥杯「智能装备数字化建模大赛」正式发布,首期培训本周六开启

为强化装备数字化人才培养&#xff0c;推动装备数字化技术快速发展&#xff0c;第十六届蓝桥杯全国软件和信息技术专业人才大赛设置专项赛暨智能装备数字化建模大赛&#xff0c;使用MWORKS作为参赛软件。关于参赛软件授权、技术支持与培训、教材与案例开发支持、成果转化培训及…...

021、深入解析前端请求拦截器

目录 深入解析前端请求拦截器&#xff1a; 1. 引言 2. 核心实现与基础概念 2.1 基础拦截器实现 2.2 响应拦截器配置 3. 实际应用场景 3.1 完整的用户认证系统 3.2 文件上传系统 3.3 API请求缓存系统 3.4 请求重试机制 3.5 国际化处理 4. 性能优化实践 4.1 请求合并…...

windows中的tracert命令

在 Windows 操作系统中&#xff0c;tracert&#xff08;全称 Trace Route&#xff09;是一个用于确定 IP 数据包到达目标主机所经过的路径的命令行工具。它通过发送具有不同生存时间&#xff08;TTL&#xff09;的 ICMP&#xff08;Internet Control Message Protocol&#xff…...

顺德品牌网站建设咨询/百度收录查询工具

文章目录问题描述解决方法参考问题描述 使用 pytorch jit 自己写的模型的时候,显示了以下错误: /home/chiebotgpuhq/anaconda3/envs/kp2dn/lib/python3.7/site-packages/torch/jit/_trace.py:966: TracerWarning: Output nr 1. of the traced function does not match the co…...

wordpress 标签云插件下载/seo门户 site

项目介绍 一款 PHP 语言基于 ThinkPhp6.x、Layui、MySQL等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架&#xff0c;可用于快速搭建前后端分离后台管理系统&#xff0c;本着简化开发、提升开发效率的初衷&#xff0c;框架自研了一套个性化的组件&am…...

佛山企业网站建设教程/广告推广方案

挂断原理参考&#xff1a;https://www.ibm.com/developerworks/cn/linux/l-cn-screen/ 要求&#xff0c;python2 常用操作&#xff1a; 创建screen screen -L -S yourname -L 代表在当前目录生成log文件记录屏幕的输出。&#xff08;当在工作目录打开多个screen时&#xff0c;p…...

wordpress阅读排行榜/网站外链发布平台

本文链接: http://blog.csdn.net/xietansheng/article/details/50187069 LibGDX 基础教程&#xff08;总目录&#xff09; 1. 概述 演员&#xff08;Actor&#xff09;是 2D 场景中的基本图节点&#xff08;元素&#xff09;。一个演员实例拥有位置&#xff08;position&…...

怎么做自己的手机网站/网站排名查询

#include <iostream> using namespace std; const int N 1e5, M 31 * N; int son[M][2]; int idx; int a[N]; void Insert(int x) { int p 0; for (int i 30; i > 0; i--)//由高位二进制数进行存储数据&#xff0c;p为根结点同时为空结点 { …...

黑白色调网站/关键词排名查询工具

名人名言昨日翻译“A successful man is one who can lay a firm foundation with the bricks others have thrown at him.” ——David Brinkley成功的人能够把别人扔向他的板砖成为他的根基。——戴维布林克利今日名言“Those who dare to fail miserably can achieve greatl…...