html+css 行级元素，块级元素

最新推荐文章于 2025-02-18 18:39:10 发布

嫌疑-人

最新推荐文章于 2025-02-18 18:39:10 发布

阅读量427

点赞数

分类专栏： html+css 文章标签： html css block inline

本文链接：https://blog.youkuaiyun.com/qq_39396275/article/details/81162323

版权

html+css 专栏收录该内容

12 篇文章

订阅专栏

伪选择器：hover

行级元素（内联元素）

feature：1.内容决定所站位置
2.不可以通过css改变宽高
代码：display：inline
代表元素：span strong em a del

块级元素

feature：1.独占一行
2.可以通过css改变宽高
代码：display：block
代表元素：div p ul li ol form address

行级块元素

feature：1.内容决定所站位置
2.可以通过css改变宽高
代码：display：inline-block
代表元素：img

开发中的小问题：
四张图片一行排列，中间会有空隙4px

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style type="text/css">
        img{
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
<div>
    <img src="a.png" alt="">
    <img src="a.png" alt="">
    <img src="a.png" alt="">
    <img src="a.png" alt="">
</div>
</body>
</html>

这里写图片描述

触发问题原因：凡带有 inline的元素都有文字特性-4px的间隙
解决办法：去掉每个< img / >间的空格，不换行，排成一行

<img src="a.png" alt=""><img src="a.png" alt=""><img src="a.png" alt=""><img src="a.png" alt="">

这里写图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

嫌疑-人

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

HTML 元素类型介绍

licy__的博客

11-23

1298

行内块级元素结合了块级元素和行级元素的特性。它们在同一行显示，但可以设置宽度和高度，且内部可以包含块级元素。行级元素在同一行显示，通常用于定义文本中的特定部分。块级元素在页面中独占一行，通常用于定义较大的结构。表格相关元素用于创建和管理表格数据。列表相关元素用于创建有序和无序列表。表单相关元素用于创建用户输入表单。

前端-HTML/CSS-元素宽高特点及元素类型转换-块级元素、行级元素、行内块级元素

zx237964689的博客

05-28

2314

1、块级元素:（1）、可以设置宽高（2）、不可以与其他元素待在一行（3）、不设置宽高时，元素的宽度等于父元素的宽，高度由元素内容的高度决定（4）、当设置有宽高时，元素的宽高就是设置的值2、行级元素：（1）、不可以设置宽高，设置的宽高无效（2）、可以与其他元素待在一行（3）、元素的宽高由元素内容的宽高决定3、行内块级元素：（1）、可以设置宽高（2）、可以与其他元素待在一行（3）、当没有设置宽高时，宽高由元素内容决定。

参与评论您还未登录，请先登录后发表或查看评论

CSS块级元素和行级元素

dexing07的博客

04-14

775

根据规定，每个网页元素都会存在display属性，其中像div,存在的默认值为”block”属性的即为块级元素 ; 而”span”元素的默认值为”inline”，称为“行内元素”。 “div”这样的块级元素，可以通过高度，宽度，内外边距等属性来调整矩形的样子；与之相反的是“span”这样的行内元素，则没有独立的空间，需要依附于块级元素，因此对行内元素设置高度，宽度，内外边距等属性都是无效的。如

HTML基础01：元素分类与常见标签详解

最新发布

m0_56423815的博客

02-18

488

作为HTML小白，理解元素分类和常见标签是入门的关键。HTML元素主要分为块级元素、行块级元素（也叫行内块元素）和行级元素（也叫行内元素），它们各自有着独特的显示和属性设置特点。

CSS中的块级元素与行级元素

donghuleng4991的博客

03-10

183

最近初学CSS时对块级元素与行级元素有时会产生混淆，写篇博客记录一下自己对其的理解。先从概念上来看： 块级元素 特点：1.每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。　　　2.元素的高度、宽度、行高和顶底边距都是可以设置的。　　　　　3.元素的宽度如果不设置的话，默认为父元素的宽度。常见的块级元素：<div>、<p&...

HTML行级元素

m0_65037354的博客

12-05

212

用于对文本进行分组或添加样式。

块级元素（HTML、CSS）

...

08-09

156

块级元素（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>块级元素</title> <style> div {

CSS块级元素与行级元素详解

09-27

在CSS布局中，块级元素（Block-level Elements）和行级元素（Inline Elements）是两种基本的元素类型，它们在HTML文档结构中扮演着至关重要的角色。了解它们的区别和使用方式是创建有效网页布局的基础。 块级元素...

CSS块级与行级标签以及float浮动

weixin_53598426的博客

05-22

577

本章主要分享有关于CSS的块级元素、行级元素的使用，以及float浮动的使用、对于浮动带来的影响如何去解决的一系列方法

关于css 行元素和块元素相互转换居中

12-13

一、块级元素 行内元素 div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。您...

行级元素变为块级元素

ztt0918的博客

05-13

2247

html> html lang="en"> head> meta charset="UTF-8"> title>title> style> img{ /*行级元素变为块级元素*/ display: block; height: 350px; width: 350p

行级元素和块级元素

笑释一切的博客

10-20

678

块级元素具有以下特点：（1）总是在新行上开始，占据一整行；（2）高度、行高以及外边距和内边距都可以控制（3）宽度始终是和浏览器宽度一样（4）它可以容纳内联元素和其它块元素行元素的特点：（1）和其它元素都在一行上（2）内联元素不可以设置宽和高，垂直的margin和padding （3）宽度只与内容有关（4）行元素只能容纳文本或者其它行内元素 |

HTML行级元素、块级元素

LWD_XST的博客

10-10

2189

HTML的行级，块级，行内块元素行级元素、内联元素（inline）行级元素特点：内容决定元素所占位置，不可以直接通过css改变它的宽高。常用的行级元素有span、strong、em、a、del、label、input等；注意凡是带有inline的元素都具有文字特性。 块级元素（block） **块级元素特点：**独占一行，可以直接通过css改变宽高。常用的块级元素有div、p、ul、ol...

HTML行内元素/行级元素/内联元素/行标签/内联标签/行内标签/行元素

liaowenxiong的博客

07-03

2890

文章目录行内元素的特点行内元素清单可变元素素列表 inline element. 也叫行级元素、内联元素。行内元素默认设置宽度是不起作用，需设置 display:inline-block 或者 block 才行。行内元素的特点可以和其他元素处于一行，不用必须另起一行；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字、图片的宽度，不可改变；对 margin 仅设置左右方向有效，上下无效； padding设置上下左右都有效，即会撑大空间；行内元素尺寸由内

HTML中的行级元素（常用整理）

weixin_46726346的博客

08-04

3592

上一篇说了HTML的块级元素，这一篇说几个常用的行级元素。首先说一下行级元素是什么意思。和相邻的行级元素在同一行，宽度、高度、内边距和外边距的都不可改变。就是不能设置宽高，并且大小由内容撑开。一、链接 HTML 超链接（链接）超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。我们通过使用a标签在 HTML 中创建链接。有两种使用a标签的方式：通过使用 href

CSS中的块级元素、行内元素和行内块级元素

Manson_Wang的博客

12-06

1143

由于不同的元素显示的方式是不同的，有的是一个元素占据一行的，有的是多个元素占据一行的。故CSS中将元素分为块级元素、行内元素和行内块级元素三个大类。 1. 块级元素(inline) 块级元素一般可以作为其他容器使用，可容纳块级元素和行内元素，其特点如下： 块级元素可以设置宽（width）和高（height）；独占一行（float浮动除外）；元素的宽度如果不设置的话，默认为父元素的宽度...

HTML块级元素、行内元素

f126735786585288的博客

12-11

1003

行内元素：a、abbr、acronym、b、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、samp、select、small、span、s、del、strike、strong、sub、sup、textarea、tt、u、var等。块状元素转换为行内元素。行内元素转换为块状元素。

HTML元素（块级元素和行级元素）

xheartless的博客

06-03

504

一、块级元素：“独占一行”显示，通常用来当作容器使用，制作页面布局。 块级元素

关于html中的行内元素

syl2850246的博客

08-15

888

行内元素: 和相邻行内元素在一行上高宽指定无效，但水平方向上的padding和margin可以设置，垂直方向的无效默认宽度就是它本身内容的宽度行内元素只能容纳文本或则其他行内元素(a特殊) ...

vue2怎么把行级元素变成块级元素

02-09

### Vue2 中修改行内元素为块级元素的方法在 Vue2 项目中，可以通过多种方式将行内元素转换为块级元素。主要方法是在组件的模板部分应用 CSS 类或直接使用内联样式。 #### 使用类名绑定的方式推荐的做法是通过 `v-bind:class` 或者缩写形式 `:class` 来动态绑定 CSS 类： ```html <template> <div id="app">  <span :class="{ 'block-element': isBlock }">这是一个可以变成块状的 span</span> <button @click="toggleDisplay()">切换显示模式</button> </div> </template> <script> export default { data() { return { isBlock: false, }; }, methods: { toggleDisplay() { this.isBlock = !this.isBlock; } } } </script> <style scoped> .block-element { display: block; /* 将原本的行内元素转成块级 */ } /* 默认情况下保持原有特性 */ span { color: blue; } </style> ``` 上述代码展示了如何利用 Vue 的响应式数据属性 `isBlock` 控制是否给 `<span>` 添加 `.block-element` 这个类[^1]。当点击按钮触发 `toggleDisplay()` 函数时，会改变 `isBlock` 的布尔值状态，从而实现样式的切换效果。 #### 直接使用内联样式如果只需要简单地更改某个特定实例而不希望创建额外的 CSS 文件，则可以直接采用内联样式的方式来调整元素的行为： ```html <template> <div id="app">  <a v-bind:style="{display: inlineOrBlock}">链接文本</a> <button @click="changeDisplayStyle()">改变展示风格</button> </div> </template> <script> export default { data() { return { inlineOrBlock: "inline", // 初始状态下为行内元素 }; }, methods: { changeDisplayStyle() { this.inlineOrBlock = this.inlineOrBlock === "inline" ? "block" : "inline"; } } }; </script> ``` 这段例子说明了怎样借助 JavaScript 动态更新 HTML 属性中的 `style` 字段来即时改变 DOM 元素的表现形态[^2]。