HTML行内元素、块级元素、行内块级元素的特点与区别

元素

HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

元素分类方式

HTML 可以将元素分类方式分为行内元素、块状元素和行内块状元素三种,这三者可以通过设置display属性值实现相互转化。实现如下

#转换为行内元素
display:inline;

#转换为块状元素
display:block;

#转换为行内块状元素
display:inline-block;

元素特点

行内元素
  • 不会自动换行
  • 设置宽高无效
  • 设置margin上下方向无效,左右方向有效
  • 设置padding上下左右方向都有效

常用的元素有:span 、a、b、br、u、ur等等

行内块状元素
  • 不会自动换行
  • 可以识别宽高
  • 默认排列方式为从左到右

常用的元素有:img、input、td等

块状元素
  • 自动换行
  • 可以识别宽高
  • 设置margin和padding的上下左右均有效
  • 多个块状元素标签写在一起,默认排列方式为从上至下

常用的元素有:div、p、ul、ol、li、h1、h2等

原文地址:https://www.cnblogs.com/paul666/p/11089103.html

时间: 2024-10-07 16:35:38

HTML行内元素、块级元素、行内块级元素的特点与区别的相关文章

3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922

1.块级元素 A:特点: A.1默认显示在父标签的左上角 A.2块级元素默认占满一行(占满整个文档流) B:常见的块级元素 P   h1--h6   ul  li    ol  li   div  hr    table 2.行内元素(内联元素) A:常见的=行内元素有 a  span  img   input B:行内元素的特点 B.1 大小受到文字区域影响,不受width  height 影响 B.2 行内元素不会单独占满一行 3. 行内元素和块级元素相互转换 A:  行内元素转换成块级元素

css盒模型和块级、行内元素深入理解

一.CSS盒模型 盒模型概述 盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成.如下图所示: 内边距出现在内容区域的周围.如果在元素上添加背景,那么背景应用于元素的内容和内边距组成的区域.因此可以用内边距在内容周围创建一个隔离带,使内容不与背景混合在一起.添加边框会在内边距区域外边增加一条线.这些线可以有不同的样式和宽度,如实线.虚线.点画线.在边框外边的是外边距,外边距是透明的,一般使用它控制元

(转)html块级元素与行内元素-哪些是块级哪些是内联对象

块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P".“form"这个块元素比较特殊,它只能用来容纳其他块元素. 如 果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排.而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想 要 的位置上去.而不是每次都愚蠢的另起一行.需要指出的是,table标签也是块元素的一种,table based layout和 css based layout从一般使用者(不包括视力障碍者.盲人等

块级标签(行元素)和内联标签(行内元素)

块级标签 如果两个同样的标签写在一起,出现在不同的行上面,这种就是块级标签. 块级标签的特点: 占据整行,自带换行效果.除了div以外,一般块级标签都会有内外边距,宽度和高度. 常见的块级标签: <h1-h6></h1-h6>,<p></p>,<div></div> 块元素标签示例: <!DOCTYPE html> <html lang="en"> <head> <meta

学习总结:CSS(一)块级与行级元素特性、盒模型、层模型、BUG与BFC、浮动模型

.displayTal { width: 100%; font-size: 13px } .displayTal1 { width: 30%; height: 30px; font-size: 13px; color: #009933 } .displayTal2 { width: 40%; height: 30px; font-size: 13px; color: #009933 } .displayTal3 { width: 30%; height: 30px; font-size: 13p

block(块级元素)和 inline(内联元素) 的区别

<td style="word-break:break-all"> 强制换行 <td  style="width:80px;display:block;boverflow: hidden;">超出隐藏,注意要设置宽度. 内联转化为块状:display:block 或 float:left / right 块状转化为内联:display:inline; 但是要注意内联元素是不能设置宽度和高度的.那就要强制把内联元素转换为块级元素了 div这样的

HTML中为何p标签内不可包含div标签?那哪些块元素里面不能放哪些块元素呢?

先看下面的例子你就能明白两者的差别: <p>测试一下块元素与<span>内联元素</span>的差别</p> <p>测试一下<div>块元素</div>与内联元素的差别</p> 在上面的例子中,<div>会自己产生一个新的行,而<span>并没有换行,这是在没有CSS渲染的情况下才这样,同样,我们也可以通过CSS把div定义成内联元素,把span定义成块元素,但是,我们却不能在HTML里

html块标签与行内标签(超有用)

转自:http://blog.csdn.net/yuyanqiao/article/details/8558118 块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P".“form"这个块元素比较特殊,它只能用来容纳其他块元素. 如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排.而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要 的位置上去.而不是每次都愚蠢的另起一行.需要指出的是,table标签也是块元素的一种

内嵌元素、块元素、内联块的区分以及内嵌元素的问题

那么什么是块元素,什么是内嵌元素他们都有什么特征呢请看下面的代码? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 一.块的特征 1.默认独占一行 2.没有宽度时,默认撑满一排 3.支持所有css命令 1.无默认样式: <div ><nav><section><head

jquary根据td中按钮的元素属性删除tr行(删选出想删除的行)

删除没有蓝色按钮的行. <html> <tr> <td>凉山彝族自治州分行</td> <td>管理网</td> <td>离行式ATM</td> <td class="text-center">MSTP</td> <td>西昌市西客站航天阳光</td> <td class="text-center">建设中<