CSS补充(下),弹性布局(上)

news/2024/4/12 17:29:21/文章来源:https://blog.csdn.net/Luo3255069063/article/details/136571088

高级选择器

1.兄弟选择器

2.同时满足

	div.bg{background-color: red;}p.bg{background-color: green;}spam.bg{background-color: blue;}

:选择器中间没有空格,有明确标识的选择器写在后面

3.各种伪类的应用

3.1作为第几个子元素

选择器:nth-child(n){

}
作为第n个子元素,切选择器能匹配到

        span:nth-child(1){background-color: red;}

在这里插入图片描述
在这里插入图片描述
选择器:first-child/选择器:last-child
作为第一个/最后一个子元素且选择器能匹配到的元素
选择器:only-child
作为唯一一个子元素且选择器能匹配到元素

4.内容相关

4.1 空标签

选择器:empty{}
没有任何内容(空格都不行),且选择器能匹配到的元素
在这里插入图片描述

4.2 筛选子元素的选择器

选择器a:has(选择器b)
匹配元素满足两个条件:
(1)能被选择器匹配到
(2)后代元素能被选择器b匹配到

5.属性相关

选择器[属性=属性值]
匹配元素满足两个条件:
(1)能被选择器匹配到
(2)属性=属性值
选择器[属性值]
匹配元素满足两个条件
(1)能被选择器匹配到
(2)具有属性

        input[type="text"]{width: 200px;height: 50px;}input[checked]{width: 200px;height: 50px;}

弹性布局

display: flex 开启弹性布局区
注:受影响的是子元素
子元素都默认向左浮动,且完成了清除浮动
开启弹性布局后,给父元素设置的属性

1.主轴排列方式

flex-direcrion:
默认值: row 从左向右排列
在这里插入图片描述
可选值:
row-reverse 从右向左排列
column 从上向下排列
column-reverse 从下向上排列

2.主轴上子元素的分布方式

justify-content
默认值: flex-start 主轴开始方向对齐
在这里插入图片描述

案例中从左向右排列,默认就是左对齐
可选值:== flex-end 主轴结束方向对齐==
在这里插入图片描述

案例中从左向右排列,此值就是右对齐
注:不会改变排列方向
center 主轴居中
在这里插入图片描述
案例中从左向右排列,此值就是右对齐
space-between 主轴两端对齐
在这里插入图片描述
注:如果子元素在父元素中左右不留空隙,就是两端对齐
space-evenly 间距平均分布
在这里插入图片描述
注:如果子元素在父元素中左右有空隙,每个间距都相等,就是间距平均分布。
space-around 外边距平均分布
在这里插入图片描述
注:如果子元素在父元素中左右有空隙,子元素到父元素边框的距离和子元素之间的距离不等。

3.在主轴(flex-direction)上确定后,与主轴垂直方向就是交叉轴

当从左向右或者从右向左排列时,主轴就是水平方向,则交叉轴就是竖直方向。
当从左向右或者从上向下排列时,主轴就是竖直方向,则交叉轴就是水平方向。
子元素在交叉轴上的对齐方式:
注:想要这个属性看到效果,则父元素在交叉轴方向的长度要大于系元素。
align-items:
默认值: flex-start
开始方向对齐(水平就是左对齐,竖直就是顶对齐)
在这里插入图片描述
可选值:flex-end
交叉轴结束方向对齐
在这里插入图片描述
center 交叉轴居中
在这里插入图片描述

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

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

相关文章

LeetCode 2917.找出数组中的 K-or 值:基础位运算

【LetMeFly】2917.找出数组中的 K-or 值:基础位运算 力扣题目链接:https://leetcode.cn/problems/find-the-k-or-of-an-array/ 给你一个下标从 0 开始的整数数组 nums 和一个整数 k 。 nums 中的 K-or 是一个满足以下条件的非负整数: 只有…

SPSS直接输出三线表

STEP1 下载三线表.stt至安装目录的Looks文件夹 STEP2 在SPSS菜单栏中找到 编辑-选项-透视表 表外观下拉到最底,选择三线表(如果第一步没保存对是不会出现的),然后点击确定 效果:

k8s 网络概念与策略控制

一、Kubernetes 基本网络模型 Kubernetes 的容器网络模型可以把它归结为约法三章和四大目标。 1、约法三章 约法三章确保了Kubernetes容器网络模型的基本特性: ① 任意两个 pod 之间可以直接通信:在Kubernetes中,每个 Pod 都被分配了一个…

【比较mybatis、lazy、sqltoy、mybatis-flex、easy-query操作数据】操作批量新增、分页查询(三)

orm框架使用性能比较 比较mybatis、lazy、sqltoy、mybatis-flex、easy-query操作数据 环境: idea jdk17 spring boot 3.0.7 mysql 8.0测试条件常规对象 orm 框架是否支持xml是否支持 Lambda对比版本mybatis☑️☑️3.5.4sqltoy☑️☑️5.2.98lazy✖️☑️1.2.4…

cocos creator 3.7.2使用shader实现图片扫光特效

简介 功能:图片实现扫光效果 引擎:cocos Creator 3.7.2 开发语言:ts 完整版链接 链接https://lengmo714.top/284d90f4.html 效果图 shader代码 // Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd. CCEffect %{techniques:- pas…

