CSS 块状元素和内联元素
在用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 块状元素和内联元素的更多相关文章
- Css中的两个重要概念:块状元素和内联元素
一.display:block display:block就是将元素显示为块级元素,一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(he ...
- CSS 块状元素和内联元素的详解
我们先来分析一下块级元素.内联级元素的定义和解析: 块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P&q ...
- CSS - 块状元素、内联元素和内联块状元素
在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素(block).内联元素(又叫行内元素,inline)和内联块状元素(inline-block). 1. 常用的块状元素有: < ...
- html标签分两种:块状元素和内联元素
块状元素一般是其它元素的容器,可以容纳内联元素和其它块状元素,独占一行,宽度和高度起作用.如div,p等标签属于块状元素. 内联元素只能容纳文本和其它内联元素,可与其它内联元素位于同一行, ...
- css position, display, float 内联元素、块级元素
position属性:position属性指出一个元素的定位方法.有4种可能值:static, relative, absolute or fixed: static:默认值,元素按照在文档流中出现的 ...
- 【CSS3】---块状元素、内联元素(又叫行内元素)和内联块状元素
元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1&g ...
- htmlt中的块状元素与内联元素
块元素(block element) address - 地址 blockquote - 块引用 center - 举中对齐块 dir - 目录列表 div - 常用块级容易,也是CSS layout ...
- html块状元素、内联元素
html块状元素.内联元素 原文在这 块级元素的分类 块级元素按照其应用于结构还是内容分为三种:结构化块状元素,终端块状元素,多目标块状元素. 一.结构化块状元素 这类元素用于构造文档的结构,一个好的 ...
- 【HTML入门】Html中块状元素和内联元素解析
[HTML入门]Html中块状元素和内联元素解析 块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,内联元素(inline elem ...
随机推荐
- paip.python NameError name 'xxx' is not defined\
paip.python NameError name 'xxx' is not defined\ 导入一个另一个文件里面的函数的时候儿,出孪这个err #这个仅仅导入孪file...要使用里面的fun ...
- bzoj 2659: [Beijing wc2012]算不出的算式
2659: [Beijing wc2012]算不出的算式 Time Limit: 3 Sec Memory Limit: 128 MB Description 算不出的算式背景:曾经有一个老掉牙的游 ...
- 那些在学习iOS开发前就应该知道的事(part 2)
英文原文:Things I wish I had known before starting iOS development—Part 2 http://www.cocoachina.com/ios/ ...
- [C++] zlatlcv: ATL字符串转换辅助库。能很方便的将UTF-8字符串转为TCHAR等字符串
作者:zyl910 如今,UTF-8字符串的使用频率越来越多了.但是在VC中,不能直接处理UTF-8字符串,得专门去写UTF-8与窄字符串.宽字符串.TCHAR字符串相互转换的代码.不仅费时费力,而且 ...
- [C] zlstdint(让VC、TC等编译器自动兼容C99的整数类型)V1.0。支持Turbo C++ 3等DOS下的编译器
作者:zyl910 以前我曾为了让VC++等编译器支持C99的整数类型,便编写了c99int库来智能处理(http://www.cnblogs.com/zyl910/p/c99int_v102.htm ...
- 初学Linux
一直觉得Linux敲命令很蛋疼,今天开始学习一下吧,主要以练习(想到啥就查啥)命令和练习在Linux中编程(Python)为主吧. 不记得什么时候安装的Ubuntu 12.04.3 LTS虚拟机,连密 ...
- Gulan查询UI排布
遇到一个问题,如何在相对布局里把两个item放在同一行,而且高度一样呢? <RelativeLayout xmlns:android="http://schemas.android.c ...
- spring和ehcache整合,实现基于注解的缓存实现
要实现基于注解的缓存实现,要求Spring的版本在3.1或以上版本. 首先需要在spring的配置文件中添加对缓存注解的实现: <?xml version="1.0" enc ...
- SSIS连接Oracle遇到的问题
Fuck!一大早上来到办公室发现 E盘被客户无缘无故干掉了,心中一万只......路过,but 接下来还是要解决问题 冷静!冷静!冷静! 问题还是要解决的 于是乎去测试开发环境 发现DW库和Repo ...
- Web - 客户端存储的几种方式
客户端存储主要方便一些APP离线使用.今天就来说说客户端存储的方法有多少? 说在最前面的一句:所有的客户端存储都有一个原则:读写的数据必须要同域 1 Cookie Cookie是一项很老的技术的,就是 ...