CSS-2

结构伪类选择器

作用：根据元素的结构关系查找元素

本例中以 p 标签

查找第一个 p 标签元素

p:first-child{background-color:red;
}

查找最后一个 p 标签元素

p:last-child{background-color:green;
}

查找第 666 个 p 标签元素

p:nth-child(666){background-color:blue;
}

查找 “偶数” 个 p 标签元素

/* n从0开始 */
p:nth-child(2n){background-color:blue;
}

查找 “奇数” 个 p 标签元素

/* n从0开始 */
p:nth-child(2n+1){background-color:blue;
}

查找 " ? 倍数" 的所有 p 标签元素

/* 找到5的倍数的 p 标签，n从0开始 */
p:nth-child(5n){background-color:blue;
}

查找 "第 ? 个以后"的 p 标签元素

/* 找到第5个元素之后的 p 标签 */
p:nth-child(5+n){background-color:blue;
}

查找 "第 ? 个之前"的 p 标签元素

/* 找到第5个元素之前的 p 标签 */
p:nth-child(5-n){background-color:blue;
}

伪元素选择器

  • 注意：必须设置 “content” 属性，用来设置伪元素的内容，如果没有内容，则引号留空即可
  • 伪元素默认是 “行内” 显示模式
  • 权重和标签选择器相同
    div {width: 300px;height: 300px;background-color: pink;}div::before{content:"老鼠";w100}div::after{content:"大米";}<div>爱</div>最终显示结果为："粉红色"的框里面，写着"老师爱大米"

盒子模型

重要组成部分

  • 内容区域：width & height
  • 内边距：padding（出现在内容与盒子边缘之间）
  • 边框线：border
  • 外边距：margin（出现在盒子外面）
div{width: 200px;height: 200px;background-color: pink;/* 内容与盒子边缘之间 */padding: 20px;/* 盒子边框 */border: 1px solid #000;/* 出现在盒子外面，拉开两个盒子之间的间距 */margin: 50px;
}

边框线

实线
border: 1px solid #000;
虚线
border: 2px dashed #000;
点线
border: 3px dotted #000;
单方向框线
border-top: 	1px solid #000;  	/* 上边框线 */
border-right: 	1px solid #000;  	/* 上边框线 */
border-bottom: 	1px solid #000;  	/* 上边框线 */
border-left: 	1px solid #000;  	/* 上边框线 */

内边距

单方向
padding-top:	20px;
padding-right:	20px;
padding-bottom:	20px;
padding-left:	20px;
多值写法
padding: 10px 20px 30px 40px;	/* 上  右  下  左*/
padding: 10px 40px 80px;		/* 上   左右  下 */
padding: 10px 80px;				/*  上下  左右  */记忆方法：从"上"开始顺时针转一圈，如果当前方向没有数值，取值跟对面一样（对面的意思是：下对上，左对右）

尺寸计算

  • 默认情况下：盒子尺寸 = 内容尺寸 + 内边距尺寸 + border尺寸
  • 因此，在这种情况下，加 padding 和 border 会撑大盒子
div{width: 200px;height: 200px;background-color: pink;padding: 30px;border: 3px solid #000;/* 内减模式：不需要手动做减法，加 padding 和 border 也不会撑大盒子了 */box-sizing: border-box;
}

外边距

一、外边距的"单方向"控制，以及多值写法，都是和 padding 一样的
二、外边距不会撑大盒子举例：
a.外边距单方向控制:margin-top: 20px;margin-right: 20px;margin-bottom: 20px;margin-left: 20px;b.多值写法:margin: 10px 20px 30px 40px;	/* 上  右  下  左*/margin: 10px 40px 80px;			/* 上   左右  下 */margin: 10px 80px;				/*  上下  左右  */
记忆方法：从"上"开始顺时针转一圈，如果当前方向没有数值，取值跟对面一样（对面的意思是：下对上，左对右）

版心居中

