灯塔:CSS笔记(4)

伪类选择器:

1.作用与优势:

        1.作用:根据元素在HTML中的结构关系查找元素

        2.优势:减少对于HTML中类的依赖,有利于保持代码的整洁

        3.场景:常用于查找某父级选择器中的子元素

2.选择器

选择器说明
E:first-child{ }匹配父元素中第一个子元素,并且是E元素
E:last-child{ }匹配父元素中最后一个子元素,并且是E元素
E:nth-child(n){ }匹配父元素中第n个子元素,并且是E元素
E:nth-last-child(n){ }匹配父元素中倒数第n个子元素,并且是E元素

1.n为:0、1、2、3、4、5、6.........

2.通过n可以组成常见公式

功能公式
偶数2n、even
奇数2n+1、2n-1、odd
找到前5个-n+5
找到从第5个往后n+5
<!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>li:nth-child(2n){background-color: pink;}li:first-child{background-color: greenyellow;}</style>
</head>
<body><ul><li>这是第1个li</li><li>这是第2个li</li><li>这是第3个li</li><li>这是第4个li</li><li>这是第5个li</li><li>这是第6个li</li><li>这是第7个li</li><li>这是第8个li</li></ul></body>
</html>

伪元素:

伪元素:一般页面中的非主体内容可以使用伪元素

区别:

1.元素:HTML设置的标签

2.伪元素:由CSS模拟出的标签效果

种类:

伪元素作用
::before在父类元素内容的最前添加一个伪元素
::after在父元素内容的最后面添加一个伪元素

注意点:

1.必须设置content属性才生效

2.伪元素默认是行内元素

