#WEB前端(CCS常用属性,补充span、div)

news/2024/4/21 1:42:35/

1.实验:

复合元素、行内元素、块内元素、行内块元素


2.IDE:VSCODE 


3.记录: 

span为行内元素:不可设置宽高,实际占用控件决定分布空间。

div为块内元素:占满整行,可以设置宽高

img为行内块元素:不占满整行,可以设置宽高


4.代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>/* 块级元素占满整行 */.block{background-color: aqua;width: 150px;height: 100px;}/*行内元素不能设置宽高,长度取决于实际占用  */.inline{height: 50px;width: 100px;background-color: brown;}/* 行内块元素不会占整行,又可以设置宽高 */.inline_block{width: 100px;}
</style>
<body><!-- 复合属性 --><h1 style="font: bolder 50px 'KaiTi';">这是一个复合属性</h1><!-- 块级元素 --><div class="block">这是一个块级元素</div><!-- 行内元素 --><span class="inline">这是一个行内元素</span><!-- 行内块元素 --><img src="超级马里奥.jpg" alt="" class="inline_block"><img src="超级马里奥.jpg" alt="" class="inline_block">
</body>
</html>


http://www.ppmy.cn/news/1370806.html

相关文章

2024年华为OD机试真题-文件缓存系统-Python-OD统一考试(C卷)

题目描述: 请设计一个文件缓存系统,该文件缓存系统可以指定缓存的最大值(单位为字节)。 文件缓存系统有两种操作:存储文件(put)和读取文件(get) 操作命令为put fileName fileSize或者get fileName 存储文件是把文件放入文件缓存系统中;读取文件是从文件缓存系统中访问已存…

大模型理论基础(so-large-lm)课程笔记!

Datawhale干货 作者&#xff1a;辣条&#xff0c;Datawhale优秀学习者 前 言 在当前信息时代&#xff0c;大型语言模型&#xff08;Large Language Models&#xff0c;LLMs&#xff09;的发展速度和影响力日益显著。随着技术进步&#xff0c;我们见证了从基本的Transformer架构…

swoole协程

协程执行顺序 //hyperf框架 use Co;go(function () {Co::sleep(1); // Io等待一秒echo "hello go1 \n";});echo "hello main \n";go(function () {echo "hello go2 \n";});//打印结果hello mainhello go2hello go1/*运行此段代码, 系统启动一个…

Linux:进入vim编辑模式

vim 是一个强大的文本编辑器。 三种模式&#xff1a; 普通模式&#xff08;Normal mode&#xff09; 插入模式&#xff08;Insert mode&#xff09; 命令行模式&#xff08;Command-line mode&#xff09; 当你打开一个文件时&#xff0c;vim 默认处于普通模式。 插入模式&a…

Python执行 nohup 导致僵尸进程问题. /usr/bin/sh -> /usr/bin/bash

将 /usr/bin/sh -> dash 改成 /usr/bin/sh -> /usr/bin/bash 即可解决. ln -sf /usr/bin/bash /usr/bin/sh cmd" nohup python3 xxxx.py > /xx/xxx.log 2>&1 &" #在python里执行上边的命令ret subprocess.Popen(cmd,shellTrue,stdouts…

灾备建设中异地副本含义及使用

异地副本是指将备份数据存放在不同的地理位置&#xff0c;确保数据的安全性和可用性。这种备份方法可以降低数据丢失的风险&#xff0c;因为即使一个位置出现机房级灾难&#xff0c;导致数据出现故障&#xff0c;也可以从另一个位置的数据副本中恢复使用。 在进行异地副本备份…

MR混合现实情景实训教学系统在商务外语课堂的应用

一、MR混合现实情景实训教学系统的特点 MR混合现实情景实训教学系统是一种将虚拟现实&#xff08;VR&#xff09;和增强现实&#xff08;AR&#xff09;技术相结合的教育平台。它通过三维立体图像&#xff0c;模拟真实的商务环境&#xff0c;使学生在虚拟环境中进行外语沟通实…

[DevOps云实践] 跨AWS账户及Region调用Lambda

[DevOps云实践] 跨AWS账户及Region调用Lambda 本文將幫大家理清一下幾個問題: 如何跨不同AWS賬戶,不同Region來調用Lambda? 不同Lambda之間如何互相調用?有時我們希望我們的Lambda脚本能夠運行在多個AWS賬戶中的不同Region下,但是,我們還不希望每個下面都去建立一個運行…

Win10 电脑打印机老是脱机,重启电脑也是不行

环境&#xff1a; Win10专业版 美能达C287 问题描述&#xff1a; Win10 电脑打印机老是脱机&#xff0c;重启电脑也是不行 解决方案&#xff1a; 1.重启打印服务还是不行 2.删除打印机重新添加还是不行 3.删除打印机驱动文件 打开cmd&#xff0c;输入printui /s /t2&…