/* 外边距的应用举例：版心居中 */div{width: 75%;height: 200px;background-color: pink;/* ------------------------ */box-sizing: border-box;/* ------------------------ */padding: 20px;border: 1px solid #000;/* 网页"版心居中"效果：margin: 0 auto;  *//* "版心居中"效果的前提：有 width 属性 */margin: 0 auto;
}

圆角效果

圆角知识点
div {width: 200px;height: 200px;background-color: pink;/* -------圆角效果------- */border-radius: 20px;	/* 20px指的是圆的半径 */
}

border-radius: 20px;				/* 四个角都是一样 */
border-radius: 20px 30px;			/* 左上+右下       右上+左下 */
border-radius: 10px 20px 30px;		/* 左上   右上+左下   右下 */
border-radius: 10px 20px 30px 40px;  /* 左上   右上   右下   左下 */记忆方法：从左上角顺时针开始赋值，没有取值的角与对角取值相同
正圆形状
应用场景：头像
实现原理：给正方形盒子设置圆角属性值为"50%"img {width: 200px;height: 200px;/*  */border-radius: 50%;}
胶囊形状
应用场景：按钮
实现原理：给长方形盒子设置圆角属性值为"盒子高度的一半"div {width: 200px;height: 80px;background-color: orange;/* ------------ */border-radius: 40px;}
阴影效果
属性名：box-shadow
属性值：X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影
注意事项：1. X轴偏移量 Y轴偏移量 必须书写2. 默认是外阴影，内阴影需要添加 inset (不常用)div {width: 200px;height: 80px;background-color: orange;margin: 0 auto;/* ------------ */box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.5);  默认是外阴影！/* box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.5) inset; */  内阴影不常用！}

元素溢出

作用：控制溢出元素的内容的显示方式

div {width: 200px;height: 200px;background-color: pink;overflow: hidden;   /* 溢出的内容，隐藏起来 */overflow: scroll;   /* 溢出的内容，通过滚动条显示，如果不溢出，也显示滚动条 */overflow: auto;   /* 溢出的内容，通过滚动条显示，如果不溢出，就不显示滚动条 */
}

外边距的问题

吞并现象

场景：垂直排列的兄弟元素，上下 margin 会相加吗？
现象：上下两个 margin 不会相加，两个 margin 中的较大值生效
结论：因此，在写 margin 时候，如果遇到了"垂直排列的兄弟元素"，设置其中一个 margin 即可

塌陷问题

场景：父子级的标签，子级添加"上外边距（margin-top）"会产生塌陷问题
现象：导致父级一起向下移动解决方法：1. 直接取消子级的 margon-top，使用父级的 padding					(推荐)2. 不取消子级的 margon-top，但是父级必须设置 overflow: hidden;	    (推荐)3. 不取消子级的 margon-top，但是父级必须设置 border-top;

行内元素的问题

场景：行内元素添加 margin 和 padding，无法改变元素垂直位置
解决办法：给行内元素添加 line-height 可以改变垂直位置

span {margin: 50px;padding: 20px;/* 添加下面一行代码，直接解决问题 */line-height: 100px;
}

清除默认样式

/* 常用的"清除默认样式"的方法 */
* {margin: 0;padding: 0;box-sizing: border-box;  /* 此句子的作用是，防止盒子被撑大，可根据实际情况，选择加与不加*/
}/* 去除列表的项目符号 */
li {list-style: none;
}/* 清除 a 标签的下划线 */
a {text-decoration: none;
}

浮动

作用：让"块元素"水平排列
特点：顶端对齐，具备"行内块"显示模式的特点属性名：float
属性值：1. left		左对齐2. right	右对齐代码演示：
.one {width: 100px;height: 100px;background-color: brown;float: left;}.two {width: 200px;height: 200px;background-color: orange;float: left;
}

清除浮动带来的影响

浮动带来的影响：父级里面的子级元素设置为浮动，如果此时父级元素没有高度，子级无法撑开父级元素的高度，可能会导致页面布局错乱！

方法一：额外标签法（了解）

  • 在父级元素内容的最后添加一个块级元素，设置CSS属性"clear: both"
