当前位置： 首页 > news >正文

前端行级元素和块级元素的基本区别

news 2025/12/19 19:40:57

块级元素和行内元素的基本区别是，

行内元素可以与其他行内元素并排；块级元素独占一行，不能与其他任何元素并列；

下面看一下；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div demo </title>
<style></style>
</head><body><div id="div1" style="width: 100px;height: 100px;border: 3px solid green;">
</div>
<div id="div2" style="width: 100px;height: 100px;border: 3px solid green;">
</div></br></br><a href="">AAABBBCCC</a>
<a href="">DDDFFFEEE</a></body>
</html>

div是典型块级元素；<a>是行内元素；

2个div在代码中是挨着的，2个<a>也是；

元素都设置几个基本属性，不做更多设置；运行如下；

2个div自己会分到不同行；2个<a>自己会在一行里； 

相关文章：

前端行级元素和块级元素的基本区别

块级元素和行内元素的基本区别是&#xff0c; 行内元素可以与其他行内元素并排&#xff1b;块级元素独占一行&#xff0c;不能与其他任何元素并列&#xff1b; 下面看一下&#xff1b; <!DOCTYPE html> <html> <head> <meta charset"utf-8"&…...

编程日记 2023/8/30 4:22:31

CentOS 7用二进制安装MySQL5.7

[rootlocalhost ~]# [rootlocalhost ~]# ll 总用量 662116 -rw-------. 1 root root 1401 8月 29 19:29 anaconda-ks.cfg -rw-r--r--. 1 root root 678001736 8月 29 19:44 mysql-5.7.40-linux-glibc2.12-x86_64.tar.gz [rootlocalhost ~]# tar xf mysql-5.7.40-linux-…...

编程日记 2023/8/30 4:21:30

华为加速回归Mate 60发布, 7nm全自研工艺芯片

华为于今天12:08推出“HUAWEI Mate 60 Pro先锋计划”&#xff0c;让部分消费者提前体验。在华为商城看到&#xff0c;华为Mate 60 pro手机已上架&#xff0c;售价6999元&#xff0c;提供雅川青、白沙银、南糯紫、雅丹黑四种配色供选择。 据介绍&#xff0c;华为在卫星通信领域…...

编程日记 2023/8/30 4:20:28

Linux系列讲解 —— 【systemd】下载及编译记录

Ubuntu18.04的init程序合并到了systemd中&#xff0c;本篇文章记录一下systemd的下载和编译。 1. 下载systemd源码 (1) 查看systemd版本号&#xff0c;用来确定需要下载的分支 sunsun-pc:~$ systemd --version systemd 237 PAM AUDIT SELINUX IMA APPARMOR SMACK SYSVINIT UT…...

编程日记 2023/8/30 4:19:27

u-view 的u-calendar 组件设置默认日期后，多次点击后，就不滚动到默认日期的位置

场景&#xff1a;uniapp开发微信小程序 vue2 uview版本&#xff1a;2.0.36 &#xff1b; u-calendar 组件设置默认日期后 我打开弹窗&#xff0c;再关闭弹窗&#xff0c; 重复两次 就不显示默认日期了 在源码中找到这个位置进行打印值&#xff0c;根据出bug前后的值进行…...

编程日记 2023/8/30 4:18:23

vue naive ui 按钮绑定按键

使用vue (naive ui) 绑定Enter 按键 知识点: 按键绑定Button全局挂载使得message,notification, dialog, loadingBar 等NaiveUI 生效UMD方式使用vue 与 naive ui将vue默认的 分隔符大括号 替换 为 [[ ]] <!DOCTYPE html> <html lang"en"> <head>…...

编程日记 2023/8/30 4:16:20

Viobot基本功能使用及介绍