<!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>.father{background-color:palevioletred;width: 500px;height: 500px;}.father::before{content: "哎呦😏";color: orange;background-color:palegreen;width: 300px;height: 300px;display: block;}.father::after{content: "😄哈哈哈";color: yellow;background-color: #e9e9e9;width: 90px;height: 90px;display: inline-block;}</style>
</head>
<body><div class="father">哎😔</div>
</body>
</html>

标准流

标准流:又称文档流,是浏览器在渲染显示网页内容时默认采用的一套排版规则,规定了应该以何种方式排列元素

常见的标准流排版规则:

1.块级元素:从上往下,垂直布局,独占一行

2.行内元素 或 行内块元素:从左往右,水平布局,空间不够自动折行

注:浏览器解析行内块或行内标签的时候,如果标签换行书写会产生一个空格的距离 

浮动

float:left;
float:right; 

浮动:

浮动的特点:

1.浮动的元素会脱离标准流(简称:脱标),在标准流中不占位置

(相当于从地面飘到了空中)

2.浮动元素比标准流高出半个级别,可以覆盖标准流中的元素

3.浮动找到浮动,下一个浮动元素会在上一个浮动元素后面左右浮动

4.浮动元素有特殊的显示效果

*一行可以显示多个

*可以设置宽高

注意点:浮动的元素不能通过text-align : center或者margin : 0 auto

浮动标签   顶对齐 如果父级宽度不够 子级自动换行

浮动:在一行排列,宽高生效  浮动后的标签具备行内块的特点

案例:

<!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>.one{width: 100px;height: 100px;background-color: pink;}.two{width: 200px;height: 200px;background-color: skyblue;}.three{width: 300px;height: 300px;background-color:orange;}</style>
</head>
<body><div class="one">one</div><div class="two">two</div><div class="three">three</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>.one{width: 100px;height: 100px;background-color: pink;float: left;}.two{width: 200px;height: 200px;background-color: skyblue;}.three{width: 300px;height: 300px;background-color:orange;}</style>
</head>
<body><div class="one">one</div><div class="two">two</div><div class="three">three</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>.one{width: 100px;height: 100px;background-color: pink;float: left;}.two{width: 200px;height: 200px;background-color: skyblue;float: left;}.three{width: 300px;height: 300px;background-color:orange;}</style>
</head>
<body><div class="one">one</div><div class="two">two</div><div class="three">three</div>
</body>
</html>

CSS书写顺序:(浏览器执行效率更高)

1.浮动/display

2.盒子模型:margin   border   padding   宽高背景色

3.文字样式

清除浮动

含义:清除浮动对其他标签的影响

影响:如果子元素浮动了,此时子元素不能撑开标准流的块级父元素

原因:子元素浮动后脱标→不占位置

目的:需要父元素有高度,从而不影响其他网页元素的布局

清除浮动的方法
①直接设置父元素的高度

特点:

优点:简单粗暴,方便

缺点:有些布局中不能固定父元素高度,如:新闻列表、京东推荐模块

②额外标签法:

操作:

1.在父元素内容的最后添加一个块级元素

2.给添加块级元素设置clear:both

特点:

缺点:会在页面中添加额外标签,会让HTML结构变得更复杂

③单伪元素清除法

操作:用伪元素替代了额外标签

1.基本写法

 .clearfix::after{content: '';display: block;clear: both;}

2.补充写法

 .clearfix::after{content: '';display: block;clear: both;height: 0;visibility: hidden;}

特点:

优点:项目中使用,直接给标签加类即可清除浮动

④双伪元素清除法
.clearfix::before,.clearfix::after{content: '';display: table;}.clearfix::after{clear:both;}

优点:项目中使用,直接给标签加类即可清除浮动

⑤给父元素设置overflow:hidden

操作:直接给父元素设置overflow:hidden

特点:方便

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

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

相关文章

蓝桥杯2023年省A(一波三折的)【买瓜】折半搜索+剪枝+排序

题目&#xff1a;洛谷 P9234 [蓝桥杯 2023 省 A] 买瓜 折半搜索 一开始觉得像dp&#xff0c;试着写了&#xff0c;显然过不了&#xff0c;但我实在觉得搜索也过不了啊&#xff0c;去看题解&#xff0c;发现使用了折半搜索&#xff08;每天都觉得啥都不会捏 折半搜索就是先搜一…

wayland(xdg_wm_base) + egl + opengles 渲染使用纹理贴图的旋转 3D 立方体实例(十三)

文章目录 前言一、使用 stb_image 库加载纹理图片1. 获取 stb_image.h 头文件2. 使用 stb_image.h 中的相关接口加载纹理图片3. 纹理图片——cordeBouee4.jpg二、渲染使用纹理贴图的旋转 3D 立方体1. egl_wayland_texture_cube.c2. Matrix.h 和 Matrix.c3. xdg-shell-client-pr…

日期与时间(Java)

文章目录 日期与时间&#xff08;Java&#xff09;一、JDK8之前的1.1 Date1.2 SimpleDateFormat1.3 Calendar 二、 JDK8之后的2.1 LocalDate、LocalTime和LocalDateTime2.2 ZoneId和ZonedDateTime2.3 Instant2.4 DateTimeFormatter2.4 Period和 Duration &#x1f389;写在最后…

Java项目利用Redisson实现真正生产可用高并发秒杀功能 支持分布式高并发秒杀

Java中的高并发秒杀场景下我们可以使用redisson来实现高并发秒杀功能, 以下就是一个可用于生产环境的高并发秒杀示例代码: pom依赖 <!-- https://mavenlibs.com/maven/dependency/org.redisson/redisson --><dependency><groupId>org.redisson</groupId&…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Web)下篇

onRequestSelected onRequestSelected(callback: () > void) 当Web组件获得焦点时触发该回调。 示例&#xff1a; // xxx.ets import web_webview from ohos.web.webviewEntry Component struct WebComponent {controller: web_webview.WebviewController new web_webv…

Github Copilot 工具,无需账号,一键激活

① 无需账号&#xff0c;100%认证成功&#xff01;0风险&#xff0c;可联网可更新&#xff0c;&#xff0c;支持copilot版本升级&#xff0c;支持chat ② 支持windows、mac、linux系统等设备 ③一号通用&#xff0c;支持所有IDE(AppCode,CLion,DataGrip,GoLand,IntelliJ IDEA …

线程的 run()和 start()有什么区别?调用start()方法时,线程状态的变化是怎么样的?

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 线程的 run()和 start()有什么区别 run()方法 run()方法是Thread类中的一个普通方法,用来定义线程的执行逻辑。当一个类继承自Thread类并且重写了run()方法…

LeetCode题练习与总结:解数独

一、题目 编写一个程序&#xff0c;通过填充空格来解决数独问题。 数独的解法需 遵循如下规则&#xff1a; 数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9 在每一个以粗实线分隔的 3x3 宫内只能出现一次。&#xff08;请参考示例图&#xff09; …

Linux 基础-查看和设置环境变量

一&#xff0c;查看环境变量 在 Linux中&#xff0c;环境变量是一个很重要的概念。环境变量可以由系统、用户、Shell 以及其他程序来设定&#xff0c;其是保存在变量 PATH 中。环境变量是一个可以被赋值的字符串&#xff0c;赋值范围包括数字、文本、文件名、设备以及其他类型…

前端跨平台开发框架:简化多端开发的利器

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

OpenCV系列文章目录(持续更新中......)

引言&#xff1a; OpenCV是一个开源的计算机视觉库&#xff0c;由英特尔公司开发并开源的一组跨平台的C函数和少量的C函数组成&#xff0c;用于实时图像处理、计算机视觉和机器学习等应用领域。OpenCV可以在包括Windows、Linux、macOS等各种操作系统平台上使用&#xff0c;具…

数据结构--七大排序算法(更新ing)

下面算法编写的均是按照由小到大排序版本 选择排序 思想&#xff1a; 每次遍历待排序元素的最大下标&#xff0c;与待排序元素中最后一个元素交换位置&#xff08;此时需要设置一个临时变量来存放下标&#xff09; 时间复杂度--O(n^2) 空间复杂度--O(1) 稳定性--不稳定 代码实…

解析服务器下载速度:上行、下行与带宽之谜

在日常使用中&#xff0c;我们经常会遇到从服务器下载内容速度忽快忽慢的情况&#xff0c;即便服务器的硬件配置如4核CPU、8GB内存和12Mbps的带宽看似足够。为何会出现这种现象&#xff1f;这背后涉及到网络中的上行、下行以及带宽等关键概念。本文旨在揭开这些术语背后的含义&…

用Origin快速拟合荧光寿命、PL Decay (TRPL)数据分析处理

需要准备材料&#xff1a;Origin、PL Decay数据txt文件 首先打开Origin画图软件 导入数据&#xff0c;按照下图箭头操作直接导入 双击你要导入的PL Decay的txt数据文件&#xff0c;然后点OK 继续点OK 数据导入后首先删除最大光子数之前的无效数据&#xff0c;分析的时候用…

计算机设计大赛 题目:基于机器视觉opencv的手势检测 手势识别 算法 - 深度学习 卷积神经网络 opencv python

文章目录 1 简介2 传统机器视觉的手势检测2.1 轮廓检测法2.2 算法结果2.3 整体代码实现2.3.1 算法流程 3 深度学习方法做手势识别3.1 经典的卷积神经网络3.2 YOLO系列3.3 SSD3.4 实现步骤3.4.1 数据集3.4.2 图像预处理3.4.3 构建卷积神经网络结构3.4.4 实验训练过程及结果 3.5 …

html元素基本使用

前言 大家好&#xff0c;我是jiantaoyab&#xff0c;第一次学习前端的html&#xff0c;写一篇笔记总结常用的元素 语义化 例如只要是 不管字体的大小是怎么样&#xff0c;有没有加粗都是标题&#xff0c;元素显示到页面中的效果应该由css决定&#xff0c;这就是语义化。 文…

特殊内齿轮加工的另一种选择

内齿轮加工普遍采用插齿或拉削&#xff0c;但对于一些特殊齿廓的内齿轮来说&#xff0c;插齿可能会有一定的困难&#xff0c;或者成本较高。在这种情况下&#xff0c;线切割加工不失为一种不错的选择。那么什么样的零件需要选择这种加工方式呢&#xff1f;一起来看看&#xff1…

【其他】sd卡的照片在相机上能看到在电脑上却看不到

sd卡的照片在相机上能看到在电脑上却看不到 前情提要&#xff1a;太长不看版解决办法&#xff1a;思路&#xff1a;一、首先考虑恢复数据二、 解决文件后缀是exe的问题 前情提要&#xff1a; 在相机里可以看到照片和视频&#xff0c;但是SD卡通过读卡器插入电脑看不到&#x…

Mr-Robot1靶场练习靶场推荐小白入门练习靶场渗透靶场bp爆破wordpress

下载链接&#xff1a; Mr-Robot: 1 ~ VulnHub 安装&#xff1a; 打开vxbox&#xff0c;菜单栏----管理----导入虚拟电脑 选择下载完的ova文件&#xff0c;并修改想要保存的位置&#xff08;也可以保持默认位置&#xff09; 导入完成后可以根据自己的情况去配置网络链接方式 完成…

数学建模--MATLAB基本使用

1.线性方程组 这个是一个线性方程组&#xff08;属于线性代数的范畴&#xff09;&#xff0c;Axb类型的方程&#xff0c;如果使用MATLAB进行求解&#xff0c;就需要分别表示A矩阵&#xff08;线性方程组未知数前面的系数&#xff09;&#xff0c;b矩阵&#xff08;表示等式右边…