.clearfix {clear: both;}<div class="clearfix"></div>

方法二：单伪元素法（方法二与方法一的原理是相同的）

  • 在父级标签中，添加 class=“clearfix” 即可
.clearfix::after {content: "";display: block;clear: both;
}

方法三：双伪元素法【推荐】

  • 在父级标签中，添加 class=“clearfix” 即可
.clearfix::before,
.clearfix::after {content: "";display: table;
}.clearfix::after {clear: both;
}

补充说明：

  1. before 是用来解决"外边距塌陷问题"
  2. after 是用来清除浮动带来的影响

方法四：overflow

  • 父级元素添加 CSS 属性 “overflow: hidden”

Flex 布局

认识 Flex 布局

Flex 布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。 Flex 模型不会产生浮动布局中脱标的现，布局网页更简单、更灵活。

设置方式：给父级元素设置 display: flex，子元素可以自动挤压或拉伸
组成部分

  • 弹性容器（设置 display: flex 的父级元素）
  • 弹性盒子（弹性容器里面的子级盒子）
  • 主轴：默认在水平方向
  • 侧轴/交叉轴：默认在垂直方向

主轴对齐方式

属性名：justify-content

属性值效果
flex-start默认值，弹性盒子从起点开始依次排列
flex-end弹性盒子从终点开始依次排列
center弹性盒子沿主轴居中排列
space-between弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

侧轴对齐方式

属性名：

  • align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）

  • aligh-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性容器设置）

属性值效果
stretch弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸）
center弹性盒子沿侧轴居中排列
flex-start弹性盒子从起点开始依次排列
flex-end弹性盒子从终点开始依次排列
.box {display: flex;align-items: center;  /* 所有的盒子沿着侧轴居中 */
}.box div:nth-child(2) {align-self: center;  /* 某个盒子沿着侧轴居中 */
}

修改主轴方向

  • 将主轴的方向，由原来的水平修改为垂直；侧轴自动变换到水平方向
.box {display: flex;/* ------------ */flex-direction: column;  /* 修改主轴方向 */
}img {width: 150px;height: 32px;
}<div class="box"><img src="./images/img0" alt=""><span>媒体</span>
</div>

弹性伸缩比

作用：控制弹性盒子的主轴方向的尺寸属性名：flex
属性值：整数数字，表示占用父级剩余尺寸的份数flex: 1;  /* 表示占用父级剩余空间的一份 */

弹性盒子换行

弹性盒子可以自动挤压或压缩，默认情况下，所有弹性盒子都在一行显示属性名：flex-wrap
属性值：wrap:		换行nowrap:		不换行（默认）

行对齐方式

属性名：align-content

属性值效果
flex-start默认值，弹性盒子从起点开始依次排列
flex-end弹性盒子从终点开始依次排列
center弹性盒子沿主轴居中排列
space-between弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

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

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

相关文章

【Linux20.04-qt5.12.4软件安装与初步使用-qt在Linux使用-记录-笔记】

【Linux20.04-qt5.12.4软件安装与初步使用-qt在Linux使用-记录-笔记】

【Linux-qt软件安装与初步使用-qt在Linux使用-记录-笔记】 1、概述2、环境说明3、步骤总结1、了解并选择自己想要安装的版本2、访问 Qt 官方网站3、在 Qt 网站上找到下载部分&#xff08;自己想下载&#xff09;4、下载完成后&#xff0c;给安装程序文件赋予执行权限。5、自动配…
阅读更多...
PTA 7-238 整数转换为字符串

PTA 7-238 整数转换为字符串

将一个整数n转换成字符串。例如&#xff1b;输入483&#xff0c;应得到字符串"483"。其中&#xff0c;要求用一个递归函数实现把一个正整数转换为字符串。 输入格式: 首先输入测试组数T&#xff0c;然后输入T组测试数据。每组测试数据输入一个整数n(−231≤n≤231−…
阅读更多...
关于svn如何上传一个完整的项目

关于svn如何上传一个完整的项目

