在用CSS布局页面的时候,我们会将HTML标签分成两种,块状元素和内联元素(我们平常用到的div和p就是块状元素,链接标签a就是内联元素)

块状元素
一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(height)起作用。常见块状元素为div和p。

内联元素
内联元素只能容纳文本或者其他内联元素,它允许其他内联元素与其位于同一行,但宽度(width)高度(height)不起作用。常见内联元素为“a”

  块状元素 内联元素
是否允许其他元素同处一行 no yes
width和height是否起作用 yes no

块元素(block element)包括:
address - 地址
blockquote - 块引用
center - 举中对齐块
dir - 目录列表
div - 常用块级容易,也是CSS layout的主要标签
dl - 定义列表
fieldset - form控制组
form - 交互表单
h1 - 大标题
h2 - 副标题
h3 - 3级标题
h4 - 4级标题
h5 - 5级标题
h6 - 6级标题
hr - 水平分隔线
isindex - input prompt
menu - 菜单列表
noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
ol - 排序表单
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表

内联元素(inline element)包括
a - 锚点
abbr - 缩写
acronym - 首字
b - 粗体(不推荐)
bdo - bidi override
big - 大字体
br - 换行
cite - 引用
code - 计算机代码(在引用源码的时候需要)
dfn - 定义字段
em - 强调
font - 字体设定(不推荐)
i - 斜体
img - 图片
input - 输入框
kbd - 定义键盘文本
label - 表格标签
q - 短引用
s - 中划线(不推荐)
samp - 定义范例计算机代码
select - 项目选择
small - 小字体文本
span - 常用内联容器,定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线
var - 定义变量

* 块状元素 和 内联元素 相互转化

块状元素转化为内联元素:css设置display:inline ;

内联元素转化为块状元素:css设置display:block ;

例子:

CSS 块状元素和内联元素的更多相关文章

  1. Css中的两个重要概念:块状元素和内联元素

    一.display:block display:block就是将元素显示为块级元素,一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(he ...

  2. CSS 块状元素和内联元素的详解

    我们先来分析一下块级元素.内联级元素的定义和解析:  块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P&q ...

  3. CSS - 块状元素、内联元素和内联块状元素

    在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素(block).内联元素(又叫行内元素,inline)和内联块状元素(inline-block). 1. 常用的块状元素有: < ...

  4. html标签分两种:块状元素和内联元素

      块状元素一般是其它元素的容器,可以容纳内联元素和其它块状元素,独占一行,宽度和高度起作用.如div,p等标签属于块状元素.     内联元素只能容纳文本和其它内联元素,可与其它内联元素位于同一行, ...

  5. css position, display, float 内联元素、块级元素

    position属性:position属性指出一个元素的定位方法.有4种可能值:static, relative, absolute or fixed: static:默认值,元素按照在文档流中出现的 ...

  6. 【CSS3】---块状元素、内联元素(又叫行内元素)和内联块状元素

    元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1&g ...

  7. htmlt中的块状元素与内联元素

    块元素(block element) address - 地址 blockquote - 块引用 center - 举中对齐块 dir - 目录列表 div - 常用块级容易,也是CSS layout ...

  8. html块状元素、内联元素

    html块状元素.内联元素 原文在这 块级元素的分类 块级元素按照其应用于结构还是内容分为三种:结构化块状元素,终端块状元素,多目标块状元素. 一.结构化块状元素 这类元素用于构造文档的结构,一个好的 ...

  9. 【HTML入门】Html中块状元素和内联元素解析

    [HTML入门]Html中块状元素和内联元素解析 块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,内联元素(inline elem ...

随机推荐

  1. 深入理解HTML5:语义、标准与样式(勇猛精进早登大师殿堂创最优品质交互)

    深入理解HTML5:语义.标准与样式(勇猛精进早登大师殿堂创最优品质交互) [美]布拉德福(Bradford,A.) [美]海涅(Haine,P.)著 高京译 ISBN 978-7-121-20552 ...

  2. 从头学Android之Android布局管理:LinerLayout线性布局

    LinerLayout线性布局: 这种布局方式是指在这个里面的控件元素显线性,我们可以通过setOrientation(int orientation)来指定线性布局的显示方式,其值有:HORIZON ...

  3. 三、oracle 体系结构

    1.oracle内存由SGA+PGA所构成 2.oracle数据库体系结构数据库的体系结构是指数据库的组成.工作过程与原理,以及数据在数据库中的组织与管理机制. oracle工作原理: 1).在数据库 ...

  4. CGI综述

    参考: 详说fastcgi,php-fpm的区别:http://segmentfault.com/q/1010000000256516 什么是CGI.FastCGI.PHP-CGI.PHP-FPM.S ...

  5. Android UI系列-----EditText和AutoCompleteTextView

    在这篇随笔里将主要讲解一下EditText和AutoCompleteTextView这个控件 1.EditText 首先我们先简单来说说EditText这个控件,这个就相当于我们平常web开发中的文本 ...

  6. [Aaronyang] 写给自己的WPF4.5 笔记24 [与winform交互-flash-DEMO-收尾篇1/6]

      =====潇洒的版权线======www.ayjs.net===== Aaronyang ===== AY ====== 安徽 六安 杨洋 ======   未经允许不许转载 ====== 1.新 ...

  7. Android Audio控制和MediaButton远程控制(音视频控制配合)

    使用过Android系统的朋友应该都知道,Android里面声音是区分好几种情况,每种情况下的音频大小是独立的.也就是说你调节了电话铃声大小不会影响多媒体播放的声音大小.这个涉及了AudioStrea ...

  8. C# Activex开发、打包、签名、发布 C# Activex开发、打包、签名、发布 [转]

    C# Activex开发.打包.签名.发布 2013-06-22 12:01:20 浏览:3823 一.前言 最近有这样一个需求,需要在网页上面启动客户端的软件,软件之间的通信.调用,单单依靠HTML ...

  9. eclipse连接远程hadoop集群开发时权限不足问题解决方案

    转自:http://blog.csdn.net/shan9liang/article/details/9734693 eclipse连接远程hadoop集群开发时报错   Exception in t ...

  10. [转] Linux学习之CentOS(三十六)--FTP服务原理及vsfptd的安装、配置

    本篇随笔将讲解FTP服务的原理以及vsfptd这个最常用的FTP服务程序的安装与配置... 一.FTP服务原理 FTP(File Transfer Protocol)是一个非常古老并且应用十分广泛的文 ...