springboot读取自定义配置

springboot读取自定义配置 application.yml自定义配置 my-app:ip1:#dmz1 ftp服务器ipAddress: 172.12.23.456port: 21username: adminpassword: adminip2:ipAddress: 172.12.23.457port: 21username: adminpassword: admin方式1&#xff0c;Value注解 Component public clas…

代码随想录算法训练营Day36 || leetCode 435. 无重叠区间 || 763.划分字母区间 || 56. 合并区间

435. 无重叠区间 和上一道气球题类似。只不过上一道题中两个区间左右边界相等可视为一个区间&#xff0c;这里不可以。 class Solution { public:// 按照区间右边界排序static bool cmp (const vector<int>& a, const vector<int>& b) {return a[1] < …

『Linux从入门到精通』第 ㉕ 期 - System V 共享内存

文章目录 &#x1f490;专栏导读&#x1f490;文章导读&#x1f427;共享内存原理&#x1f427;共享内存相关函数&#x1f426;key 与 shmid 区别 &#x1f427;代码实例 &#x1f490;专栏导读 &#x1f338;作者简介&#xff1a;花想云 &#xff0c;在读本科生一枚&#xff0…

【JavaWeb】Jwt令牌简单使用及代码示例

Jwt令牌介绍 Jwt令牌主要用于登录操作中&#xff0c;常用来进行身份认证 jwt令牌分为三个部分&#xff08;不同部分之间用点分割&#xff09;&#xff1a; 由base64编码的头部信息&#xff0c;其中储存着Jwt所使用的摘要算法由base64编码的中间部分用户自定义信息&#xff0c…

vue项目中使用antvX6新手教程,附demo案例讲解(可拖拽流程图、网络拓扑图)

前言&#xff1a; 之前分别做了vue2和vue3项目里的网络拓扑图功能&#xff0c;发现对antv X6的讲解博客比较少&#xff0c;最近终于得闲码一篇了&#xff01; 需求&#xff1a; 用户可以自己拖拽节点&#xff0c;节点之间可以随意连线&#xff0c;保存拓扑图数据后传给后端&…

Linux: shm_xx系列函数使用详解

目录 一、shmget/shmctl/shmat/shmdt函数1、shmget2、shmctl3、shmat4、shmdt5、补充&#xff1a;ftok函数6、示例代码 二、shm_open/shm_unlink函数1、shm_open2、shm_unlink3、示例代码 三、课外阅读 一、shmget/shmctl/shmat/shmdt函数 shm_xx系列函数是用于操作共享内存的一…

深度相机xyz点云文件三维坐标和jpg图像文件二维坐标的相互变换函数

深度相机同时拍摄xyz点云文件和jpg图像文件。xyz文件里面包含三维坐标[x,y,z]和jpg图像文件包含二维坐标[x&#xff0c;y],但是不能直接进行变换&#xff0c;需要一定的步骤来推演。 下面函数是通过box二维框[xmin, ymin, xmax, ymax, _, _ ]去截取xyz文件中对应box里面的点云…

QT debug编译失败:xxx/bin/ld.exe: cannot find -lxxd1

原因&#xff1a;由于编译时&#xff0c;使用debug模式下&#xff0c;动态库没有对应的lxxd1中的xx库 解决方案1&#xff1a;改为release编译&#xff1b; 解决方案2&#xff1a;在引用的三方pri文件中&#xff0c;去掉多余的d #修改前 if(!debug_and_release|build_pass):CON…

PlantUML - 时序图

时序图主要内容 下面是一个简单的时序图&#xff0c;我们可以很容易并且美观的表达我们的交互流程&#xff0c;只需要在箭头的两边指定一个名字&#xff0c;加上描述即可&#xff1a; startuml bkloanapply -> bkloanapprove : request bkloanapprove --> bkloanapply :…

2024年3月5日 十二生肖 今日运势

小运播报&#xff1a;2024年3月5日&#xff0c;星期二&#xff0c;农历正月廿五 &#xff08;甲辰年丁卯月戊辰日&#xff09;&#xff0c;法定工作日。今天学雷锋纪念日&#xff0c;学习雷锋好榜样&#xff0c;助人为乐不可忘。 红榜生肖&#xff1a;鸡、猴、鼠 需要注意&am…

加密与安全_探索签名算法

文章目录 概述应用常用数字签名算法CodeDSA签名ECDSA签名小结 概述 在非对称加密中&#xff0c;使用私钥加密、公钥解密确实是可行的&#xff0c;而且有着特定的应用场景&#xff0c;即数字签名。 数字签名的主要目的是确保消息的完整性、真实性和不可否认性。通过使用私钥加…