CSS导读 (元素显示模式)

(大家好,今天我们将继续来学习CSS的相关知识,大家可以在评论区进行互动答疑哦~加油!💕)


目录

三、CSS的元素显示模式

3.1   什么是元素显示模式

3.2  块元素

3.3  行内元素

3.4  行内块元素

3.5  元素显示模式总结


三、CSS的元素显示模式

了解元素的显示模式可以更好地让我们布局页面。


3.1   什么是元素显示模式

作用:网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以布局我们的页面。 

元素显示模式就是元素(标签)以什么方式进行显示,比如<div>自己占一行,比如行可以放多个<span>。 

HTML元素一般分为块元素和叮行内元素两种类型。 


3.2  块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素。

块级元素的特点: 

  1. 比较霸道,自己独占一行。
  2. 高度、宽度、外边距以及内边距都可以控制。
  3. 宽度默认是容器(父级宽度)的100%。
  4.  是一个容器及盒子.里面可以放行内或者块级元素。

代码: 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS之块级元素</title><style>div {width: 200px;height: 200px;background-color: pink;}</style>
</head><body><div>比较霸道,自己独占一行</div>瑟瑟发抖
</body></html>

 注意

  1. 文字类的元素内不能使用块级元素。
  2.  <p>标签主要用于存放文字,因此<p>里面不能放块级元素,特别是不能放<div>。 
  3. 同理,<h1>~<h6>等都是文字类块级标签,里面也不能放其他块级元素。


3.3  行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<span> 等,其中<span>标签是最典型的行内元素,有的地方也将行内元素称为内联元素。

 行内元素特点: 

  1. 相邻行内元素在一行上,一行可以显示多个。
  2. 高,宽直接设置是无效的。
  3. 默认宽度就是他本身内容宽度。
  4. 行内元素只能容纳文本或其他行内元素

代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS之行内元素</title><style>span {width: 100px;height: 100px;background-color: hotpink;}</style>
</head>
<body><span>squirrel.j</span><strong>小松鼠</strong>
</body>
</html>

注意:

  1. 链接里面不能放链接。
  2. 特殊情况链接<a>里面可以放块级元素,但是给<a>转换下块级模式最安全。 

3.4  行内块元素

在行内元素中有几个特殊的标签——<img/>、<input/>、<td>、它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点: 

  1. 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。可以一行显示多个(行内元素特点) 。
  2. 默认宽度就是它本身内容的宽度(行内元素特点) 。
  3. 高度,行高,外边距以及内边距都以控空制(块级元素特点) 。

代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS之行内块元素</title><style>input {width: 249px;height: 35px;}</style>
</head>
<body><input type="text"><input type="text">
</body>
</html>

3.5  元素显示模式总结

元素模式元素排列设置样式默认宽度包含
块级元素一行只能放一个块级元素可以设置宽、高容器的100%容器级可以包含任何标签
行内元素一行可以放多个行内元素可以直接设置宽、高本身内容宽度容纳文本或其它行内元素
行内块元素一行放多个行内块元素可以没置宽、高本身内容宽度

(今日分享暂时到此为止啦!为不断努力的自己鼓鼓掌吧。今日文案分享:你看山高水长,不如在顶峰相见;你看星辰辽阔,不如努力发光。) 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/808907.shtml

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

相关文章

UNIAPP二维码展示页亮度调至最亮返回恢复进入前亮度

