块级元素和内联元素

最新推荐文章于 2025-03-12 13:24:30 发布

门槛

最新推荐文章于 2025-03-12 13:24:30 发布

阅读量530

点赞数

CC 4.0 BY-SA版权

分类专栏： html+css

本文链接：https://blog.youkuaiyun.com/phpdadao/article/details/25808133

html+css 专栏收录该内容

14 篇文章

订阅专栏

	是否独占一行	是否能设宽高	竖直方向的margin，padding
块级元素	是	是	有，可以设置
内联元素	否	否	没有，也不可以设置

相比于块状的盒子模型，如何理解内联元素？

可以把内联元素当成有弹性的橡皮筋来看。内联元素又称为“行内元素”。

内联元素和块状并不是完全无关的东西，可以相互转换

可以通过display属性来设置：

display:block;强制生命某元素为块状元素。
display:inline;强制声明为内联元素。
display:none;压根不显示，设置之后该元素和该元素的子元素不显示，等同于这段代码被删除的效果，压根不显示。

摘自：十八哥

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

门槛

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS开发基础——块级元素和内联元素

miao_9的博客

01-14

1334

CSS开发基础——块级元素和内联元素HTML 的元素可以分为两种： 块级元素（block level element） 内联元素（inline element 有的人也叫它行内元素）两者的区别： 1、内联元素会在一条直线上排列（都是同一行的水平方向排列）； 2、块级元素各占据一行（即无法与其他元素显示在同一行内，除非你显式修改元素的 display 属性）； 3、块级元素可以包含行内元素和块

HTML基础-块级元素与内联元素

zevjay的博客

06-06

1483

块级元素在页面中独占一行，其宽度默认为100%，可以设置宽高，并且会自动换行。常见的块级元素包括至等。这些元素通常用于组织和布局网页结构。理解并熟练掌握块级元素与内联元素的特性和使用，是每一位前端开发者的基本功。正确的元素选择和样式控制不仅能够提升网页的语义化和可访问性，还能让布局更加灵活高效。通过实践和不断学习，我们可以避免常见的布局陷阱，构建出既美观又功能强大的网页。

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

行内元素和块级元素

natalie86的专栏

01-10

707

1 块级元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table 行内元素：span, strong, em, br, img , input, label, select, textarea, cite,

内联元素和块级元素

baozhe的专栏

11-18

833

内联元素和块级元素 html标签分为两种，内联元素和块级元素，首先我们先了解一下内联元素和块级元素的概念： 块级元素 一般是其它元素的容器，可容纳内联元素和其它块级元素，块级元素排斥其它元素与其位于同一行，可设置宽度(width)高度(height)属性，正常流中的块级元素会垂直摆放。常见块状元素为“div” 内联元素（行内元素） 内联元素只能容纳文本或者其他内联元素，是块级元素的后代，

内联元素（inline）和块级元素（block）

W1948730080的博客

06-04

1301

作为初学习web的小白，我被这个内联元素和块级元素难到过，现在我把它们总结一下内联元素（inline）顾名思义，内联元素就是内部的元素，它总是呆在各元素的之中，如<a>，<b>，</br>都是我们常用的内联元素，内联元素...

内联元素(inline)和块级元素(block)

Smallbo's Note

10-25

1635

常见的内联元素(inline)和块级元素(block)内联元素(inline)：a – 锚点 abbr – 缩写 acronym – 首字 b – 粗体(不推荐) big – 大字体 br – 换行 cite – 引用 code – 计算机代码(在引用源码的时候需要) dfn – 定义字段 em – 强调 font – 字体设定(不推荐) i – 斜体 img – 图片 i

块级元素、内联元素、内联块级元素的比较

wuhuagu_wuhuaguo的博客

07-07

649

块级元素、内联元素、内联块级元素 1、级元素水平拉伸，垂直包裹。可以设置 width, height属性。块级元素会独占一行，其宽度自动填满其父元素宽度，块级元素即使设置了宽度，仍然是独占一行的。 内联元素自动包裹，水平和垂直方向会自动包裹至内容的宽度。设置width, height无效。不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化。 2

块级元素和内联元素及可变元素汇总

09-28

理解块级元素和内联元素的概念对于编写高效、结构化的HTML代码至关重要。在实际开发中，开发者经常通过CSS来调整元素的显示方式，比如将内联元素转换为块级元素，或者让块级元素在一行内显示，以此来实现复杂的布局...

HTML块级元素和内联元素（简单易懂）

热门推荐

初学者的博客

09-10

3万+

