在用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. 苹果App Store审核指南中文翻译(2014.9.1更新)

    转:http://www.cocoachina.com/appstore/20140901/9500.html CocoaChina对<苹果应用商店审核指南>中文翻译最近一次更新时间为20 ...

  2. 我和Java的故事-------第1弹

    前言:兴趣是学习任何新知识最好的老师 --------------------------------------------------------------------------------- ...

  3. 重学JAVA基础(六):多线程的同步

    1.synchronized关键字 /** * 同步关键字 * @author tomsnail * @date 2015年4月18日 下午12:12:39 */ public class SyncT ...

  4. Swift 必备开发库 (高级篇)

    1.CryptoSwift swift加密库, 支持md5,sha1,sha224,sha256... github地址: https://github.com/krzyzanowskim/Crypt ...

  5. Java httpclient请求,解决乱码问题

    public class HttpPostRequestUtil { public HttpPostRequestUtil() { } public static String post(String ...

  6. Bag标签之中的一个行代码实行中文分词实例2

    例1: 分词(返回以逗号隔开每一个词带上引號的词组.gap=",",quotes="'"或quotes='"') 单引號 <bag id=pPa ...

  7. android 自定义日历控件

    日历控件View: /** * 日历控件 功能:获得点选的日期区间 * */ public class CalendarView extends View implements View.OnTouc ...

  8. 【LeetCode】264. Ugly Number II

    Ugly Number II Write a program to find the n-th ugly number. Ugly numbers are positive numbers whose ...

  9. css 单位转换

    如今 css 的单位越来越多了,px, em, rem, 微信的小程序又出来个 rpx 可以用 less 自动生成需要的单位 但当你只是想把一个已有的页面转换成小程序时,可能更需要一个 px -> ...

  10. 命令行模式下 MYSQL导入导出.sql文件的方法

    一.MYSQL的命令行模式的设置:桌面->我的电脑->属性->环境变量->新建->PATH=“:path\mysql\bin;”其中path为MYSQL的安装路径.二.简 ...