P标签特性：不能嵌套块元素

　　一直以为P标签只是个自带上下外边距的块元素，最近在项目里利用其自带外边距就嵌套了个div包裹的按钮兰到里面。在测试时发现这个P标签被解析成了2套P标签，工具栏被插在2组P标签中间属于同级了。

后经过查询发现，原来P元素是不能包含块级元素（包括P自身）的.The P element represents a paragraph. It cannot contain block-level elements (including P itself).

时间： 2024-12-25 20:17:45

P标签特性：不能嵌套块元素的相关文章

HTML中为何P标签内不可包含块元素？

起因:在做项目时发现原本在DW中无误的代码到了MyEclipse6.0里面却提示N多错误,甚是诧异.于是究其原因,发现块级元素P内是不能嵌套DIV的. 深究:我们先来认识in-line内联元素和block-line块元素,因为HTML里几乎所有元素都属于内联元素或者块元素中的一种. in-line这个词有很多种解释:内嵌.内联.行内.线级等,但是,它们都是表示相同的意思,在这里我们选择习惯的叫法–内联. 先看下面的例子你就能明白两者的差别: <p>测试一下块元素与<span>内联元

设置list-style-position，li元素嵌套块元素时，Firefox浏览器布局失效处理

将ul列表样式符号放到列表内,很自然地想到设置list-style-position:inside.但当li元素嵌套有块元素时,Firefox下悲剧了. 查看:http://codepen.io/xiaoyewen/pen/KpzMLO Firefox下的效果成了这样的,Chrome与IE好好的 看来不能这样顺利地实现效果呀,无奈就换了思路,乖乖生成小黑点吧. .list div::before { content: '.'; font-size: 20px; position: relativ

块元素和行内元素

块元素: 1.占用整行宽度 2.前后都有换行符 3.拥有完整的盒模型结构 行内元素: 1.根据内容决定占用宽度 2.前后不换行 3.不拥有完整的盒模型结构 补充: warning: 1.一个内联元素设置为display:block是不允许有它内部的嵌套块元素. 2.块级元素可以包含行内和块级,但行内元素不能包含块级元素. 3.行内元素设置width无效,height无效,可以设置line-height, margin上下.padding上下无效.(水平方向排列)

HTML中为何p标签内不可包含div标签?那哪些块元素里面不能放哪些块元素呢？

先看下面的例子你就能明白两者的差别: <p>测试一下块元素与<span>内联元素</span>的差别</p> <p>测试一下<div>块元素</div>与内联元素的差别</p> 在上面的例子中,<div>会自己产生一个新的行,而<span>并没有换行,这是在没有CSS渲染的情况下才这样,同样,我们也可以通过CSS把div定义成内联元素,把span定义成块元素,但是,我们却不能在HTML里

css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性

一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向都正常显示,遵循标准的css盒模型.例如:div 2.行内替换元素 width. height. margin的四个方向. padding的四个方向都正常显示,遵循标准的css盒模型. 例如:img 2.行内非替换元素(重点) width. height不起作用,用line-height来控制高度.

html常见的块元素和行内元素（特别注意个别块元素不能嵌套其他块元素）

html中常见的块元素:div.p.h1-h6.ul.ol.li.hr.table.pre等 块级元素新开启一行即使是设置了width属性也是独占一行(可设置float浮动属性调整布局).尽可能撑满父级元素的宽度,可以设置width和height属性:table元素浏览器默认的display属性为table. html中常见的行内元素:span.img.a.label.input.select.u.strong等 行内元素特性是相邻的行内元素不换行,宽度即为内容的宽度.不可以设置width和he

HTML5块元素标签的使用

<!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></title>     <link rel="stylesheet" type="text/css" href="mycss.css">     <style t

4.2 HTML5块元素标签的使用

1.HTML块元素块元素显示时,会以新行的形式显示.如:<h1><p><ul>(标题.段落.列表) 2.HTML内联元素内联元素显示时,不会以新行的形式显示.如:<b><a><img>(加重标签.超链接.图像) <div>元素是块元素,是各种元素的容器,其主要作用是用于样式的设计(为<div>标签指明id属性后,通过id属性进行样式的设计).(div在文档中定义一个节)<span>元素是内联元素,是

&lt;p&gt;&lt;/p&gt;标签为什么不能包含块级标签?还有哪些特殊标签？

最近,在码代码的时候,就是下面的这段代码,我犯了一个很不起眼,但犯了就致命的BUG. <body> <p> <ol> <li>Hello</li> </ol> </p> <div>How are you?</div> </body> <script src="jquery-3.1.1.js"></script> <script> v