注意&#xff1a;请一定要按照该步骤进行操作&#xff0c;请上传新项目时将项目名称进行规范命名 例如原始文件是arrange_v2 将此项目需要注入新的医院 则命名为 arrange_某医院名称_门诊或者医技或者药房_v2 重新命名文件夹名称快捷键 &#xff08;F12&#xff09; 一 &…
阅读更多...
详解卷积神经网络（Convolutional Neural Networks, CNNs）

详解卷积神经网络（Convolutional Neural Networks, CNNs）

全连接神经网络基础 全连接神经网络&#xff08;Fully Connected Neural Network 或 Multi-Layer Perceptron, MLP&#xff09;是最简单的深度学习模型之一。一个典型的全连接网络由多个层组成&#xff0c;每一层包含多个神经元或节点。每个神经元与上一层的所有神经元相连&am…
阅读更多...
论文阅读[2022sigcomm]GSO-Simulcast Global Stream Orchestration in Simulcast Video

论文阅读[2022sigcomm]GSO-Simulcast Global Stream Orchestration in Simulcast Video

GSO-Simulcast Global Stream Orchestration in Simulcast Video 作者&#xff1a; 1 背景 1视频会议成为全球数十亿人远程协作、学习和个人互动的核心&#xff0c;这些不断增长的虚拟连接需求推动视频会议服务的蓬勃发展 2当前用户越来越希望在低延迟下看到更高质量的视频…
阅读更多...
Milvus 再上新！支持 Upsert、Kafka Connector、集成 Airbyte，助力高效数据流处理

Milvus 再上新！支持 Upsert、Kafka Connector、集成 Airbyte，助力高效数据流处理

Milvus 已支持 Upsert、 Kafka Connector、Airbyte&#xff01; 在上周的文章中《登陆 Azure、发布新版本……Zilliz 昨夜今晨发生了什么&#xff1f;》&#xff0c;我们已经透露过 Milvus&#xff08;Zilliz Cloud&#xff09;为提高数据流处理效率&#xff0c; 先后支持了 Up…
阅读更多...
C语言碎片知识

C语言碎片知识

sizeof 1.sizeof是C语言中的一个操作符&#xff0c;同时也是关键字&#xff01;&#xff01;&#xff01;&#xff01; 2.sizeof的操作数可以是类型&#xff0c;变量或表达式 如图&#xff0c;第一个为什么是6&#xff1f;&#xff0c;因为先计算了3的大小&#xff0c;占4个字…
阅读更多...
GAN：SNGAN-谱归一化GANs

GAN：SNGAN-谱归一化GANs

论文&#xff1a;https://arxiv.org/pdf/1802.05957.pdf 代码&#xff1a;GitHub - pfnet-research/sngan_projection: GANs with spectral normalization and projection discriminator 发表&#xff1a;2018 ICLR 摘要 GANs的主要挑战是&#xff1a;训练的稳定性。本文作…
阅读更多...
java 之 继承与多态的详细介绍

java 之 继承与多态的详细介绍