设备拿到手当然是要先试一下效果的&#xff0c;这部分可以参考本专栏的第一篇 Viobot开机指南。 接下来我们就从UI开始熟悉这个产品吧&#xff01; 1.状态 设备上电会自动运行它的程序&#xff0c;开启了一个服务器&#xff0c;上位机通过连接这个服务器连接到设备&#xff0c…...

编程日记 2023/8/30 4:15:18

《PMBOK指南》第七版12大原则和8大绩效域

《PMBOK指南》第七版12大原则 原则1&#xff1a;成为勤勉、尊重和关心他人的管家 原则2&#xff1a;营造协作的项目团队环境 原则3&#xff1a;有效地干系人参与 原则4&#xff1a;聚焦于价值 原则5&#xff1a;识别、评估和响应系统交互 原则6&#xff1a;展现领导力行为…...

编程日记 2023/8/30 4:14:17

docker 启动命令

cd /ycw/docker docker build -f DockerFile -t jshepr:1.0 . #前面测试docker已经介绍过该命令下面就不再介绍了 docker images docker run -it -p 7003:9999 --name yyy -d jshepr:1.0 #上面运行报错 用这个 不报错就不用 docker rm yyy docker ps #查看项目日志 docker …...

编程日记 2023/8/30 4:13:14

C++ DAY7

一、类模板 建立一个通用的类&#xff0c;其类中的类型不确定&#xff0c;用一个虚拟类型替代 template<typename T> 类template ----->表示开始创建模板 typename -->表明后面的符号是数据类型&#xff0c;typename 也可以用class代替 T ----->表示数据类型…...

编程日记 2023/8/30 4:12:11

Vue2 使用插件 Volar 报错：＜template v-for＞ key should be placed on the ＜template＞ tag.

目录 问题描述 版本描述 问题定位 问题解决 VS Code 插件地址 问题描述 在 VS Code 上使用插件 Volar 开发 Vue3 项目&#xff0c;然后去改 Vue2 项目时&#xff0c;对没有放在<template v-for> 元素上的 :key&#xff0c;会提示 <template v-for> key should…...

编程日记 2023/8/30 4:11:10

启动线程方法 start ()和 run ()有什么区别

在Java中，线程可以通过调用start()方法或者直接调用run()方法来执行。这两种方式有着重要的区别： start() 方法：当你调用线程的start()方法时，它会使线程进入就绪状态，等待系统调度。系统会为该线程分配资源，并在合适的时机执行线程的run()方法。实际上，start()方法会启…...

编程日记 2023/8/30 4:10:07

Java的全排列模板

c有全排列函数&#xff0c;我们Java没有&#xff0c;所以我们只能自己手写了。 模板一&#xff1a;&#xff08;不去重&#xff09; import java.util.ArrayList; import java.util.Random; import java.util.Scanner; public class liyunpeng {public static void main(Stri…...

编程日记 2023/8/30 4:09:05

读书笔记——《万物有灵》

前言 上一本书是《走出荒野》&#xff0c;太平洋步道女王提到了这本书《万物有灵》&#xff0c;她同样是看一点撕一点的阅读。我想&#xff0c;在她穿越山河森林&#xff0c;听见鸟鸣溪流的旅行过程中&#xff0c;是不是看这本描写动物有如何聪明的书——《万物有灵》&#xf…...

编程日记 2023/8/30 4:08:04

面试现场表现：展示你的编程能力和沟通技巧

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…...

编程日记 2023/8/30 4:07:02

34亿的mysql表如何优雅的扩字段长度兵并归档重建

业务背景&#xff1a; 该系统有一张表数据量已达到34亿&#xff0c;并且有个字段长度不够&#xff0c;导致很多数据无法插入。因为业务只要保留近2个月数据即可&#xff0c;所以需要接下来需要做2点&#xff1a;1&#xff0c;扩字段长度 2&#xff0c;只保留近2个月的数据。 …...

编程日记 2023/8/30 4:06:00

C#_进程单例模式.秒懂Mutex

