CSS布局基础(传统布局小结)
传统布局小结
- 传统布局方式
- 标准流
- 浮动流
- 定位
- 伪类元素CSS应用对象
- 应用到自身
- 应用到其他元素
传统布局方式
传统布局采用 标准流 + 浮动流 + 定位的方式实现布局效果,也就是通常所说的 DIV + CSS 布局。
标准流
标准流中的元素在 页面默认的 维度,块级元素独占一行;行内元素共享一行,且不能设置宽高;行内块共享一行,可以设置宽高。
常用于 普通排列,即盒子上下排列
浮动流
使用 float 将盒子浮动起来,使块级元素呈现出 行内块的特征。
常用于 水平排列,即盒子水平排列
定位
以上两种布局方式只能实现大范围内的布局,很难处理一些小范围内的精准布局,定位就可以实现精确移动元素。
常用于 自由移动,覆盖在盒子上面的效果,侧边栏,广告等
注意,定位浮动高于 原生的浮动;并且可能出现重叠,此时可以使用 z-index 指定层叠顺序,值越大越靠近屏幕,可以想象为垂直屏幕向外的一个 Z 轴
伪类元素CSS应用对象
应用到自身
伪类元素最常用是给自身加上特定的CSS样式,如下:鼠标悬浮时,将a标签的字体设置为 18px
a:hover{font-size: 18px;
}
应用到其他元素
有时候,需要由 一个 元素的伪类触发 样式应用到另一个元素上,直接在伪类选择器后面 写上 要应用的相对(建立目标元素与伪元素的关联)选择器即可。如下,当鼠标悬浮div标签时,将div后代 id 为 target 的元素的字体设置为 18px
div:hover #target{font-size: 18px;
}
相关文章:
CSS布局基础(传统布局小结)
传统布局小结 传统布局方式标准流浮动流定位伪类元素CSS应用对象应用到自身应用到其他元素 传统布局方式 传统布局采用 标准流 浮动流 定位的方式实现布局效果,也就是通常所说的 DIV CSS 布局。 标准流 标准流中的元素在 页面默认的 维度,块级元素…...
【五一创作】Qt quick基础1(包含基本元素Text Image Rectangle的使用)
Qt quick基础1(包含基本元素Text Image Rectangle的使用) 目录 Qt quick基础1(包含基本元素Text Image Rectangle的使用)前言qt中有直接设计ui的拖拽式的widget,为什么还需要Qtquick?QML语言Qt 版本创建一个Qt quick项…...
LVS+Keepalived 高可用群集部署
一、LVSKeepalived 高可用群集 在这个高度信息化的 IT 时代,企业的生产系统、业务运营、销售和支持,以及日常管理等环节越来越依赖于计算机信息和服务,对高可用(HA)技术的应用需求不断提高,以便提供持续的…...
小黑子—Java从入门到入土过程:第八章
Java零基础入门8.0 Java系列第八章1. 双列集合 Map1.1 Map 集合中常见的API1.2 Map 集合的遍历方式1.2 - I 第一种遍历方式:键找值KeySet 方法1.2 - II 第二种遍历方式:键值对 entrySet 方法1.2 - III 第三种遍历方式:lambda表达式 1.3 HashM…...
innodb_flush_log_at_trx_commit 和 sync_binlog 参数解析
这两个参数和MySQL的一致性以及性能相关,默认配置大多数情况下不是最优的。一般来说,互联网线上系统的配置: innodb_flush_log_at_trx_commit —— 0 sync_binlog —— 1000 一、innodb_flush_log_at_trx_commit 事务提交刷盘时机 如果我…...
hd debug - DAPLink的资料
文章目录 DAPLink的资料概述笔记库迁出的技巧END DAPLink的资料 概述 查资料时, 看到有DAPLink的资料, 记录一下. 笔记 DAPLink项目分为软件和硬件2部分, 不在一个库中. 总览 : https://daplink.io/ 这个页面上说了软件和硬件项目的库地址. 软件库地址 : https://github.…...
Android adb常用50条命令
1. adb devices - 列出所有连接的 Android 设备及模拟器 2. adb shell - 启动 Android 设备或模拟器的 shell 终端 3. adb install - 安装 APK 文件 4. adb uninstall - 卸载 APK 文件 5. adb logcat - 查看日志输出信息,用于调试应用 6. adb push - 将文件推送到 Andro…...
【无人车】无人驾驶地面车辆避障研究(Matlab代码实现)
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…...
Visual Studio高效调试手段与调试技巧总结
目录 1、对0xCCCCCCCC、0xCDCDCDCD和0xFEEEFEEE等常见异常值的辨识度 2、在Debug下遇到报错弹框,点击重试,查看函数调用堆栈...
Day37 Map集合
Map集合 Map集合是接口,interface Map <K , V> K:键的类型; V:值的类型 将键映射到值得对象;不能包含重复的键;每个键可以映射到最多一个值。例如:001 令狐冲 ; 002 岳不群 ; …...
是人就能学会的Spring源码教学-Spring的简单使用
是人就能学会的Spring源码教学-Spring的简单使用 Spring的最简单入门使用第一步 创建项目第二步 配置项目第三步 启动项目 Spring的最简单入门使用 各位道友且跟我一道来学习Spring的最简单的入门使用,为了方便和简单,我使用了Spring Boot项目ÿ…...
NOC大赛·核桃编程马拉松赛道知识点大纲(高年级及初中组)
NOC核桃编程马拉松知识点大纲(高年级及初中组) (一)基础语法 1.掌握运动积木的用法。 包括“移动 10 步”、“左/右转 X 度”、“面向 X 方向/鼠标指针/ 角色”、“移到 XY 坐标/鼠标/角色”、“X/Y 坐标的设定和增加”、 “滑行到 XY/鼠标/角色”等积木用法,详细如下。 1…...
第二十六章 Unity碰撞体Collision(上)
在游戏世界中,游戏物体之间的交互都是通过“碰撞接触”来进行交互的。例如,攻击怪物则是主角与怪物的碰撞,触发机关则是主角与机关的碰撞。在DirectX课程中,我们也大致介绍过有关碰撞检测的内容。游戏世界中的3D模型的形状是非常复…...
Qt Installer Framework使用教程:
步骤一: 下载并安装Qt Installer Framework工具 http://download.qt.io/official_releases/qt-installer-framework/ 将安装目录添加到环境变量,如安装D盘时D:\Qt\QtIFW-4.5.0\bin 步骤二: 将测试例子(如D:\Qt\QtIFW-4.5.0\…...
nodejs+vue+java农村信息化服务平台
用户的登录模块:用户登录本系统,对个人的信息等进行查询,操作可使用的功能。 用户注册模块:游客用户可以进行用户注册,系统会反馈是否注册成功。 添加管理员模块:向本系统中添加更多的管理人员,…...
代码随想录补打卡 62不同路径 63 不同路径2
代码如下 func uniquePaths(m int, n int) int { dp : make([][]int,m) //定义一个二维数组 for i : 0 ; i < m ; i { //遍历这个二维数组的每个元素,并将每个元素都定义为一个一维数组 dp[i] make([]int,n) //这样就生成了图中的一个二维网格 dp[i][0] …...
树的存储和遍历
文章目录 6.5 树与森林6.5.1 树的存储结构1. 双亲表示法(顺序存储结构)2 孩子链表表示法3 孩子兄弟表示法(二叉树表示法) 6.5.2 森林与二叉树的转换1 树转换成二叉树2 二叉树转换成树3 森林转换成二叉树4 二叉树转换成森林 6.5.3 树和森林的遍历1. 树的遍历2. 森林的遍历 6.6 赫…...
MySQL的ID用完了,怎么办?
目 录 一 首先首先分情况 二 自增ID 1 mysql 数据库创建一个自增键的表 2 导出表结构 3 重新创建 自增键是4294967295的表 4 查看表结构 5 异常测试 三 填充主键 1 首先创建一个test 表,主键不自增 2 插入主键最大值 3 再次插入主键最大值1 四 没有声明…...
JSP基于Iptables图形管理工具的设计与实现(源代码+论文)
Netfilter/Iptables防火墙是Linux平台下的包过滤防火墙,Iptables防火墙不仅提供了强大的数据包过滤能力,而且还提供转发,NAT映射等功能,是个人及企业级Linux用户构建网络安全平台的首选工具。但是,由于种种原因&#x…...
什么是数据库分片?
什么是数据库分片? 数据库分片是指将一个大型数据库拆分成多个小型数据库,每个小型数据库称为一个分片。通过这种方式,可以将数据库的负载分散到多个服务器上,从而提高数据库的性能和可伸缩性。 为什么需要数据库分片?…...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子,用于处理异步操作(如数据加载)中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误:捕获在 loader 或 action 中发生的异步错误替…...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎(Physics Engine) 物理引擎 是一种通过计算机模拟物理规律(如力学、碰撞、重力、流体动力学等)的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互,广泛应用于 游戏开发、动画制作、虚…...
汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下,虚拟教学实训宛如一颗璀璨的新星,正发挥着不可或缺且日益凸显的关键作用,源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例,汽车生产线上各类…...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练
前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1):从基础到实战的深度解析-CSDN博客,但实际面试中,企业更关注候选人对复杂场景的应对能力(如多设备并发扫描、低功耗与高发现率的平衡)和前沿技术的…...
【磁盘】每天掌握一个Linux命令 - iostat
目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat(I/O Statistics)是Linux系统下用于监视系统输入输出设备和CPU使…...
04-初识css
一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...
【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)
要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况,可以通过以下几种方式模拟或触发: 1. 增加CPU负载 运行大量计算密集型任务,例如: 使用多线程循环执行复杂计算(如数学运算、加密解密等)。运行图…...
Linux --进程控制
本文从以下五个方面来初步认识进程控制: 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程,创建出来的进程就是子进程,原来的进程为父进程。…...
【JVM面试篇】高频八股汇总——类加载和类加载器
目录 1. 讲一下类加载过程? 2. Java创建对象的过程? 3. 对象的生命周期? 4. 类加载器有哪些? 5. 双亲委派模型的作用(好处)? 6. 讲一下类的加载和双亲委派原则? 7. 双亲委派模…...