文章目录 类的继承1. 基本语法2. 继承的特点3. 方法的重写&#xff08;方法的覆盖&#xff09;super 关键字1. 调用父类的构造器2. 访问父类的成员变量3. 调用父类的方法4. 在构造器中调用父类方法封装性以及访问修饰符抽象方法1. 声明抽象类2. 抽象方法3. 继承抽象类4. 抽象类…
阅读更多...
[传智杯 #4 初赛] 时效「月岩笠的诅咒」

[传智杯 #4 初赛] 时效「月岩笠的诅咒」

题目背景 蓬莱之药&#xff0c;被诅咒的不死之药。 奉命将蓬莱之药投入富士山中销毁的月岩笠&#xff0c;最终打算把蓬莱之药改投入八岳销毁。在下山途中妹红将其踹下山&#xff0c;抢到了蓬莱之药。 那已经是千年前的事情了。 题目描述 时间节点上发生过的两件事情的时间…
阅读更多...
智能指针及强相关知识经验总结 --- 移动语义、引用计数、循环引用、move()、自定义删除器等

智能指针及强相关知识经验总结 --- 移动语义、引用计数、循环引用、move()、自定义删除器等

目录 前言 一、shared_ptr 1. 基本用法和构造方法 2. 引用计数机制 3. weak_ptr 解决循环引用 二、unique_ptr 1. 基本用法和构造方法 2. 独占性 3. 所有权转移 1&#xff09;unique_ptr :: release() 2&#xff09;移动语义 和 move() 三、 对比 shared_ptr 和 un…
阅读更多...
springboot项目无法写文件解决

springboot项目无法写文件解决

报错信息 2023-12-04 15:19:30.382 INFO 3438235 --- [nio-9012-exec-1] c.i.cms.ueditor.upload.StorageManager : 保存文件&#xff1a;tmp:/tmp/30057024569865885 path:/home/wwwroot/cms/uploads/20231204/1701674370376033698.jpg java.nio.file.AccessDeniedException:…
阅读更多...
Linux中项目部署步骤

Linux中项目部署步骤

安装jdk&#xff0c;tomcat 安装步骤 1&#xff0c;将压缩包&#xff0c;拷贝到虚拟机中。 通过工具&#xff0c;将文件直接拖到虚拟机的/home下 2&#xff0c;回到虚拟机中&#xff0c;查看/home下&#xff0c;有两个压缩文件 3&#xff0c;给压缩文件做解压缩操作 tar -z…
阅读更多...
谷歌的最新人工智能实验，让你能够创造出受各种乐器启发的音乐

谷歌的最新人工智能实验，让你能够创造出受各种乐器启发的音乐

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
karate - 简易说明

karate - 简易说明

Karate 导包 <dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.12</version><scope>test</scope></dependency><dependency><groupId>org.projectlombok</groupId…
阅读更多...
Hive数据倾斜之：数据类型不一致导致的笛卡尔积

Hive数据倾斜之：数据类型不一致导致的笛卡尔积

Hive数据倾斜之&#xff1a;数据类型不一致导致的笛卡尔积 目录 Hive数据倾斜之&#xff1a;数据类型不一致导致的笛卡尔积一、问题描述二、原因分析三、精度损失四、问题解决 一、问题描述 如果两张表的jion&#xff0c;关联键分布较均匀&#xff0c;没有明显的热点问题&…
阅读更多...
掌握 Go 语言中的循环结构：从基础到高级

掌握 Go 语言中的循环结构：从基础到高级

一、if else(分支结构) 1、if 条件判断基本写法 package main import ("fmt" ) func main() {score : 65if score > 90 {fmt.Println("A")} else if score > 75 {fmt.Println("B")} else {fmt.Println("C")} } 2、if 条件判断…
阅读更多...
内网环境安装K8S1.20.11版本集群

内网环境安装K8S1.20.11版本集群

目录 第一章.实验要求和环境 1.1.实验要求 1.2.实验环境 1.3.依赖关系处理 第二章.K8S的安装过程 2.1.初始化到集群安装成功 ------------------------------ 环境准备 ------------------------------ docker安装好了后 2.2.安装K8组件 -------------------- 部署K8…
阅读更多...
1-Hadoop原理与技术

1-Hadoop原理与技术

单选题 题目1&#xff1a;安装Hadoop集群时&#xff0c;是在哪个文件指定哪些机器作为集群的从机&#xff1f; 选项: A datanode B slaves C yarn-site.xml D core-site.xml 答案&#xff1a;B ------------------------------ 题目2&#xff1a;Hadoop配置文件所在目录是哪…
阅读更多...
计算机基础知识64

计算机基础知识64

ForeignKey属性 to&#xff1a;设置要关联的表 related_name&#xff1a; 反向操作时&#xff0c;使用的字段名&#xff0c;用于代替原反向查询时的’表名_set’ related_query_name:反向查询操作时&#xff0c;使用的连接前缀&#xff0c;用于替换表名 to_field:设置要关联的表…
阅读更多...
最新文章

Copyright @ 2022~2023