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

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.mzph.cn/news/719444.shtml

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

相关文章

Unity(第二十三部)导航

你可以使用 unity官方提供的 unity导航组件或第三方 unity导航组件&#xff0c;以实现游戏中角色或其他物体的导航。 unity导航组件通常具有多种导航模式&#xff0c;如飞行模式、步行模式、车辆模式等&#xff0c;可以根据不同的需求选择合适的模式。同时&#xff0c;unity导…

2023年全国职业院校技能大赛中职组大数据应用与服务赛项题库参考答案陆续更新中,敬请期待…

2023年全国职业院校技能大赛中职组大数据应用与服务赛项题库参考答案陆续更新中&#xff0c;敬请期待… 武汉唯众智创科技有限公司 2024 年 2 月 联系人&#xff1a;辜渝傧13037102709 题号&#xff1a;试题01 模块二&#xff1a;数据获取与处理 &#xff08;一&#xff09;…

Ainx的全局配置

&#x1f4d5;作者简介&#xff1a; 过去日记&#xff0c;致力于Java、GoLang,Rust等多种编程语言&#xff0c;热爱技术&#xff0c;喜欢游戏的博主。 &#x1f4d7;本文收录于Ainx系列&#xff0c;大家有兴趣的可以看一看 &#x1f4d8;相关专栏Rust初阶教程、go语言基础系列…

【S32DS报错】-7-程序进入HardFault_Handler,无法正常运行

【S32K3_MCAL从入门到精通】合集&#xff1a; S32K3_MCAL从入门到精通https://blog.csdn.net/qfmzhu/category_12519033.html 问题背景&#xff1a; 在S32DS IDE中使用PEmicro&#xff08;Multilink ACP&#xff0c;Multilink Universal&#xff0c;Multilink FX&#xff09…

【网站项目】182在线作业管理系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

【Python】进阶学习:pandas--describe()函数的使用介绍

&#x1f40d;【Python】进阶学习&#xff1a;pandas——describe()函数的使用介绍 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&am…

绘图机器 - 华为OD统一考试(C卷)

OD统一考试&#xff08;C卷&#xff09; 分值&#xff1a; 100分 题解&#xff1a; Java / Python / C 题目描述 绘图机器的绘图笔初始位置在原点&#xff08;0, 0&#xff09;&#xff0c;机器启动后其绘图笔按下面规则绘制直线&#xff1a; 1&#xff09;尝试沿着横向坐标轴…

支持向量机 SVM | 线性可分:硬间隔模型公式推导

目录 一. SVM的优越性二. SVM算法推导小节概念 在开始讲述SVM算法之前&#xff0c;我们先来看一段定义&#xff1a; 支持向量机(Support VecorMachine, SVM)本身是一个二元分类算法&#xff0c;支持线性分类和非线性分类的分类应用&#xff0c;同时通过OvR或者OvO的方式可以应用…

长贵对赵本山说:你需要我们家大脚,我立马给你配双大鞋!

长贵对赵本山说&#xff1a;你需要我们家大脚&#xff0c;我立马给你配双大鞋&#xff01; --小品《乡村爱情》&#xff08;中2&#xff09;的台词 表演者&#xff1a;赵本山 于月仙 王小利 唐鉴军等 &#xff08;接上&#xff09; 哈哈哈 伊拉克啊 这地方也不产这玩意吧 …

Chat GPT:AI聊天机器人的革命性突破!

一、引言 近年来&#xff0c;人工智能&#xff08;AI&#xff09;技术的发展日新月异&#xff0c;其中最具代表性的成果之一便是Chat GPT。这款基于自然语言处理&#xff08;NLP&#xff09;技术的聊天机器人&#xff0c;以其高度智能、灵活多变的特点&#xff0c;迅速吸引了全…

笔记74:在SLAM建图过程中,为什么要使用【障碍物点云配准算法】和【里程计估算算法】结合的方法

