CSS块级元素与行级元素(转载)
- 块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊,它只能用来容纳其他块元素。
- 如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要 的位置上去。而不是每次都愚蠢的另起一行。需要指出的是,table标签也是块元素的一种,table based layout和css based layout从一般使用者(不包括视力障碍者、盲人等)的角度来看这两种布局,除了页面载入速度的差别外,没有其他的差别。但是如果普通使用者不经意点了 查看页面源代码按钮后,两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码,至少也能让没有web开发经验的普通使用者把内容快 速的读懂。从这个角度来说,css layout code应该有更好的美学体验吧。
- 你能够把块容器元素div想象成一个个box,或者如果你玩过剪贴文载的话,那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪 下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图,用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报 了。作为一种技术的延伸,网页布局设计也遵循了同样的模式。.
- 内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,常见内联元素 “a”。
- 块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后,块元素和内联元素的这种属 性差异就不成为差异了。比如,我们完全可以把内联元素cite加上display:block这样的属性,让他也有每次都从新行开始的属性。
- 可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别,一旦上下文关系确定了他的类别,他就要遵循块元素或者内联元素的规则限制。大致的元素分类见全文。
- 关于inline element的中文叫法,有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译,爱怎么叫怎么叫吧。另外提到内联元素,我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。
- 块元素(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 - 定义变量
- 可变元素
- 可变元素为根据上下文语境决定该元素为块元素或者内联元素。
- * applet - java applet
- * button - 按钮
- * del - 删除文本
- * iframe - inline frame
- * ins - 插入的文本
- * map - 图片区块(map)
- * object - object对象
- * script - 客户端脚本
------------------------------------------------以上内容转自:网络爱上点击
CSS块级元素与行级元素(转载)的更多相关文章
- CSS里常见的块级元素和行内元素
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
- CSS中的块级元素与行级元素
最近初学CSS时对块级元素与行级元素有时会产生混淆,写篇博客记录一下自己对其的理解. 先从概念上来看: 块级元素 特点:1.每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行 ...
- CSS学习笔记——盒模型,块级元素和行内元素的区别和特性
今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...
- CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
- css块级元素和行内元素详细解析
块级元素和行内元素是布局中常见的两种基本元素,但是未必有很多人深入的研究它们的细微差别. 常见块级元素:div p form ul ol li 等: 常见的行内元素:span stronh em; ...
- 【CSS系列】块级元素和行内元素
块级元素: 块级元素生成一个元素框,默认会填充其父元素的内容区,旁边不能有其他元素,换句话说,它在元素框之前和之后生成了“分隔符”. 列表项是块级额元素的一个特例,除了表现方式与其他块元素一致,列表项 ...
- CSS标准文档流 块级元素和行内元素
标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...
- CSS块级元素与行内元素
CSS块级元素与行内元素 行内元素与块状元素 1.块级元素:可以设置 width, height属性. 行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化 ...
- CSS居中问题:块级元素和行级元素在水平方向以及垂直方向的居中问题
元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 块级元素 块级元素水平居中 1:marg ...
随机推荐
- bzoj4306: 玩具厂
Description 在JIH考察的地图中有N个城市,被公路依次连成了一个环,JIH想在这些城市中建一个玩具厂.城市和公路都被编号为1..N,i号公路连接i-1号城市与i号城市(1号公路连接N号城市 ...
- jQuery的live绑定事件在mobile safari(iphone / ipad / ipod)上失效的解决方案
jQuery的live绑定为什么会在mobile safari上失效呢?其实可以追溯到jQuery里live的实现方式.live的实现方式实际上是通过事件委托机制来实现的,也就是说是通过诸如冒泡的方式 ...
- 伯克利DB的一个BUG
一旦没有手工close掉伯克利DB,则缓存里的数据不会主动写入到文件中,因此非常难于排查这个BUG,记录在这里提醒自己
- Redis系列(1)之安装
Redis系列(1)之安装 由于项目的需要,最近需要研究下Redis.Redis是个很轻量级的NoSql内存数据库,它有多轻量级的呢,用C写的,源码只有3万行,空的数据库只占1M内存.它的功能很丰富, ...
- CentOS 6.x 下Postfix和dovecot邮件服务安装和基本配置
1 卸载sendmail [root@mail~]# pstree | grep sendmail [root@mail~]# service sendmail stop [root@mail~]# ...
- filter高级应用
Filter高级应用: Decorator模式 1)包装类需要和被包装对象 实现相同接口,或者继承相同父类 2)包装类需要持有 被包装对象的引用 在包装类中定义成员变量,通过包装类构造方法,传入 ...
- perl /m
<pre name="code" class="html">[root@backoffice01 ~]# cat a1.pl my $_=" ...
- 【动态规划】XMU 1029 矩阵链乘法
题目链接: http://acm.xmu.edu.cn/JudgeOnline/problem.php?id=1029 题目大意: 题同乘法难题.给n+1个数,头尾不能动,中间的数可取出,取出时代价是 ...
- hyperVisors
容器有效地将由单个操作系统管理的资源划分到孤立的组中,以更好地在孤立的组之间平衡有冲突的资源使用需求 期望继续进军中国市场 就像IBM公司,惠普公司和戴尔公司在中国服务器市场的霸主地位一样,Inspu ...
- A - Jungle Roads - poj 1251(简单)
想必看这道题的时候直接看数据还有那个图就能明白什么意思吧,说的已经很清楚了,每个点都有一些相连的点和权值,求出来如果连接所有点,最小的权值是多少,赤裸裸的最小生成树... ************** ...