元素

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等

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

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

    1.块级元素 A:特点: A.1默认显示在父标签的左上角 A.2块级元素默认占满一行(占满整个文档流) B:常见的块级元素 P   h1--h6   ul  li    ol  li   div  h ...

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

    盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...

  3. 块级元素或者行内元素在设置float属性之后是否改变元素的性质?

    块级元素使用float属性后,将其属性变成inline-block,不能改变其块级元素的性质,只是能有块级元素的特性,不独占一行,宽度不会占满父元素,和行内元素排列成一行 行内元素使用float属性后 ...

  4. block与inline,inline和inline-block,块级和行内元素,行内替换和行内非替换元素

    block:块级元素默认display属性为block:无论块内内容有多少,总是占满一行: inline:行内元素默认display属性为inline:只占据块内的内容的大小,不会占满一整行: inl ...

  5. 行内元素有哪些?块级元素有哪些?空(void)元素有哪些?

    CSS规范规定,每个元素都有display属性,确定该元素的类型.每个元素都有默认的display值,如div的display默认值为“block”,则为“块级”元素:span默认display属性值 ...

  6. css盒子模型的深入理解,在块级、行内元素的区别和特性

    css盒子模型用于处理元素的内容.内边距.边框和外边距的方式简称.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的 ...

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

    一.元素的块级与行级特性 在CSS属性display控制元素是否及如何显示的特性,常用的值有none.inline.block.inline-block,在CSS3中还有一些新的特性状态,在这里不做讨 ...

  8. HTML块级、行级元素,特殊字符,嵌套规则

    如果介绍HTML网页基本标签的嵌套规则,首先要说的就是元素的分类.元素可以划分为块级元素和行级元素,块级元素是什么?它可以独占一行,可以设置宽高度,默认是100%:行级元素与之相反,它的内容决定它的宽 ...

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

    block(块级元素)和 inline(内联元素) 的区别 (2009-01-05 10:32:07) 转载▼ 标签: 杂谈 分类: div+css div这样的块级元素,就会自动占据一定矩形空间,可 ...

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

    先看下面的例子你就能明白两者的差别: <p>测试一下块元素与<span>内联元素</span>的差别</p> <p>测试一下<div& ...

随机推荐

  1. 1 WCF 一个基础理论 以及如何实现一个简单wcf服务

    1 SOA : service oriented architecture 面向服务的架构 2 web service标准 3 概念理解图 4 WCF类库 项目的 wcf简单实现 首先创建一个简单的w ...

  2. UITextField设置leftView的Insets

    Insets就是css中的padding 我们给UITextField设置了leftView,目的是在文本输入框左側显示一个图标.可是在ios7里,这个图标会紧紧地挨着TextField的左边框,非常 ...

  3. 将指定路径下的所有SVG文件导出成PNG等格式的图片(缩略图或原图大小)

    原文:将指定路径下的所有SVG文件导出成PNG等格式的图片(缩略图或原图大小) WPF的XAML文档(Main.xaml): <Window x:Class="SVG2Image.Ma ...

  4. Linux性能测试 sar命令

    sar命令包含在sysstat工具包中,提供系统的众多统计数据.其在不同的系统上命令有些差异 sar 命令行的常用格式: [root@C44 ~]# sar sysstat version (C) S ...

  5. Swift 开源那点事儿

    最近各大网站上最喜大普奔的新闻莫过于 Swift 正式开源这条了.这无疑是一个里程碑式的前进,苹果也向开源社区更加进了一步.那么 Swift 开源后有什么具体的改变呢,我们一一道来. 成立开源社区 s ...

  6. MultiBinding

    <StackPanel> <Slider x:Name="sl1" Minimum="10" Maximum="100"/ ...

  7. 通通WPF随笔(3)——艺术二维码素材生成器

    原文:通通WPF随笔(3)--艺术二维码素材生成器 最近公司让我开发一个条形码的生成控件,花了半天时间搞定觉得不过瘾,什么年代了该用二维码了吧.于是wiki了一下二维码的资料. 比较常见的就是QR码( ...

  8. C# WebClient的使用

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  9. Win8 Metro(C#)数字图像处理--2.74图像凸包计算

    原文:Win8 Metro(C#)数字图像处理--2.74图像凸包计算 /// <summary> /// Convex Hull compute. /// </summary> ...

  10. 恢复Win10照片查看器

    批处理文件: @echo off&cd\&color 0a&cls echo 恢复Win10照片查看器 reg add "HKLM\SOFTWARE\Microsof ...