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

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集合是接口&#xff0c;interface Map <K , V> K:键的类型&#xff1b; V&#xff1a;值的类型 将键映射到值得对象&#xff1b;不能包含重复的键&#xff1b;每个键可以映射到最多一个值。例如&#xff1a;001 令狐冲 &#xff1b; 002 岳不群 &#xff1b; …...

是人就能学会的Spring源码教学-Spring的简单使用

是人就能学会的Spring源码教学-Spring的简单使用 Spring的最简单入门使用第一步 创建项目第二步 配置项目第三步 启动项目 Spring的最简单入门使用 各位道友且跟我一道来学习Spring的最简单的入门使用&#xff0c;为了方便和简单&#xff0c;我使用了Spring Boot项目&#xff…...

NOC大赛·核桃编程马拉松赛道知识点大纲(高年级及初中组)

NOC核桃编程马拉松知识点大纲(高年级及初中组) (一)基础语法 1.掌握运动积木的用法。 包括“移动 10 步”、“左/右转 X 度”、“面向 X 方向/鼠标指针/ 角色”、“移到 XY 坐标/鼠标/角色”、“X/Y 坐标的设定和增加”、 “滑行到 XY/鼠标/角色”等积木用法,详细如下。 1…...

第二十六章 Unity碰撞体Collision(上)

在游戏世界中&#xff0c;游戏物体之间的交互都是通过“碰撞接触”来进行交互的。例如&#xff0c;攻击怪物则是主角与怪物的碰撞&#xff0c;触发机关则是主角与机关的碰撞。在DirectX课程中&#xff0c;我们也大致介绍过有关碰撞检测的内容。游戏世界中的3D模型的形状是非常复…...

Qt Installer Framework使用教程:

步骤一&#xff1a; 下载并安装Qt Installer Framework工具 http://download.qt.io/official_releases/qt-installer-framework/ 将安装目录添加到环境变量&#xff0c;如安装D盘时D:\Qt\QtIFW-4.5.0\bin 步骤二&#xff1a; 将测试例子(如D:\Qt\QtIFW-4.5.0\…...

nodejs+vue+java农村信息化服务平台

用户的登录模块&#xff1a;用户登录本系统&#xff0c;对个人的信息等进行查询&#xff0c;操作可使用的功能。 用户注册模块&#xff1a;游客用户可以进行用户注册&#xff0c;系统会反馈是否注册成功。 添加管理员模块&#xff1a;向本系统中添加更多的管理人员&#xff0c;…...

代码随想录补打卡 62不同路径 63 不同路径2

代码如下 func uniquePaths(m int, n int) int { dp : make([][]int,m) //定义一个二维数组 for i : 0 ; i < m ; i { //遍历这个二维数组的每个元素&#xff0c;并将每个元素都定义为一个一维数组 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 表&#xff0c;主键不自增 2 插入主键最大值 3 再次插入主键最大值1 四 没有声明…...

JSP基于Iptables图形管理工具的设计与实现(源代码+论文)

Netfilter/Iptables防火墙是Linux平台下的包过滤防火墙&#xff0c;Iptables防火墙不仅提供了强大的数据包过滤能力&#xff0c;而且还提供转发&#xff0c;NAT映射等功能&#xff0c;是个人及企业级Linux用户构建网络安全平台的首选工具。但是&#xff0c;由于种种原因&#x…...

什么是数据库分片?

什么是数据库分片&#xff1f; 数据库分片是指将一个大型数据库拆分成多个小型数据库&#xff0c;每个小型数据库称为一个分片。通过这种方式&#xff0c;可以将数据库的负载分散到多个服务器上&#xff0c;从而提高数据库的性能和可伸缩性。 为什么需要数据库分片&#xff1f…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

Linux 文件类型,目录与路径,文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...