在用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 ;

例子:

转载于:https://www.cnblogs.com/xiepeixing/p/4334501.html

CSS 块状元素和内联元素相关推荐

  1. html 图片是块元素吗,HTML+CSS:html元素分类之块级元素、内联元素、内联块级元素...

    原标题:HTML+CSS:html元素分类之块级元素.内联元素.内联块级元素 html元素主要分为3类,块级元素.内联元素以及内联块级元素,本篇文章我们来就详细介绍一下各个分类的含义以及对应的特点. ...

  2. php块状元素,块状元素和内联元素

    前几天写页面,搞不清楚块状元素和内联元素的区别,今天特地整理了一下, html标签分两种:块状元素和内联元素. 块状元素一般是其它元素的容器,可以容纳内联元素和其它块状元素,独占一行,宽度和高度起作用 ...

  3. html 块状元素转换,块状元素与内联元素的转换

    在布局页面的时候,HTML标签分成两种,块状元素和内联元素(我们平时用到的标签div和p就是块状元素,链接标签a就是内联元素).它们是很重要的两个概念,既然说到概念就先看看块状元素和内联元素的定义,在 ...

  4. 块状元素、内联元素(又叫行内元素)和内联块状元素

    块元素在页面中以区域块的形式出现,每个块元素都会独自占据一整行或多整行,其中<div>标记为最典型的块元素.内联元素特点是不必在新的一行开始,同时,也不强迫其他的元素在新的一行显示.一个行 ...

  5. css 块元素、内联元素、内联块元素

    元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素,了解这三种元素的特性,才能熟练的进行页面布局. 块元素: 块元素,也可以称为行元素,布局中常用的标签,如:div.p.ul.li.h ...

  6. CSS块级元素、内联元素概念

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  7. html块状元素和内联元素_HTML中的内联元素和块元素-解释

    html块状元素和内联元素 块和内联元素 (Block and Inline Elements) Let's understand block and inline elements using th ...

  8. CSS的块级元素和内联元素,以及float

    说明:之前有一点搞错了,就是float其实是浮动起来,其它元素会位于它的底层. 最近在系统地学习HTML5,感觉补上了好多缺失的知识. 例如: 锚点定位其实可以通过 id 来实现: CSS 使用 !i ...

  9. CSS之排列系列--块级元素、内联元素、内联块元素--区别/详解

    原文网址:CSS之排列系列--块级元素.内联元素.内联块元素--区别/详解_IT利刃出鞘的博客-CSDN博客 简介 本文介绍CSS的块级元素(block).内联元素(inline)和内联块元素(inl ...

  10. Html的块状元素和内联元素

    Html的块状元素和内联元素 块级元素和内联元素(通常说行内元素)的区别是块级有独立空间.它本身显示在一行,不管多少字节.而行内是没有display:block的特性的. 1 块级元素:div , p ...

最新文章

  1. 机器学习笔记: 聚类 模糊聚类与模糊层次聚类(论文笔记 Fuzzy Agglomerative Clustering :ICAISC 2015)
  2. centos ping不通百度 ping不通外网
  3. PyMC3和Lasagne构建神经网络(ANN)和卷积神经网络(CNN)
  4. JavaScript高阶函数快速入门
  5. 什么是浏览器同源策略?
  6. 这个世界上有一个故事,叫做《大话西游》。
  7. [分享]屏幕取色工具
  8. android 圆形自定义进度条,自定义Android圆形进度条(附源码)
  9. 数据分析达到精准营销的路径分析
  10. CSS中的filter与backdrop-filter属性的异同点
  11. Luajit作者给的Lua源码的阅读顺序
  12. HTTP返回代码 201 304 404 500等代表的含义
  13. html 颜色为无色,JS设置对象背景为无色或有色
  14. 【洛谷 P1240】诸侯安置
  15. 刚开始学Java,很懵逼,不知道怎么学,能不能给点建议?
  16. 三种常用的LED驱动电源电路图详解
  17. 小红书6000浏览量算高吗?笔记浏览量提升技巧看这里
  18. Design twelve
  19. 老公屡屡出 轨偷腥,我还要委曲求全吗?
  20. SEO系列之基础概念

热门文章

  1. 数据结构与算法 第三章 树以及相关遍历方法
  2. 孙茂松教授——自然语言处理一瞥:知往鉴今瞻未来
  3. seaborn—seaborn.regplot绘制线性回归拟合图
  4. sklearn计算准确率,召回率,精确率,F1函数
  5. 从零实现深度学习框架——过拟合与欠拟合
  6. 白板推导系列Pytorch-隐马尔可夫模型-学习问题
  7. 业务中台如何提升研发效率
  8. 《Effective STL中文版》前言
  9. DetoursHook
  10. Android中的控件