CSS 的块级元素和行内元素

previewfile_1658340036

CSS 的块级元素和行内元素

常见的块级元素:h1 - h6pdivulolli
常见的行内元素:astrongbemispan

块级元素的特点

  • 独占一行
  • 高度, 宽度, 内外边距, 行高都可以控制.
  • 宽度默认是和父元素一样宽
  • 是一个容器(盒子), 里面可以放行内和块级元素

注:文字类的元素内不能使用块级元素,例子p标签主要用于存放文字, 内部不能放块级元素, 比如div标签

行内元素的特点

  • 不独占一行,一行可以显示多个
  • 无法设置高度,宽度,行高
  • 左右外边距有效(上下无效),内边距有效
  • 默认宽度就是本身的内容
  • 行内元素通常只能容纳文本和其他行内元素,不能放块级元素

注:a 标签中不能再放 a 标签;a标签是行内元素,但是可以放块级元素,不过更建议先把 a 转换成块级元素

行内元素和块级元素的区别

  1. 块级元素独占一行,行内元素不独占一行
  2. 块级元素可以设置宽高,行内元素不能设置宽高
  3. 块级元素四个方向都能设置内外边距,行内元素垂直方向不能设置

行内元素和块级元素的相互转化

使用display属性进行修改,可以把div等块级元素变成行内元素,也可以把 a ,span等变成块级元素

display: block; 将行内元素改成块级元素(常用)
display: inline; 将块级元素改成行内元素(几乎不用)
display: inline-block; 将选中元素改成行内块元素

示例代码

a标签行内元素改成块级元素

image-20240225135656111

运行效果
更改前效果:
image-20240225135831995

更改后效果:
image-20240225135914232


margin: auto;块级元素水平居中
text-align: center; 是让行内元素或者行内块元素居中的

去除浏览器默认样式,保证代码在不同的浏览器上都能按照统一的样式显示

* {marign: 0;padding: 0;
}

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

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

相关文章

Java读取文件

读取文件为String 、访问链接直接跳转html 环境:SpringMVC 、前端jsp InputStreamReader FileInputStream fileInputStream new FileInputStream(formatFile.getHtmlpath());InputStreamReader reader new InputStreamReader(fileInputStream, StandardCharsets…

【Spring】spring中怎么解决循环依赖的问题

🍎个人博客:个人主页 🏆个人专栏:Spring ⛳️ 功不唐捐,玉汝于成 目录 前言 正文 解决步骤 考虑 结语 我的其他博客 前言 在软件开发中,依赖注入是一种常见的设计模式,它可以帮助我们管…

寻找入侵者-攻防世界MISC

题目:黑客使用无线钓鱼攻击一个SSID为“CyberPeace”的热点,但是我们的蜜罐系统捕获了他的数据包,并且已经得知他的握手包密码就是他的网卡地址。可是根据我们最新获得的情况,他又发送重连请求的Malformat Frame试图崩溃我们的无线…

动手学深度学习—循环神经网络RNN

循环神经网络 1. 序列模型 1.1 马尔可夫模型 假设已知 τ τ τ个序列预测下一个或下几个数据(假设当前数据只跟前 τ τ τ个数据有关) 1.2 潜变量模型 假设一个潜变量h h t h_t ht​来表示过去信息 h t f ( x 1 , x 2 , . . . , x t − 1 ) h_…

javascript中的class基础入门(1)

javascript中的class start 最近在学习:cocos ,准备自己制作小游戏。过程中遇到不少疑问,我计划将这些疑问写成一个系列博客,用以记录。这篇文章来了解 class 1. 前言 1. 前言 本文对应版本 Cocos Creator 3.8。Cocos Creato…

MongoDB聚合运算符:$count

文章目录 语法使用举例在$group阶段中使用在$setWindowFields阶段使用 $count聚合运算符返回分组中文档的数量。从5.0开始支持。 语法 { $count: { } }$count不需要参数 使用 $count可以用于下列聚合阶段: $bucket$bucket$group$setWindowFields 在$group阶段中…

Mamba与MoE架构强强联合,Mamba-MoE高效提升LLM计算效率和可扩展性

论文题目: MoE-Mamba: Efficient Selective State Space Models with Mixture of Experts 论文链接: https://arxiv.org/abs/2401.04081 代码仓库: GitHub - llm-random/llm-random 作为大型语言模型(LLM)基础架构的后…

【六袆 - React】Next.js:React 开发框架;Next.js开发框架的特点

Next.js:React 开发框架 Next.js的特点 1.直观的、基于页面的路由系统(并支持动态路由) Next.js 提供了基于文件系统的路由,意味着你可以通过创建页面文件来定义路由。 伪代码示例: // pages/index.js export defa…

【MySQL】复合查询(重点)-- 详解

一、基本查询练习回顾 1、查询工资高于 500 或岗位为 MANAGER 的雇员,同时还要满足他们的姓名首字母为大写的 J 2、按照部门号升序而雇员的工资降序排序 3、使用年薪进行降序排序 4、显示工资最高的员工的名字和工作岗位 5、显示工资高于平均工资的员工信息 6、显…

CentOS系统上安装幻兽帕鲁/Palworld服务端的详细步骤是什么?

CentOS系统上安装幻兽帕鲁/Palworld服务端的详细步骤是什么? 首先,需要确认Docker是否已经安装。如果未安装,则需要进行安装。接下来,运行Docker容器。这一步是为了创建一个可以运行幻兽帕鲁服务端的环境。然后,在容器…

Yii2中如何使用scenario场景,使rules按不同运用进行字段验证

Yii2中如何使用scenario场景,使rules按不同运用进行字段验证 当创建news新闻form表单时: 添加新闻的时候执行create动作。 必填字段:title-标题,picture-图片,description-描述。 这时候在model里News.php下rules规则…

公钥密码体制

公钥密码体制 一个系统中,n个用户之间要进行保密通信,为了确保安全性,两两用户之间的密钥不能一样。这种方式下,需要系统提供C2 nn(n-1)/2把共享密钥。这样密钥的数量就大幅增加了,随之而来的产生、存储、分配、管理密…