CSS的布局 Day03
一、显示模式:
网页中HTML的标签多种多样,具有不同的特征。而我们学习盒子模型、使用定位和弹性布局把内容分块,利用CSS布局使内容脱离文本流,使用定位或弹性布局让每块内容摆放在想摆放的位置,让网站页面布局更合理、有条理。
1.1 标签分类
1.1.1 块状元素(block-level)
通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素。![]()
独占一行且自由设定 块级元素的特点:
(1)总是从新行开始【独占一行】
(2)高度,行高、外边距以及内边距都可以控制。【可以自由设定】
(3)宽度默认是容器的100% 【即可来源于父级】
(4)可以容纳内联元素和其他块元素
1.1.2 行内元素 (又叫内联元素inline)
一行共存多个;默认尺寸由内容撑开;加宽高生效
行内元素(内联元素inline)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。 常见的行内元素有
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等, 其中<span>标签最典型的行内元素。行内元素的特点:
一行共存多个;默认尺寸由内容撑开;加宽高生效(1)和相邻行内元素在一行上。
(2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。
【不可自由赋值宽高】
(3)默认宽度就是它本身内容的宽度。
(4)行内元素只能容纳文本或则其他行内元素。(a特殊)
1.1.3 行内块状元素(inline-block)
宽高属性生效;宽高默认由内容撑开
在内联元素中有几个特殊的标签
<img />、<input />、<td>可以对它们设置宽高和对齐属性,称它们为内联块状元素。 内联块状元素的特点:
(1)和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。
![]()
有间隙 (2)默认宽度就是它本身内容的宽度。
(3)高度,行高、外边距以及内边距都可以控制。
宽高属性生效;宽高默认由内容撑开
1.1.4 转换display
HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。
三者是可以互相转换的,使用display属性能够将三者任意转换:
(1)display:inline;转换为行内元素
(2)display:block;转换为块状元素
(3)display:inline-block;转换为行内块状元素
例如:
块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素,从而使 div 元素具有内联元素特点。
div{display:inline;}
......
<div>我要变成内联元素</div>
单行文字垂直居中的代码
解决方案:文字的行高等于盒子的高度,就可以让文字在当前盒子内垂直居中。
相关文章:
CSS的布局 Day03
一、显示模式: 网页中HTML的标签多种多样,具有不同的特征。而我们学习盒子模型、使用定位和弹性布局把内容分块,利用CSS布局使内容脱离文本流,使用定位或弹性布局让每块内容摆放在想摆放的位置,让网站页面布局更合理、…...
nodejs+vue+elementui养老院老年人服务系统er809
“养老智慧服务平台”是运用nodejs语言和vue框架,以MySQL数据库为基础而发出来的。为保证我国经济的持续性发展,必须要让互联网信息时代在我国日益壮大,蓬勃发展。伴随着信息社会的飞速发展,养老智慧服务平台所面临的问题也一个接…...
antd表格宽度超出屏幕,列宽自适应失效
最近遇到个诡异的问题,Table用的好好的,可就有一个页面的表格显示不全,超出浏览器宽,设定表格宽度也没用。 仔细分析了用户上传展示的数据后发现,不自动换行的超宽列都是url地址,一开始还以为是地址里有不…...
布局--QT Designer
一、在我们使用Qt做界面设计时,为了界面的整洁美观,往往需要对界面中的所有控件做一个有序的排列,以及设置各个控件之间的间距等等,为此Qt为界面设计提供了基本布局功能,使用基本布局可以使组件有规则地分布。 1.1 基…...
2024第八届杭州国际智慧城市博览会:建筑与智能,智慧与未来
浙江,中国最具活力的省份之一,将再次迎来一场盛大的智慧城市行业展会。2024年第八届浙江智慧城市博览会,由浙江省土木建筑学会发起主办,以“探索未来,智能引领”为主题,于2024年4月份在美丽的杭州国际博览中…...
Text-to-SQL小白入门(八)RLAIF论文:AI代替人类反馈的强化学习
学习RLAIF论文前,可以先学习一下基于人类反馈的强化学习RLHF,相关的微调方法(比如强化学习系列RLHF、RRHF、RLTF、RRTF)的论文、数据集、代码等汇总都可以参考GitHub项目:GitHub - eosphoros-ai/Awesome-Text2SQL: Cur…...
C语言联合体和枚举
C语言联合体和枚举 文章目录 C语言联合体和枚举一、联合体①联合体简介②联合体大小的计算 二、枚举 一、联合体 ①联合体简介 union Un {char c;int i; };像结构体一样,联合体也是由⼀个或者多个成员构成,这些成员可以不同的类型。但是编译器只为最大…...
Ubuntu 上传项目到 GitHub
一、前言 GitHub 作为时下最大的开源代码管理项目,广泛被工程和科研人员使用,本文主要介绍如何如何将自己的项目程序上传到 GitHub 上。 要上传本地项目到 GitHub 上,主要分为两步,第一步是 二、创建 SSH keys 首先登录 GitHu…...
CSS 复杂卡片/导航栏特效运用目录
主要是记录复杂卡片/导航栏相关的特效实践案例和实现思路。 章节名称完成度难度文章地址完整代码下载地址多曲面卡片实现完成复杂文章链接代码下载倒置边框半径卡片完成一般文章链接代码下载...
QT: 一种精确定时器类的实现与使用
1)类的实现 #ifndef CPRECISETIMER_H #define CPRECISETIMER_H#include <windows.h>class CPreciseTimer { public:CPreciseTimer();bool SupportsHighResCounter();void StartTimer();void StopTimer();__int64 GetTime();private://Auxiliary Functionvoid…...
SQLite4Unity3d安卓 在手机上创建sqlite失败解决
总结 要在Unity上运行一次出现库,再打包进APK内 问题 使用示例代码的创建库 var dbPath string.Format("Assets/StreamingAssets/{0}", DatabaseName); #else// check if file exists in Application.persistentDataPathvar filepath string.Format…...
跨站请求伪造:揭秘攻击与防御
1、什么是CSRF 其目标是在用户不知情的情况下,以用户身份执行未经授权的操作。攻击者通过引诱用户访问恶意网站或点击包含恶意代码的链接,来伪造一个请求发送给服务器,来触发 CSRF 攻击。一旦用户被攻击,他们的登录凭据将被用于执…...
matlab 图像均值滤波
目录 一、算法原理二、代码实现三、结果展示本文由CSDN点云侠翻译,放入付费专栏只为防不要脸的爬虫。专栏值钱的不是本文,切勿因本文而订阅。 一、算法原理 均值滤波是一种常用的线性滤波方法,用于平滑图像并减少噪声。它的实现过程如下: 确定滤波器的大小:选择一个固定的…...
P1433 吃奶酪
#include <iostream> #include <cmath> using namespace std; #define M 15 #define S(n) ((n) * (n)) double indx[M 5], indy[M 5], ans 0, sum 0;//坐标数组,从下标为1开始记录 int n, vis[M 5] { 0 };//vis数组,选过的数字标记为1…...
c++string类的赋值问题
来看问题: 为什么呢?是因为定义string a""时候a没有占用空间,所以没有a[0],a[1],a[3]。如果说string a"hhhhhh",那么图中a[0],a[1],a[3]就有效了。正确的做法是用连接,或者是定义时写成string a(6…...
服务器中了mkp勒索病毒怎么办?mkp勒索病毒特点,解密数据恢复
Mkp勒索病毒是最近比较流行的勒索病毒,从10月份国庆节假期结束以来,云天数据恢复中心陆续收到很多企业的求助,企业的服务器被mkp勒索病毒攻击,导致企业的众多软件无法正常使用,像用友与金蝶软件都有遭受过mkp勒索病毒的…...
深入探析网络代理与网络安全
随着互联网的快速发展,网络安全问题日益突出,而网络代理技术正成为应对安全挑战的重要工具。本文将深入探讨Socks5代理、IP代理以及它们在网络安全、爬虫开发和HTTP协议中的关键作用,以期帮助读者更好地理解和应用这些技术。 1. Socks5代理&…...
如何开始使用 Kubernetes RBAC
基于角色的访问控制 (RBAC) 是一种用于定义用户帐户可以在 Kubernetes 集群中执行的操作的机制。启用 RBAC 可以降低与凭证盗窃和帐户接管相关的风险。向每个用户授予他们所需的最低权限集可以防止帐户拥有过多的特权。 大多数流行的 Kubernetes 发行版都从单个用户帐户开始,…...
8.简易无线通信
预备知识 Zigbee无线通信,需要高频的载波来提供发射效率,Zigbee模块之间要可以正常的收发,接收模块必须把接收频率设置和发射模块的载波频率一致。Zigbee有27个载波可以进行通信,载波叫做信道(无线通信的通道…...
渗透测试漏洞挖掘技巧
文章目录 一、使用.json进行敏感数据泄漏二、如何查找身份验证绕过漏洞三、在Drupal上找到隐藏的页面四、遗忘的数据库备份五、电子邮件地址payloads六、HTTP主机头:localhost七、通过篡改URI访问管理面板八、通过URL编码空格访问管理面板九、篡改URI绕过403十、Byp…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式,可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
Admin.Net中的消息通信SignalR解释
定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...
将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?
Otsu 是一种自动阈值化方法,用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理,能够自动确定一个阈值,将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...
Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器
第一章 引言:语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域,文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量,支撑着搜索引擎、推荐系统、…...
页面渲染流程与性能优化
页面渲染流程与性能优化详解(完整版) 一、现代浏览器渲染流程(详细说明) 1. 构建DOM树 浏览器接收到HTML文档后,会逐步解析并构建DOM(Document Object Model)树。具体过程如下: (…...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN,根据VPN原理,打通两个内网必然需要借助一个公共中继节点,ktconnect工具巧妙的利用k8s原生的portforward能力,简化了建立连接的过程,apiserver间接起到了中继节…...
Mac下Android Studio扫描根目录卡死问题记录
环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中,提示一个依赖外部头文件的cpp源文件需要同步,点…...
CSS | transition 和 transform的用处和区别
省流总结: transform用于变换/变形,transition是动画控制器 transform 用来对元素进行变形,常见的操作如下,它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...
Go语言多线程问题
打印零与奇偶数(leetcode 1116) 方法1:使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...
Python Einops库:深度学习中的张量操作革命
Einops(爱因斯坦操作库)就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库,用类似自然语言的表达式替代了晦涩的API调用,彻底改变了深度学习工程…...
