块状元素与内联(行内)元素的嵌套规则

如果不按照HTML规则书写代码时,浏览器就不会正确解析,会将不符合嵌套规则的节点放到目标节点的下面,或者变成纯文本。HTML存在许多种类型的标签,有的标签下面只允许特定的标签存在,这就是HTML嵌套规则。

       块状元素:一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(height)起作用。 
内联元素(行内元素):内联元素只能容纳文本或者其他内联元素,它允许其他内联元素与其位于同一行,但宽度(width)高度(height)不起作用。

块状元素与内联(行内)元素的嵌套规则 

1、块状元素可包含内联元素或某些块元素,但内联元素不可包含块元素,只能包含内联元素。 
<div><h1></h1><p></p></div>     正确 
<a href="#"><span></span></a>    正确 
<span><div></div></span>     错误

2、块级元素不能放在<p>里面 
<p><ol><li></li></ol></p>    错误 
<p><div></div></p>  错误

3、有几个特殊块级元素只能包含内联元素,不能包含块级元素。这几个特殊标签是 h1~h6、p、dt 

4、li 内可包含 div 标签 
<li><div></div></li>

5、块级元素与块级元素并列、内联元素与内联元素并列 
<div><h2></h2><p></p></div>  正确 
<div><a href="#"></a><span></span></div>  正确 
<div><h2></h2><span></span></div>  错误 
  
参考自:http://www.cnblogs.com/jizhongjing/p/4887948.html;

时间: 2025-01-02 13:48:02

块状元素与内联(行内)元素的嵌套规则的相关文章

内联(行级)元素不能设置margin-top

内联(行级)元素 不能设置宽高,但padding属性可以设置,需要注意的是行级元素不能设置margin-top和margin-bottom属性,但可以设置margin-left和margin-right属性.如果需要设置行级元素的margin-top或margin-bottom属性,必须将行级元素转换成内联块级元素或块级元素.

web兼容学习分析笔记--块级、内联、内联块级元素

一.块级.内联.内联块级元素 (1)块级元素:block **独占一行 **可设置width,height,margin,padding **内部可包含块级或内联元素 (3)内联(行内)元素:inline **和其他inline元素同行显示 **可以设置margin-left,margin-righ,padding-left,padding-right, **无效设置widht,height,margin-top,margin-bottom,padding-top,padding-bottom

HTML 基础 内联与块元素

什么是块级元素和内联元素 block(块)元素的特点: ①总是在新行上开始: ②高度,行高以及外边距和内边距都可控制: ③宽度100%,除非设定一个宽度. ④它可以填写内联元素和其他块元素 inline元素的特点: ①和其他元素都在一行上: ②高,宽度不可改变: ③宽度就是它的文字或图片的宽度,不可改变 ④内联元素只能容纳文本或者其他内联元素 其中css的display属性能修改块元素与内联元素 ◎ blockquote - 块引用 ◎ center - 举中对齐块 ◎ ul - 非排序列表(无

块状元素居中、元素分类(块状,内联,内联块状)、内联转块状

块状元素中的文字.图片居中显示: CSS设置:text-align:center <style type="text/css"> div{text-align:center;} </style> </head> <body> <div><img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" ></div> 如图所

HTML的块状、内联、内联块状元素的特点

元素分类及特点: 1.块级元素: 在html中<div>. <p>.<h1>.<form>.<ul> 和 <li>就是块级元素.设置display:block就是将元素显示为块级元素.块级元素特点: (1).每个块级元素都从新的一行开始,并且其后的元素也另起一行:(一个块级元素独占一行) (2).元素的高度.宽度.行高以及顶和底边距都可设置: (3).元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一

内联和快元素的特点

内联元素的特点  1.和其他的元素显示在一行上:  2.内边距和外边距.高度,宽度都是不可改变的,他的宽度是根据他的显示文本和图像的宽度  3.可以通过css来将它变成为块元素之后然后就可以用css其他样式应用了. 块元素的特点: 1.总是在新的一行上显示: 2.高度.行高.宽度.内边距.外边距等都是可控制的: 3.他的高度默认为0,是根据元素内的内容而决定的,宽度是父元素的宽度,但是可以通过css控制它,显示的指定他的宽度和高度,可以利用浮动和定位来将他与其他的块元素也显示在一行上:

CSS基础知识(2)三种样式表的写法,块、行内、行内块元素之间的转换

margin: 0 auto /*可以让盒子居中*/1.三种样式表的书写方法 (1)内嵌式写法 特点:样式只作用于当前文件,没有真正实现结构表现分离. <head> <style type="text/css"> 样式表写法 </style></head> (2)外链式写法 特点:作用范围是当前站点,谁调用谁生效,范围广,真正实现结构表现分离. <link rel="stylesheet" href="

html的块级、内联、内联块级元素基础

概念 块级:block 内联:inline 内联块级:inline-block 在html元素中,元素会有display属性 display属性默认值是block,那么该元素是块级元素. display属性默认值是inline,那么该元素是内联元素. 没有元素的display默认值是inline-block. display属性值可以被设置,比如可以把块级元素div的display的值设成inline,那么它就变成了内联元素,不再独行显示. 特征 1.块级元素 独占一行. 可设置width,he

行内元素与块级元素的区别,行内块级元素在IE8-的兼容性

行内元素与块级元素的区别 行内元素最好不要包裹块级元素,但是块级元素可以任意的包裹行内元素 行内元素如果其上一个元素也是行内元素,则他们会分布在统一水平线上,即在一行上排列,块级元素不论上一个元素是行内元素还是块级元素都要另起一行,单独占一行. 对于行内元素设置with.height.margin值无效,但对于块级元素,设置这些值是有效的. 行内块级元素在IE8以下的兼容性 div { display: inline-block: *zoom: 1: *display: inline: } 解析

HTML哪些是块级元素,哪些是行内元素

块级元素:块级大多为结构性标记 <address>...</adderss> <center>...</center>  地址文字 <h1>...</h1>  标题一级 <h2>...</h2>  标题二级 <h3>...</h3>  标题三级 <h4>...</h4>  标题四级 <h5>...</h5>  标题五级 <h6>