onLoad(params) {let num plus.screen.getBrightness().toString(); //转字符串是要存到stoage中number类型会存储失败plus.storage.setItem("pmld", num)plus.screen.setBrightness(1); //设置屏幕亮度&#xff0c;范围0-1 }onUnload() {let platformuni.getSystem…

创建自定义 通知栏

//创建前台服务方式/*** description* author* time*/ class MyForegroundService : Service() {companion object {private var instance: MyForegroundService? nullfun getInstance(): MyForegroundService? {return instance}}private val NOTIFICATION_ID 1private va…

【保姆级讲解Element UI】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

结合fastapi-users与Langserve轻松实现大语言接口用户认证

在做大模型开发的过程中&#xff0c;相信很多小伙伴都是对大模型开发感兴趣&#xff0c;却对 fastapi 这个框架并不熟悉&#xff0c;但是&#xff0c;实际开发的项目确需要用户鉴权&#xff0c;这时候就会很头疼&#xff0c;查阅官方文档发现&#xff0c;官方虽然有例子&#x…

uni-app的地图定位与距离测算功能的实现

文章目录 一、引言二、uni-app地图定位实现三、距离测算技术四、完整代码五、结论本文着重探讨了如何在uni-app中实现地图定位,以及如何计算当前定位与目标位置之间的距离。 一、引言 在移动应用开发中,地图定位与距离测算是常见的功能需求。无论是出行导航、位置签到,还是…

学习笔记之——3DGS-SLAM系列代码解读

最近对一系列基于3D Gaussian Splatting&#xff08;3DGS&#xff09;SLAM的工作的源码进行了测试与解读。为此写下本博客mark一下所有的源码解读以及对应的代码配置与测试记录~ 其中工作1~5的原理解读见博客&#xff1a; 学习笔记之——3D Gaussian Splatting及其在SLAM与自动…

ios包上架系列 二、Xcode打应用市场ipa包

打包的时候一定要断开网络&#xff0c;上线包名只能在打包机配置 检查是否是正式环境&#xff0c;先在模拟器上运行 1、版本名称和本号号记得在这里更改&#xff0c;否则不生效 原因 &#xff1a;info.list <string>$(FLUTTER_BUILD_NAME)</string><key>CFB…

mysql查看数据库表容量大小

【推荐】单表行数超过 500 万行或者单表容量超过 2GB&#xff0c;才推荐进行分库分表。 说明&#xff1a;如果预计三年后的数据量根本达不到这个级别&#xff0c;请不要在创建表时就分库分表。 1. 查询所有数据库记录数和容量 SELECTtable_schema AS 数据库,SUM(table_rows) …

贪心算法|763.划分字母区间

力扣题目链接 class Solution { public:vector<int> partitionLabels(string S) {int hash[27] {0}; // i为字符&#xff0c;hash[i]为字符出现的最后位置for (int i 0; i < S.size(); i) { // 统计每一个字符最后出现的位置hash[S[i] - a] i;}vector<int> …

jenkins 启动linux节点时 控制台中文显示问号乱码

新增一个jenkins节点时&#xff0c;遇到了控制台中文输出问号的问题。 网上各种配置jenkins的全局变量&#xff0c;都不行。 最终是 节点列表 ->对应节点 -> 启动方式 -> 高级 添加JVM选项 -Dfile.encodingUTF-8

图像处理-采样方法概述

在图像处理中&#xff0c;上采样&#xff08;upsampling&#xff09;和下采样&#xff08;downsampling&#xff09;是常用的操作&#xff0c;用于改变图像的分辨率或大小。这些方法通常用于图像处理任务&#xff0c;如图像放大、缩小、压缩等。下面是一些常见的上采样和下采样…

MySQL基础练习题:习题16-20

这部分主要是为了帮助大家回忆回忆MySQL的基本语法&#xff0c;数据库来自于MySQL的官方简化版&#xff0c;题目也是网上非常流行的35题。这些基础习题基本可以涵盖面试中需要现场写SQL的问题。 列出部门名称和这些部门的员工信息&#xff0c;同时列出没有员工的部门 唯一要注…

面试题:Rabbitmq怎么保证消息的可靠性?

面试题&#xff1a;Rabbitmq怎么保证消息的可靠性? RabbitMQ作为一款广泛使用的消息中间件&#xff0c;提供了多种机制来确保消息的可靠性。要保证消息的可靠性&#xff0c;需要在消息的生产和消费过程中考虑以下几个关键方面&#xff1a; 1. 消息持久化 生产者端持久化 发…

Python 序列化与反序列化

目录 1、基本概念 2、JSON模块 2.1、dumps() 与 loads() 函数 2.2、dump() 与 load() 函数 2.3、bool 、None 类型的序列化与反序列化 3、pickle模块 3.1、dumps() 与 loads() 函数 3.2、dump() 与 load() 函数 1、基本概念 说明&#xff1a;通过文件操作&#xff0c;…

个人博客系统项目(SpringBoot+Linux部署上线)

在学完SpringBoot框架、MyBatis后&#xff0c;直接开始做第一个项目&#xff1a;博客系统 首先&#xff0c;该博客系统包含核心功能有&#xff1a; 一、登录、注册、退出登录功能。 二、没有登陆前可以查看博客首页以及博客展示的分页处理&#xff0c;以及点击查看博客可以…

Restful API接口规范(以Django为例)

Restful API接口规范(以Django为例) Restful API的接口架构风格中制定了一些规范&#xff0c;极大的简化了前后端对接的时间&#xff0c;以及增加了开发效率 安全性保证–使用https路径中带 api标识路径中带版本号数据即资源&#xff0c;通常使用名词操作请求方式决定操作资源…

浅谈网络安全威胁与防御策略

企业网络安全威胁概述 外部威胁&#xff1a;来自网络安全威胁&#xff0c;比如DDOS攻击&#xff0c;病毒&#xff0c;sql注入&#xff0c;木马&#xff0c;蠕虫&#xff0c;等网络入侵&#xff0c;网络扫描&#xff0c;垃圾邮件&#xff0c;钓鱼邮件&#xff0c;针对web的攻击…

集合系列(十九) -List与数组互转操作介绍

一、数组转List 方式一 通过 Arrays.asList(strArray) 方式&#xff0c;将数组转换List&#xff0c;但不能对List增删&#xff0c;只能查改&#xff0c;否则抛异常&#xff0c;例子如下&#xff1a; public static void main(String[] args) {//创建一个字符串数组String[] …

小程序中配置scss

找到&#xff1a;project.config.json 文件 setting 模块下添加&#xff1a; "useCompilerPlugins": ["sass","其他的样式类型"] 配置完成后&#xff0c;重启开发工具&#xff0c;并新建文件 结果&#xff1a;

微信小程序自定义关闭按钮在弹窗下面的效果

效果图: 我之前用vant 的popup的弹窗写&#xff0c;会出现close图标移动到弹窗内容外部不可见。 自定义代码&#xff1a; popup.JS/*** 生命周期函数--监听页面初次渲染完成*/onReady() {//自定义弹窗 动态获取屏幕高度var that this;wx.getSystemInfo({success: (result) &…