仅使用【障碍物点云配准算法】&#xff0c;很容易导致在一条长通道中&#xff0c;因为前后两帧的雷达点云图过于相似&#xff0c;导致特征匹配一直完全重合&#xff0c;使得机器人建图一直停留在原地&#xff0c;但实体机器人早就沿着通道跑向远端了&#xff1b; 使用Hector_ma…

(学习日记)2024.03.02:UCOSIII第四节:创建任务

写在前面&#xff1a; 由于时间的不足与学习的碎片化&#xff0c;写博客变得有些奢侈。 但是对于记录学习&#xff08;忘了以后能快速复习&#xff09;的渴望一天天变得强烈。 既然如此 不如以天为单位&#xff0c;以时间为顺序&#xff0c;仅仅将博客当做一个知识学习的目录&a…

这是开玩笑吗?加个工具,WPS与Excel表格变成了应用系统

表格处理数据简单快捷&#xff0c;是个人用户的首选。然而&#xff0c;当企业长期使用&#xff0c;成本表、客户表、销售表等堆积如山&#xff0c;寻找所需表格如同大海捞针&#xff0c;稍有不慎便可能导致数据丢失、混乱。即便使用WPS和Excel这样的表格软件&#xff0c;处理大…

回溯难题(算法村第十八关黄金挑战)

复原 IP 地址 93. 复原 IP 地址 - 力扣&#xff08;LeetCode&#xff09; 有效 IP 地址 正好由四个整数&#xff08;每个整数位于 0 到 255 之间组成&#xff0c;且不能含有前导 0&#xff09;&#xff0c;整数之间用 . 分隔。 例如&#xff1a;"0.1.2.201" 和 &q…

IDEA中使用git提交代码时,有.class文件怎么避免

在IDEA中使用git提交代码时&#xff0c;git把.class文件都给我放进来了&#xff0c;而我并不想要提交.class文件 我要提交的是.java文件 应该怎么设置呢 解决方案&#xff0c;点击整个项目的生命周期中的clean之前&#xff0c;你会发现git提交栏的.class文件都不见了。

ROS2服务通信的实现

文章目录 1.服务通信的概念及应用场景1.1概念1.2 应用场景 2.准备工作3.服务通信的实现3.1 服务通信接口消息3.2 服务端实现3.3 客户端实现3.4 编译及运行3.4.1 修改CMakeLists3.4.2 服务端运行结果3.4.2 客户端运行结果 1.服务通信的概念及应用场景 1.1概念 服务通信也是ROS…

抖店0元入驻不交钱会怎么样?个人店和个体店的利弊分析,开店必看

我是王路飞。 现在的抖店是可以开通个人店的。 也就是不需要营业执照、直接使用个人身份证就可以在抖音开店&#xff0c;而且也不需要缴纳店铺保证金就能开店运营了。 但真实情况是怎么样的呢&#xff1f;新手0元入驻抖店不交这个保证金会怎么样呢&#xff1f; 今天给想在抖…

AI大预言模型——ChatGPT在地学、GIS、气象、农业、生态、环境应用

原文链接&#xff1a;AI大预言模型——ChatGPT在地学、GIS、气象、农业、生态、环境应用 一开启大模型 1 开启大模型 1)大模型的发展历程与最新功能 2)大模型的强大功能与应用场景 3)国内外经典大模型&#xff08;ChatGPT、LLaMA、Gemini、DALLE、Midjourney、Stable Diff…

ios App 发送广播失败解决

记录开发 ios App 使用 c 混编时遇到的问题&#xff1a; 开发环境 macOS Sonoma&#xff08;最新版本14.3.1&#xff09; Xcode Version 15.2 ipadOS&#xff08;最新版本17.3.1&#xff09; 问题&#xff1a;在mac 上 和 ipad上测试&#xff0c;当 udp 发送广播&#xff…

跨域引起的两个接口的session_id不是同一个

来源场景&#xff1a; RequestMapping(“/captcha”)接口设置了SESSION_KEY&#xff0c;也能获取到&#xff0c;但是到了PostMapping(“/login”)接口就是空的&#xff0c;由于跨域导致的两个session_id不是同一个 /*** 系统用户 前端控制器*/ Controller CrossOrigin(origins…