1.内联元素(inline)： a – 锚点 abbr – 缩写 b – 粗体(不推荐) big – 大字体 br – 换行 cite – 引用 code – 计算机代码(在引用源码的时候需要) em – 强调 font – 字体设定(不推荐) i – 斜体 img – 图片 input – 输入框 kbd – 定义键盘文本 label – 表格标签 q – 短引用 span – 常...

内联元素和块级元素之间的转换

weixin_43694639的博客

04-01

3293

内联元素和块级元素之间的转换方法：比如，我们完全可以把内联元素加上display:block这样的属性，让它也有每次都从新行开始的属性，即成为块元素同样我们可以把块元素加上display:inline这样的属性，让它也在一行上排列。知识拓展一、内联元素又名行内元素(inline element)，和其对应的是块元素(block element) 内联元素的特点： 1、和其他元素都在一行上； ...

内联元素内放入块级元素会出现什么情况呢？

南北北南的博客

08-30

992

我们知道元素可分为块级元素和内联元素，也知道块级元素内既可以嵌套内联元素也可以嵌套块级元素，但是内联元素就只能嵌套内联元素，不可以嵌套块级元素，当然表格下的tr除外，那么如果违反了规定会出现什么样的效果呢？？代码如下所示  <div> 这是块级元素 <div style="width: 200px...

html中内联元素和块级元素的区别

weixin_30471065的博客

02-21

896

1.下表列出了内联元素和块级元素的主要区别 html中内联元素和块级元素的区别 块级元素 行内元素独占一行,默认情况下，其宽度自动填满其父元素宽度相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化可以设置width，height属性行内元素设置width，height属性无效可以设置margin和paddin...

块级元素、行级（内联）元素、内联块元素的区别

ruanhao1203的专栏

03-08

7431

块级元素(block)特性：总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;内联元素(inline)特性：和相邻的内联元素在同一行;宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bo...

第二章网站开发基础之HTML教程 - 二、常用HTML标签：object，向网页插入对象（内联元素）；embed，向网页插入插件（内联元素）

陈子的专栏

04-08

742

19.object，向网页插入对象（内联元素）；embed，向网页插入插件（内联元素） <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>object标签</title&...

清除css的display属性

大道至简，开发由我！

04-03

1万+

今天在项目中遇到了一个要清除display属性的问题，整了半天才搞好，给大家分享一下。 var b=$(obj).attr(‘id’); var a=document.getElementsByName(b); for(var i=0;i<a.length;i++) { if(a[i].style.display==’none’){ a[i].style.display=”; }else

form表单使用onsubmit但return false后仍然提交的解决办法？

大道至简，开发由我！

04-04

7296

以前在项目中为一个表单（from）编写onsubmit()脚本的时候，经常需要验证表单中数据的合法性，所以常会写道：，试图在validateForm()中return false来阻止表单的提交。实际上的效果是即使return false 表单还是会提交。后来发现 onsubmit=”return validateForm()”就没有问题了，当时也没有多想就继续做其它事情了。直到今天看

衬线字体和无衬线字体

大道至简，开发由我！

05-14

3237

在字体排印学里，衬线指的是字母结构笔画之外的装饰性笔画。有衬线的字体叫衬线体（serif）；没有衬线的字体，则叫做无衬线体（sans-serif）。

IE（6-8）不支持opacity：0；透明度的解决方法

大道至简，开发由我！

11-29

2642

最近在项目中遇到，在IE9下，opacity:0;管用，但是在IE8、IE7下却不管用，在网上找了一下资料，原来IE6-8不支持opacity透明度，解决办法就是在css中加上这句话：filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);

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

04-26

块级元素和内联元素是HTML中常用的两种元素类型，它们在布局和显示上有一些区别。 1. 块级元素： - 块级元素的宽度默认是父元素的100%。 - 块级元素可以设置宽度、高度、内外边距等属性。 - 常见的块级元素有`<div>`、`<p>`、`<h1>`~`<h6>`等。 2. 内联元素： - 内联元素不会独占一行，可以与其他元素在同一行显示。 - 内联元素的宽度由内容决定，无法设置宽度、高度等属性。 - 内联元素的内外边距只会影响元素之间的间距，不会改变元素本身的大小。 - 常见的内联元素有`<span>`、`<a>`、`<strong>`、`<em>`等。总结： 块级元素和内联元素的主要区别在于它们的显示方式和布局特性。块级元素会独占一行，可以设置宽度、高度等属性；而内联元素可以与其他元素在同一行显示，宽度由内容决定，无法设置宽度、高度等属性。