当前位置:首页 > 技术实录 > 正文内容

HTML块级元素与行级元素

心光日记2012-05-02 00:00:00技术实录291

HTML中的大部分元素都可分为两种类型:块级元素和行级元素。这些元素的类型是通过文档类型定义(DTD)来指明。块级元素会从新的一行出现,行级元素则不会。块级元素的前后都会有插入的断行,所以如果不用CSS则没法让两个块级元素并列在一起。

块级元素一般作为容器出现,用来组织结构,但并不全是如此。有些块级元素,如<form>只能包含块级元素。其他的块级元素则可以包含行级元素如<P>.也有一些则既可以包含块级,也可以包含行级元素。如,<div>,<li>

行级元素一般是包含语义意义的元素。行级元素一般只能包含文字或其他行级元素。行级元素不能被应用下列属性:

  • width

  • height

  • max-width

  • max-height

  • min-width

  • min-height

如果你想改变这些属性,应该应用给它的属于块级元素的父元素。

有些元素既可以是块级元素,也能成为行级元素。例如<ins> 和<del>。当这两个元素直接出现在<body>中时,它们就是块级元素。如果作为<P>的子元素,他们就是行级元素,此时不能包含其他的块级元素。

CSS中的盒子也有块级和行级之分,也包括其他类型,如,列表和表格等。HTML中的块级元素会产生块级盒子,行级元素会产生行级盒子。在CSS中,可以用display控制盒子的类型。如,把一个行级元素转换成块级元素。注意,这种转换并不能改变元素本质。即使你把它转换成了块级元素,你也不能让它包含其他的块级元素,你转换的只是CSS的盒子的外观。

通常没有必要改变元素的盒子类型,下列情况一般有改变盒子的需求:

  • 水平的列表菜单

  • 不断行的标题

  • 隐藏元素

对于应用了浮动或绝对定位的元素,如此类样式:float:left,position:absolute,position:fixed。这类元素的盒子类型显然改变了。它们都变成了块级元素,因此display属性一般都被忽略。

如果对元素应用display:none,它(包括它的子元素)将会被隐藏起来。对它应用的float,position属性也不再有意义。因为它将不会产生任何的盒子。

扫描二维码推送至手机访问。

版权声明:本文由心光日记发布,如需转载请注明出处。

本文链接:https://www.mindlight.cn/post/144.html

标签: 百度空间
分享给朋友:

“HTML块级元素与行级元素” 的相关文章

冰点问题(启惠看)

冰点问题(启惠看)

冰点失效,CTRL+ALT+SHIFT+F6,设置为boot frozen,重起还是无效。卸载之后,重新安装提示“This Evaluation Version of DeepFreeze has expired”无法进行安装 。如下图:这是“冰点评估板使用已过期”的意思,可通过下面三种方法解决。 ...

彩虹(原51挂挂)评测

  超大的网盘和方便的网盘操作是最大的优点,而可更改的数字账号在有QQ铺垫的当前社会极具吸引性。  这是一个巧合,今天在“360软件管家”里面无意间发现了一个软件,叫“彩虹”,突然使我响起了前一阵子和 腾讯 闹得很凶的“彩虹显IP”。下意识间点开了简介,心里想着这个“彩虹”和“彩虹显IP”有关系吗?...

Html起步初学,第一次作业,线上展示

  展示地址: http://cuiyi.y5y5.info/  最近在学WEB开发、Android,前几天已经学了Linux的基本操作,主要是 终端 命令方面。自上一节课,已经开始学习Html,这一阶段课程主要就是Html+CSS+javascript三项,也就是最基本的。在以后时间里,我会将所学...

通过位运算(不用模运算符%)求余

  模运算 大家都知道就是求余,比如9/8,它的余数就是1,通过9%8可以快捷的求出余数.  但是这里我为大家介绍一种不通过求模运算符%来求余数的方法.但是他有一个前提,a/b的除数b必必须为2的n次方.也就是说除数b必须是  2的一次方1  2的二次方4  2的三次方8    ……   ...

ComboBox控件DropDownList样式item添加

ComboBox控件DropDownList样式item添加

C#的下拉列表框,有三种样式,我们常用的就是DropDownList样式,如图:但是,我在昨天使用的时候,发现一个问题。此样式的ComboBox在添加项,也就是填充下拉列表的内容的时候,有两种方法,一种是用DataTable绑定数据的形式,这种形式是官方推荐的。但是有时不想构造 DataTable...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。