探索数据结构:单链表的实战指南

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ 🎈🎈养成好习惯,先赞后看哦~🎈🎈 所属专栏:数据结构与算法 贝蒂的主页:Betty‘s blog 前言 在上一章节中我们讲解了数据结构中的顺序表,知道了顺序…

腾讯云服务器运行yum检测超级慢问题

公司使用腾讯云服务器。最近买的几台服务器使用yum命令安装或 更新软件特别慢。如下图: 从图中看出网络速度极慢。 大约要等5-10分钟检测和更新配置完毕,进入到软件下载界面下载软件速度就快了。 琢磨了一下,连接慢并不是连接不上。查看yum…

【工具】Raycast – Mac提效工具

引入 以前看到同事们锁屏的时候,不知按了什么键,直接调出这个框,然后输入lock屏幕就锁了。 跟我习惯的按Mac开机键不大一样。个人觉得还是蛮炫酷的~ 调研 但是由于之前比较繁忙,这件事其实都忘的差不多了&#xff0…

便捷在线导入:完整Axure元件库集合,让你的设计更高效!

Axure元件库包含基本的工具组件,可以使原型绘制节省大量的重复工作,保持整个设计页面的一致性和标准化,同时显得专业。Axure元件库就像我们日常生活中的门把手、自行车踏板和桌子上的螺丝钉,需要组装才能使用。作为一名成熟的产品…

Jmeter接口测试之常用断言

在接口测试中,我们需要检查请求处理结果是否正确。当请求的响应状态码为200,是否表时接口功能正常呢?显然是不正确的。 响应状态为200,只能表明服务处理了你的请求,同时进行了结果返回;但并不能代表处理的…

Redis常用指令,jedis与持久化

1.redis常用指令 第一个是key的常用指令,第二个是数据库的常用指令 前面的那些指令都是针对某一个数据类型操作的,现在的都是对所有的操作的 1.key常用指令 key应该设计哪些操作 key是一个字符串,通过key获取redis中保存的数据 对于key…

数字人ai直播软件突破AI大模型技术,改变未来科技格局!

数字人AI直播软件在AI大模型技术上的突破,将不可避免地改变未来科技格局。这一突破让人们看到了AI技术的无限可能性,并为未来的科技发展打开了新的大门。 AI大模型技术是近年来人工智能领域的一个热点,它通过构建庞大、复杂的神经网络模型&a…

99.qt qml-单例程序实现

在之前讲过: 58.qt quick-qml系统托盘实现https://nuoqian.blog.csdn.net/article/details/121855993 由于,该示例只是简单讲解了系统托盘实现,并没有实现单例程序,所以多次打开后就会出现多个exe出现的可能,本章出一章QML单例程序实现, 多次打开始终只显示出第一个打开…

Docker-完整项目的部署(保姆级教学)

目录 1 手动部署(白雪版) 1.1 创建网络 1.2 MySQL的部署 1.2.1 准备 1.2.2 部署 1.3 Java项目的部署 1.3.1 准备 1.3.1.1 将Java项目打成jar包 1.3.1.2 编写Dockerfile文件 1.3.2 部署 1.3.2.1 将jar包、Dockerfile文件放在linux同一个文件夹下 1.3.2.2 构建镜像 …

BUUCTF-DASBOOK1

[第一章][1.3.5 案例解析][极客大挑战 2019]Http 1 1.启动靶机 2.查看源代码,发现有链接 3.点击链接,跳转页面有提示,意思是:它并不来自于https:/Sycsecret.buuoj.cn 打开hackbar,如图所示,然后执行 4.得到…

docker搭建dashdot

Dashdot 是一个指标收集工具,用于报告 Kubernetes 集群中的资源使用情况。假设你想要使用 Docker 来搭建 Dashdot,你需要制作或获取一个 Dashdot 的 Docker 镜像,然后可以通过 Docker CLI 命令或者使用 Docker Compose 来配置和运行这个容器。…

TCP包头

TCP包头: 1.序号:发送端发送数据包的编号 2.确认号:已经确认接收到的数据的编号(只有当ACK为1时,确认号才有用) TCP为什么安全可靠: 1.在通信前建立三次握手连接 SYN SYNACK ACK SYN是TCP包头的一个字段 tcp.port 端口号 抓包数据 2.在通信过程中通过序…

数据结构八大算法详解

一、直接插入排序 直接插入排序的核心思想就是:将数组中的所有元素依次跟前面已经排好的元素相比较,如果选择的元素比已排序的元素小,则交换,直到全部元素都比较过。 因此,从上面的描述中我们可以发现,直接…

奖励建模(Reward Modeling)实现人类对智能体的反馈

奖励建模(Reward Modeling)是强化学习中的一个重要概念和技术,它主要用于训练智能体(如AI机器人或大型语言模型)如何更有效地学习和遵循人类期望的行为。在强化学习环境中,智能体通过尝试不同的行为获得环境…

【外汇天眼】外汇投资策略:区间突破交易系统

RangeBreak系统介绍 RangeBreak区间突破交易系统被市场广泛用于日内交易,曾经连续多年在《美国期货杂志》盈利交易系统排行榜中位居前十。 目前该交易系统也仍旧被很多专业机构和个人投资者所推崇。 交易者可根据自己的交易习惯和性格特点进行改进,并不…