CSS中块级元素,行内块元素,行内元素的特点

news2025/1/12 8:45:45

CSS自学笔记

目录

一、什么是元素显示模式

二、CSS的元素显示模式

1.块元素

2.行内元素

3.行内块元素


前言

       网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。 HTML 元素一般分为块元素和行内元素两种类型。块级元素和行内元素都是元素显示模式,而本文讲的是这几种模式的区别以及使用规则。


一、什么是元素显示模式

        元素显示模式就是元素(标签)以什么方式进行显示,比如自己占一行,比如一行可以放多个。HTML 元素一般分为块元素行内元素两种类型。

二、CSS的元素显示模式

1.块元素

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

块级元素的特点

① 比较霸道,自己独占一行。

② 高度,宽度、外边距以及内边距都可以控制。

③ 宽度默认是容器(父级宽度)的100%。

④ 是一个容器及盒子,里面可以放行内或者块级元素。

注意:1.文字类的元素内不能使用块元素。

           2.标签主要用于存放文字,因此里面不能放块级元素,特别是不能放。

           3.同理h1~h6等都是文字类块级标签,里面也不能放其他块级元素。

代码如下(错误示例):

<body>
    <div>比较霸道,自己独占一行</div> 瑟瑟发抖
    <p>独占一行</p>
    <p>
    <div>这里有问题</div>
    </p>
</body>

网页显示效果:

此代码的21到23行中将div放在了文字类元素中,乍一看好像是没有什么问题的,但是我们在网页中查看代码便可以发现浏览器渲染的过程中div自动从p标签里跳出来了。

 

这里p标签生效,上下都有间隙,但是

在p里嵌套div之后这个p便不再生效

同理如果在p标签中嵌套p标签,或者在a标签中嵌套a标签,容易造成错误。

错误示例:

<body>
    <a href="#">
        我是谁
        <a href="#">我是谁</a>
    </a>
</body>

 网页显示效果

嵌套在里面的a或者p均会跳出来。

 

2.行内元素

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

 行内元素的特点

① 相邻行内元素在一行上,一行可以显示多个。

② 高、宽直接设置是无效的。

③ 默认宽度就是它本身内容的宽度。

④ 行内元素只能容纳文本或其他行内元素。

示例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>显示模式之行内元素</title>
    <style>
        span {
            width: 100px;
            height: 100px;
            background-color: hotpink;
        }
    </style>
</head>

<body>
    <span>我是行内元素span</span> <strong>我是行内元素strong</strong>
    <span>我是行内元素span</span> <strong>我是行内元素strong</strong>

</body>

</html>

网页显示效果:

可以看出CSS中长宽设置对于行内元素是无效的。

3.行内块元素

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

行内块元素的特点

① 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。

② 默认宽度就是它本身内容的宽度(行内元素特点)。

③ 高度,行高、外边距以及内边距都可以控制(块级元素特点)。

