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

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

news 2026/3/30 15:57:14

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

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

下面看一下；

<!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

Retinaface+CurricularFace在网络安全领域的创新应用

RetinafaceCurricularFace在网络安全领域的创新应用 1. 引言 想象一下这样的场景&#xff1a;一家金融机构的服务器机房&#xff0c;只有授权人员才能进入&#xff1b;一个远程办公系统&#xff0c;确保登录者确实是员工本人&#xff1b;一个高安全性的数据平台&#xff0c;每…...

编程新知 2026/3/30 15:16:43

解锁旧Mac新生命：技术伙伴如何突破苹果限制

解锁旧Mac新生命&#xff1a;技术伙伴如何突破苹果限制 【免费下载链接】OpenCore-Legacy-Patcher 体验与之前一样的macOS 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 你是否曾想过&#xff0c;那些被苹果官方"抛弃"的老旧Ma…...

编程新知 2026/3/30 15:02:40

从零开始：在VMware虚拟机中部署Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF进行开发测试

从零开始&#xff1a;在VMware虚拟机中部署Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF进行开发测试 1. 准备工作与环境搭建 在开始之前&#xff0c;我们需要准备好必要的软件和资源。首先确保你的主机系统满足以下要求&#xff1a; 至少16GB内存&#xff08;推荐…...

编程新知 2026/3/30 14:20:04

出国旅行手机没信号？Nrfr免Root工具一键解锁全球网络

出国旅行手机没信号&#xff1f;Nrfr免Root工具一键解锁全球网络 【免费下载链接】Nrfr &#x1f30d; 免 Root 的 SIM 卡国家码修改工具 | 解决国际漫游时的兼容性问题&#xff0c;帮助使用海外 SIM 卡获得更好的本地化体验&#xff0c;解锁运营商限制&#xff0c;突破区域限制…...

编程新知 2026/3/30 13:51:20

PyArmor解包终极指南：3种高效逆向分析技巧快速掌握代码解密核心技术

PyArmor解包终极指南&#xff1a;3种高效逆向分析技巧快速掌握代码解密核心技术 【免费下载链接】PyArmor-Unpacker A deobfuscator for PyArmor. 项目地址: https://gitcode.com/gh_mirrors/py/PyArmor-Unpacker PyArmor-Unpacker是一个专为Python开发者和安全研究人员…...

编程新知 2026/3/30 13:33:02

美图靠AI一年收入38亿，不靠免费大模型API，靠的是什么？

财报数据显示&#xff0c;美图2025年全年实现营业收入38.6亿元&#xff0c;同比大幅增长28.8%&#xff0c;整体营收规模再创新高&#xff0c;展现出核心业务的强劲增长韧性。不过公司常规账面净利润为7亿元&#xff0c;同比下降12.7%&#xff0c;看似利润下滑的背后&#xff0c…...

编程新知 2026/3/30 13:22:52

5分钟轻松掌握：Magisk让Android手机获得超能力的终极指南

5分钟轻松掌握&#xff1a;Magisk让Android手机获得超能力的终极指南 【免费下载链接】Magisk The Magic Mask for Android 项目地址: https://gitcode.com/GitHub_Trending/ma/Magisk 如果你想让自己的Android手机变得更强大、更自由&#xff0c;Magisk绝对是你不可错过…...

编程新知 2026/3/30 12:54:22

互联网一线大厂最新版 Java面试八股文（含答案，万字总结，精心打磨，建议收藏）

Java 面试 Java 面试随着时间的改变而改变。在过去的日子里&#xff0c;当你知道 String 和 StringBuilder 的区别就能让你直接进入第二轮面试&#xff0c;但是现在问题变得越来越高级&#xff0c;面试官问的问题也更深入。 在我初入职场的时候&#xff0c;类似于 Vector 与 A…...

编程新知 2026/3/30 12:42:17

别再只调API了！用Langchain4j的RAG功能，5分钟给你的Java应用加上专属知识库

用Langchain4j的RAG功能为Java应用快速构建智能知识库 在当今信息爆炸的时代&#xff0c;企业内部的文档资料往往分散在各个角落&#xff0c;员工需要花费大量时间查找相关信息。传统的全文检索方式虽然能解决部分问题&#xff0c;但当用户用自然语言提问时&#xff0c;往往难…...

编程新知 2026/3/30 11:15:40

从手机照片同步到数据去重：用C++ STL set/map搞定‘两个数组交集’背后的真实业务逻辑

从手机照片同步到数据去重&#xff1a;用C STL set/map搞定‘两个数组交集’背后的真实业务逻辑 每次换新手机时&#xff0c;最头疼的莫过于照片和联系人的迁移——那些重复的截图、相似的风景照、多年前的证件照&#xff0c;究竟该如何高效筛选&#xff1f;这背后隐藏的正是计…...

编程新知 2026/3/30 11:13:39