什么是Mutex? 可以定义调用线程是否具有互斥性&#xff0c;程序创建者拥有控制权&#xff0c;相反只能引用程序。 参数1&#xff1a;如果是程序创建者&#xff0c;就获得控制权。 参数2&#xff1a;名称&#xff0c;可使用GUID生成。 参数3&#xff1a;out 返回值&#xf…...

编程日记 2023/8/30 4:04:57

AcWing 5050. 排序 （每日一题）

题目描述 给定一个长度为 n 的由小写字母构成的字符串。 请你按照 a∼z 的顺序&#xff0c;对字符串内的字符进行重新排序&#xff0c;并输出重新排序后的字符串。 输入格式 第一行包含整数 T &#xff0c;表示共有 T 组测试数据。 每组数据第一行包含整数 n 。 第二行包…...

编程日记 2023/8/30 4:03:54

【TypeScript】proxy 和 Reflect

proxy &#xff08;代理&#xff09; 和 Reflect &#xff08;反射&#xff09; 参数一样。 基本用法 let person { name: xx, age: 20} // proxy 支持对象&#xff0c;数组&#xff0c;函数&#xff0c;set&#xff0c;map // 代理对象的常用模式&#xff1a;前面一个对象&…...

编程日记 2023/8/30 4:02:53

STM32f103入门（5）定时器中断

STM32 TIM&#xff08;定时器/计数器&#xff09;模块的中断流程如下&#xff1a; 配置TIM寄存器&#xff1a;首先&#xff0c;通过配置TIM相关的寄存器来设置计时器的基本参数&#xff0c;例如预分频系数、计数模式、计数器周期等。 使能TIM中断&#xff1a;使用TIM_ITConfig函…...

编程日记 2023/8/30 4:01:52

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

编程新知 2025/9/27 2:43:26

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

编程新知 2025/8/12 22:58:13

C# SqlSugar：依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

编程新知 2025/11/25 6:49:02

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

编程新知 2025/12/15 21:48:57

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/12/12 8:42:24

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...

编程新知 2025/12/19 18:26:40

Kubernetes 节点自动伸缩（Cluster Autoscaler）原理与实践

在 Kubernetes 集群中&#xff0c;如何在保障应用高可用的同时有效地管理资源&#xff0c;一直是运维人员和开发者关注的重点。随着微服务架构的普及&#xff0c;集群内各个服务的负载波动日趋明显&#xff0c;传统的手动扩缩容方式已无法满足实时性和弹性需求。 Cluster Auto…...

编程新知 2025/12/18 16:13:37

WEB3全栈开发——面试专业技能点P4数据库

一、mysql2 原生驱动及其连接机制 概念介绍 mysql2 是 Node.js 环境中广泛使用的 MySQL 客户端库&#xff0c;基于 mysql 库改进而来&#xff0c;具有更好的性能、Promise 支持、流式查询、二进制数据处理能力等。 主要特点&#xff1a; 支持 Promise / async-await&#xf…...

编程新知 2025/8/17 13:47:50

医疗AI模型可解释性编程研究：基于SHAP、LIME与Anchor

1 医疗树模型与可解释人工智能基础 医疗领域的人工智能应用正迅速从理论研究转向临床实践，在这一过程中，模型可解释性已成为确保AI系统被医疗专业人员接受和信任的关键因素。基于树模型的集成算法（如RandomForest、XGBoost、LightGBM）因其卓越的预测性能和相对良好的解释性…...

编程新知 2025/12/19 6:43:13

学习 Hooks【Plan - June - Week 2】

一、React API React 提供了丰富的核心 API&#xff0c;用于创建组件、管理状态、处理副作用、优化性能等。本文档总结 React 常用的 API 方法和组件。 1. React 核心 API React.createElement(type, props, …children) 用于创建 React 元素&#xff0c;JSX 会被编译成该函数…...

编程新知 2025/11/5 9:43:08