示例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>显示模式之行内块元素(特殊情况)</title>
    <style>
        input {
            width: 249px;
            height: 35px;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
</body>

</html>

网页显示效果:

可以看出既可以在同一行显示,又可以设置长宽。


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

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

相关文章

220v转15v芯片-220v转15v用什么芯片?

FET开关&#xff0c;具有高效率和稳定性。 Q&#xff1a;为什么需要将220v转换为15v&#xff1f; A&#xff1a;在家庭电器和电子设备中&#xff0c;很多电路需要低电压直流电源供电。而家庭供电一般为220v交流电&#xff0c;需要经过转换才能得到所需的低电压直流电源。 Q&…

错题记录—哪个类用到了解决哈希冲突的开放定址法,MYSQL实现主从复制的日志是哪种,Java对象的初始化方式有

解决哈希冲突&#xff08;四种方法&#xff09;&#xff1a; 1、开放定址法&#xff1a;我们在遇到哈希冲突时&#xff0c;去寻找一个新的空闲的哈希地址。 &#xff08;1&#xff09;线性探测法 &#xff08;2&#xff09;平方探测法&#xff08;二次探测&#xff09; 2、再哈…

题解2023.5.23(欧拉筛)

C.Hossamand Trainees 欧拉筛,预处理先筛出质数&#xff0c;分解质因数对于出现两次及以上的输出yes 我们需要筛出根号(1e9)以内的所有质数&#xff0c;根据质数定理&#xff0c;大约有4e^3个质数&#xff0c; 时间复杂度分析&#xff1a;le5*4e34e8 #include<bits/stdc.…

Python 3.10.11 liunx系统安装

官网下载 https://www.python.org/downloads/source/ 将tar包上传服务器安装 安装基础功能软件 yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gdbm-devel db4-devel libpcap-devel xz-devel 解压安装 tar -z…

chatgpt赋能Python-python_noob

Python for Beginners: An Introduction to the World’s Most Popular Programming Language Python is a high-level programming language that has become one of the most popular and widely used languages in the world. It’s simple, easy to read, and has a vast …

chatgpt赋能Python-python_pecan

Python Pecan: 构建Web应用程序的高效框架 Python是一种简单易学、功能强大的编程语言&#xff0c;非常适合Web应用程序的开发。而Pecan则是一个基于Python的高效框架&#xff0c;可以简化Web应用程序的开发过程。本文将介绍Python Pecan框架的优点、使用方法和性能表现。 什…

计算机网络考试多选题汇总Ⅱ(请关注博客在资源文档下载完整答案)

https://cadyin.blog.csdn.nethttps://blog.csdn.net/qq_38639612?spm1010.2135.3001.5421 计算机网络考试多选题汇总 1、在Windows中&#xff0c;任务管理器的作用是() A&#xff0e;终止未响应的应用程序 B&#xff0e;终止进程的运行 C&#xff0e;查看系统当前的信息 …

【新星计划·2023】网络协议———DHCP讲解

前言 在工作中&#xff0c;利用DHCP可以有效的节约IP地址&#xff0c;既保证了网络通信&#xff0c;又提高IP地址的使用率。 一、DHCP是什么&#xff1f; DHCP全称为Dynamic Host Configuration Protocol&#xff0c;是一种网络管理协议&#xff0c;中文含义为“动态主机配置…

node版本引起的一系列问题

1. 安装node node官方地址 下载对应系统zip到对应的文件夹解压 在目录下创建文件夹node_cache 和 node_global 修改 npm 配置&#xff0c;配置 npm 的全局模块的存放路径以及 cache 的路径 //npm config set prefix 文件路径 npm config set prefix D:\software\nodeJs\n…

shell 免交互

文章目录 Here Document 免交互实验多行注释基本命令 实验 Here Document 免交互 使用I/O重定向的方式将命令列表提供给交互式程序或命令&#xff0c;比如 ftp、cat 或 read 命令。是标准输入的一种替代品可以帮助脚本开发人员不必使用临时文件来构建输入信息&#xff0c;而是…

DR2: Diffusion-based Robust Degradation Remover for Blind Face Restoration

DR2: Diffusion-based Robust Degradation Remover for Blind Face Restoration (Paper reading) Zhixin Wang, Shanghai Jiao Tong University, CH, CVPR2023, Cited:0, Code, Paper 1. 前言 传统的盲脸部修复通常使用预定义的退化模型来合成降质的低质量数据进行训练&#…

CodeForces.1810B.糖果.[中等][ifelse选择][注意输出格式]

题目描述&#xff1a; 解题思路&#xff1a; 题目解读&#xff1a; 初始状态只有一个糖果&#xff0c;即x1&#xff0c;给定想要获得的总糖果数y。 只能进行两种操作&#xff0c;分别是做2x-1和2x1。给出从 x1 到 目标数字 y 的操作步数和具体步骤。 示例1 从1到2&#xff…

2023最全CTF入门指南(建议收藏)

目录 一、CTF简介 二、CTF竞赛模式 三、CTF各大题型简介 四、CTF学习路线 4.1、初期 1、htmlcssjs&#xff08;2-3天&#xff09; 2、apachephp &#xff08;4-5天&#xff09; 3、mysql &#xff08;2-3天&#xff09; 4、python (2-3天) 5、burpsuite &#xff08;…

防火墙——iptables防火墙(四表五链、防火墙配置方法、匹配规则详解)

iptables防火墙 一、Linux包过滤防火墙1、Linux防火墙概述2、netfilter3、iptables4、netfilter/iptables关系 二、四表五链1、表链作用2、四表3、五链4、数据包到达防火墙时&#xff0c;规则表之间的优先顺序5、规则链之间的匹配顺序 三、iptables的安装四、iptables防火墙的配…

chatgpt赋能Python-python_nornir

Python Nornir - 让网络自动化更高效 随着网络技术的发展和网络设备的不断增多&#xff0c;网络自动化成为了现代网络管理的必备技能。然而&#xff0c;手动编写和执行网络任务的方式不仅费时费力&#xff0c;也容易出错和难以维护。 Python Nornir 是一个开源的网络自动化框…

Android 事件分发机制

Android 事件分发机制 概述事件分发过程的主要方法&#xff1a; ViewView 事件的分发 dispatchTouchEventView 事件的处理&#xff08;消费&#xff09;onTouchEvent&#xff1a; ViewGroupViewGroup 事件的分发 dispatchTouchEvent 概述 这里的事件指的是 View 对手势的响应&…

chatgpt赋能Python-python_pe

Python PE&#xff08;Python Performance Engineering&#xff09;介绍 Python PE&#xff08;Python Performance Engineering&#xff09;是Python编程的一个方面&#xff0c;旨在提高Python程序的性能和效率。PE的目标是优化Python程序的执行时间、内存占用和资源消耗&…

chatgpt赋能Python-python_nargs

Python nargs 介绍 在 Python 中&#xff0c;nargs 是使用 argparse 模块中用于定义命令行参数的选项之一。通过使用 nargs&#xff0c;我们可以为每个参数指定一个特定的值。它可以接受以下几种不同的值&#xff1a; ‘?’&#xff1a;表示该参数可以有零个或一个值。‘*’…

Vulkan Tutorial 3 图形管线基础

目录 0 管线 8 着色器 9 固定功能 10 渲染通道 结论 0 管线 我们将设置一个图形管道&#xff0c;并将其配置为绘制我们的第一个三角形。图形管道是将网格的顶点和纹理一直带到渲染目标中的像素的操作序列。 带有绿色的阶段被称为固定功能阶段。这些阶段允许你使用参数来…

Spark大数据处理讲课笔记---Spark RDD典型案例

零、本节学习目标 利用RDD计算总分与平均分利用RDD统计每日新增用户利用RDD实现分组排行榜 一、利用RDD计算总分与平均分 &#xff08;一&#xff09;提出任务 针对成绩表&#xff0c;计算每个学生总分和平均分 &#xff08;二&#xff09;实现思路 读取成绩文件&#xff…