精华内容
下载资源
问答
  • [html] 块级元素不能包含其他块级元素有那些?
    2021-04-09 09:58:33

    [html] 块级元素不能包含其他块级元素有那些?

    嵌套规则:
    
        块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。
        块级元素不能放在p里面。
        有几个特殊的块级元素只能包含内联元素,不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
        li内可以包含div,p标签中不能有div
    
    

    个人简介

    我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
    但坚持一定很酷。欢迎大家一起讨论

    主目录

    与歌谣一起通关前端面试题

    更多相关内容
  • 想起之前工作面试时,面试官问的一个问题:行内元素有哪些,和块级元素有什么区别?这是一道蛮基础的面试题,但是很多初学者平时只注重标签语义,忽视了标签行内和块级的特性, 因此对于上述问题很有可能答不上来...
  • 一、行内元素和块级元素的区别  1、 行内元素不会占据整行,在一条直线上排列,都是同一行,水平方向排列;  块级元素会占据一行,垂直方向排列。  2、 块级元素可以包含行内元素和块级元素;行内元素不能包含...
  • 元素按照显示方式主要可以分为块级元素和行内元素,元素的显示方式由display属性控制。 块级元素特点总结: 1、总是在新行上开始 2、宽度的默认为width+margin-left+margin-right+padding-left+padding-right刚好...
  • 直奔主题在这里提供三种块级元素垂直水平居中的方法 flex(子级宽高可固定也可不固定,随意) 定位+margin(固定子级的宽高,margin-top,margin-left取自身一半的负值) 定位+transform(不固定子级的宽高) flex...
  • 元素(block element)一般是其他元素的容器元素,能容纳其他块元素或内联元素。最常见的就是P和div这两个,说的简单点,块元素就好比一个四方块,可以放其他的四方块,并可以呈现在页面上任何地方。默认情况下块...
  • 1.text-indent应用于块级元素 2.text-indent应用于行内元素 3.text-indent应用于替换元素 4.text-indent应用于inline-block元素 5.继承 6.总结 一、text-indent应用于块级元素 text-indent常用于段落首行2字符的缩进...
  • 文章目录元素的显示方式和转换块级元素行级元素行内块级元素显示方式之间的转化 元素的显示方式和转换 块级元素 块级元素(inline): 块级元素可以包含行内元素和其它块级元素,且占据父元素的整个空间,可以设置 ...
  • 复制代码代码如下: ”wrap”>正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div> css 复制代码代码如下: #wrap{white-space:normal; width:200px; } 1.(IE浏览器)连续的英文...
  • 盒子水平居中 快兔兵团 居中的含义 块级盒居中 块级盒子木身居中 块级盒子里而有内容居中 行内元素居中 设置外围盒子 设置本身 块级元素居中(本身居中) 100100 认的是左上角对齐 div class=box </div> 盒子的位置 ...
  •  行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可;  对于块级元素有以下几种居中方式:   1.将元素放置在table中,再将table的margin-left和margin-right设置成auto,将table居中,使...
  • 块级元素(block)特性:总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;内联元素(inline)特性:和相邻的内联元素在同一行,接下来为大家详细介绍下,感兴趣的朋友可以参考下哈
  • 一、常见块级元素有哪些: button,div , dl ,dt ,form , h1 ,h2 ,h3 , h4 ,h5 ,hr ,li ,ul ,table系列,button; 二、常见行内元素有哪些: img ,a ,input ,textarea ,b ,br ,span, select ,label ,map ,strong ; 三...
  •  * div – 常用块级容易,也是css layout的主要标签  * dl – 定义列表  * fieldset – form控制组  * form – 交互表单 (只能用来容纳其它块元素)  * h1 – 大标题  * h2 – 副标题  * h3 – 3级...
  • 块级元素:block-level,相信大家都知道吧(or Google it)。以前在写代码的时候,面对 标签总觉得很奇怪。
  • 关于块级元素和行内元素的一些小知识点的总结
  • 1)块级元素 特点: 1.总是从新的一行开始 2.高度、宽度都是可控的 3.宽度没有设置时,默认为100% 4.块级元素中可以包含块级元素和行内元素 5.块级文字元素中不能放入其他块级元素 6.块级大多为结构性标记 常见块级...

    1)块级元素

    特点:

    1.总是从新的一行开始

    2.高度、宽度都是可控的

    3.宽度没有设置时,默认为100%

    4.块级元素中可以包含块级元素和行内元素

    5.块级文字元素中不能放入其他块级元素

    6.块级大多为结构性标记

    常见块级元素:
      <center>...</center>  地址文字
    
      <h1>...</h1>  标题一级
    
      <h2>...</h2>  标题二级
    
      <h3>...</h3>  标题三级
    
      <h4>...</h4>  标题四级
    
      <h5>...</h5>  标题五级
    
      <h6>...</h6>  标题六级
    
      <hr>  水平分割线
    
      <p>...</p>  段落
    
      <pre>...</pre>  预格式化
    
      <blockquote>...</blockquote>  段落缩进   前后5个字符
    
      <marquee>...</marquee>  滚动文本
    
      <ul>...</ul>  无序列表
    
      <ol>...</ol>  有序列表
    
      <dl>...</dl>  定义列表
    
      <table>...</table>  表格
    
      <form>...</form>  表单
    
      <div>...</div>
    

    2)行内元素

    特点:

    1.和其他元素都在一行

    2.高度、宽度以及内边距都是不可控的

    3.宽高就是内容的高度,依靠自身字体大小和图形支撑结构的,不可以改变

    4.行内元素只能行内元素,不能包含块级元素

    5.行内元素的paddding可以设置

    6.margin只能够设置水平方向的边距,即:margin-left和margin-right,设置margin-top和margin-bottom无效

    7.块级大多为结构性标记

    常见行内标签:
    特点:

    1.和其他元素都在一行

    2.高度、宽度以及内边距都是不可控的

    3.宽高就是内容的高度,不可以改变

    4.行内元素只能行内元素,不能包含块级元素

    5.行内大多为描述性标记

      <b>...</b>  加粗
    
      <strong>...</strong>  加粗
      
      <sup>...</sup>  上标
    
      <sub>...</sub>  下标
    
      <i>...</i>  斜体
    
      <em>...</em>  斜体
    
      <del>...</del>  删除线
    
      <u>...</u>  下划线
    

    3)行内块级元素

    特点:

    综合块级元素与行内元素的特性,可设宽高(默认是内容宽高),也可以设置内外边距

    常见行内块级元素:
    	<span>...</span>
    
    	<a>...</a>
    
    	<img/>
    
    	<textarea>...</textarea>
    
    	<button>..</button>
    
    	<input>
    
    	<br>
    
    	<label>...</label>
    
    	<select>...</select>
    
    	<canvas>...</canvas>
    
    	<progress>...</progress>
    
    	<cite>...</cite>
    
    	<code>...</code>
    
    	<strong>...</strong>
    
    	<em>...</em>
    
    	<audio>...</audio>
    	
    	<video>...</video>
    

    4)块级元素与行内元素完整列表:

    在这里插入图片描述

    5)显示模式转换

    display:block|inline|inline-block

    1)块级转行内、行内块级
    	<!-- 快级元素转为行内元素 -->
    	<h1 class="inline">Talk is easy,show me the code!</h1>
    	<h1 class="inline">Talk is easy,show me the code!</h1>
    	
    	<h1 class="inline">Talk is easy,show me the code!</h1>
    	<h1 class="inline">Talk is easy,show me the code!</h1>
    	<hr>
    
    	<!-- 快级元素转为行内块级元素 -->
    	<h1 class="inline-block">Talk is easy,show me the code!</h1>
    	<h1 class="inline-block">Talk is easy,show me the code!</h1>
    	
    	<h1 class="inline-block">Talk is easy,show me the code!</h1>
    	<h1 class="inline-block">Talk is easy,show me the code!</h1>
    

    将前两行转为行内元素,而将后两行转为行内块级元素:

    		.inline{
    			display: inline;
    			background: #ccc;
    		}
    		.inline-block{
    			display: inline-block;
    			background-color: #ccc;
    		}
    		hr{
    			height:5px;
    			background: green;
    		}
    

    在浏览器中的显示效果为:

    在这里插入图片描述

    可以看到,转为行内元素的


    没有独占一行,垂直方向的外边距属性也消失了;而转为行内块级元素的
    也没有独占一行(之所以有换行是因为后面的位置不够,所以第三个h1自动换行到了第三行),但仍保持了垂直方向的外边距,这也说明了行内元素与行内块级元素的区别。

    2)行内块级元素转为块级元素
    	<!-- 不做改变 -->
    	<img src="surprice.jpg" alt="">
    	<img src="surprice.jpg" alt="">
    	
    	<hr>
    	
    	<!-- 转为块级元素 -->
    	<img src="surprice.jpg" alt="" class="block-img">
    	<img src="surprice.jpg" alt="" class="block-img">
    

    前两行不做改变,而将后两行转为块级元素:

    	.block-img{
    			display: block;
    		}
    

    在浏览器中的显示效果为:

    在这里插入图片描述

    3)行内元素转行内块级元素、块级元素
    	<!-- 不做改变 -->
    	<i class="i-inline">Talk is easy ,show me the code!</i>
    	<i class="i-inline">Talk is easy ,show me the code!</i>
    	<hr>
    
    	<!-- 转为行内块级元素 -->
    	<i class="i-inine_block">Talk is easy, show me the code!</i>
    	<i class="i-inine_block">Talk is easy, show me the code!</i>
    	<hr>
    
    	<!-- 转为块级元素 -->
    	<i class="i-block">Talk is easy,show me the code!</i>
    	<i class="i-block">Talk is easy,show me the code!</i>	
    

    前两行不做改变,第三、四行转为行内块级元素,第五、六行转为块级元素,此时在浏览器中的显示效果为:

    在这里插入图片描述

    可以看到行内元素不能独占一行,且设置外边距无效;行内块级元素也不能独占一行,但能够设置外边距;块级元素即独占一行,也能够设置外边距。

    展开全文
  • 元素有行内元素(inline)、块级元素(block)以及行内块元素(inline-block)之分,对应地它们之间的盒模型也会有不同。1. 行内元素(inline)通过display: inline可将元素声明为行内元素,顾名思义指在行里面的元素,因此...

    元素有行内元素(inline)、块级元素(block)以及行内块元素(inline-block)之分,对应地它们之间的盒模型也会有不同。

    1. 行内元素(inline)

    通过display: inline可将元素声明为行内元素,顾名思义指在行里面的元素,因此没有换行的行为。

    1.1 宽度和高度

    行内元素不能设置宽度和高度,宽度和高度由内容撑开;

    1.2 内边距

    行内元素可以设置内边距,上下内边距不会影响行内元素的位置,但左右内边距会影响行内元素的位置;

    1.3 边框

    行内元素可以设置边框,上下边框不会影响行内元素的位置,但左右边框会影响行内元素的位置

    1.4 外边距

    行内元素不可以设置上下外边距(无效),但可以设置左右内边距,且会影响元素的位置。

    2. 块级元素(block)

    通过display: block可将元素声明为块级元素,块级元素拥有换行的行为。

    2.1 宽度和高度

    块级元素可以自由设置宽度和高度,其中宽度默认为父元素内容区的宽度,而高度则由内容高度撑开。

    2.2 内边距

    块级元素的内边距也可自由设置,默认为0;

    2.3 边框

    块级元素的边框可自由设置,默认为0;

    2.4 外边距

    块级元素的外边距可自由设置,默认为0。值得注意的是,上下两个元素的外边距会发生重叠,比如A元素下外边距(margin-botom)为10px,A元素的上外边距(margin-top)为20px,两者之间的外间距为20px,而非想象中的30px。

    3. 行内块元素(inline-block)

    通过display: inline-block可将元素声明为行内块元素,行内块元素没有换行的行为,却可以设置宽度和高度,相当于行内元素和块级元素的综合体。

    3.1 宽度和高度

    行内块可自由设置宽度和高度;

    3.2 内边距

    行内块元素可正常设置内边距;

    3.3 边框

    行内块元素可正常设置边框;

    3.4 外边距

    行内块元素可正常设置外边距。值得注意的是,行内块的外边距跟其他行内块元素或块级元素的外边距不会发生重叠。

    展开全文
  • NULL 博文链接:https://maoting.iteye.com/blog/1722563
  • 原标题:HTML+CSS:html元素分类之块级元素、内联元素、内联块级元素 html元素主要分为3类,块级元素、内联元素以及内联块级元素,本篇文章我们来就详细介绍一下各个分类的含义以及对应的特点。(1)块级元素在html中...

    原标题:HTML+CSS:html元素分类之块级元素、内联元素、内联块级元素

    0569df71dda0d09bdf60853b132bab3b.png

    html元素主要分为3类,块级元素、内联元素以及内联块级元素,本篇文章我们来就详细介绍一下各个分类的含义以及对应的特点。

    (1)块级元素

    在html中div、 p、hx、form、ul 、 li、dl、dd就是块级元素。css属性设置display:block就是将元素显示为块级元素。块级元素特点:

    1、每个块级元素都从新的一行开始,并且其后的元素也另起一行;(一个块级元素独占一行)

    2、元素的高度、宽度、行高以及顶和底边距都可设置;

    3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

    我们这里将块级元素代码写一下然后看一下在浏览器中的显示效果。html代码就如下所示:

    c8414920e8734f7917996e0116194529.png

    在网页中我们可以看到,这些元素每一个都单独占据一行的空间,不管内容是否够一行。

    5d3586592b00b33151e6c3c0ab24f17d.png

    (2)内联元素

    在html中,span、a、label、input、 strong 和em就是典型的内联元素(行内元素)(inline)元素。当然块状元素也可 以通过代码display:inline将元素设置为内联元素。内联元素特点:

    1、和其他元素都在一行上;

    3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

    注意:为 a 元素设置了宽和高,但都没有起到作用,原因是a在默认的时候是内联元素,内联元素是不可以设置宽和高的。

    我们这里将内联元素代码写一下然后看一下在浏览器中的显示效果。html代码就如下所示:

    22674da33ad6af7f9c1379f747f75196.png

    在网页中我们可以看到,这些元素会在一行一直排着显示,直到充满整行空间才会换行显示。

    61f4102386caa1f2f990c1efccb6b255.png

    (3)内联块级元素

    内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。inline-block元素特点:

    1、和其他元素都在一行上;

    2、元素的高度、宽度、行高以及顶和底边距都可设置。

    注意:img是inline元素,但是他同时也是替换元素,他有着特殊的表现:

    1. 可以设置width/height;

    2. 默认的,img元素在屏幕占据的空间与其图片的实际像素一致,除非CSS有设置或者自身的width/height HTML 属性有设置;

    3. 如果img标签的包裹元素为也为inline元素,则img的边界可以超出其直接父元素的边界,直到自己的宽、高达到最大或者设定值为止,而且文档流中img的兄弟元素也不能遮盖住img。最常见的就是a里面包含的img;

    4. 所以从行为上看,img元素作为替换元素,有着类似于Inline-block的行为,尽管在SPEC里面,他的确是一个inline元素。

    对于html的元素分类今天就先介绍到这里,大家在平时可以自己多加练习练习,做到每个标签属于什么元素。

    成功的秘诀就是每天都比别人多努力一点。返回搜狐,查看更多

    责任编辑:

    展开全文
  • 行内元素 块级元素

    2021-09-08 14:40:51
    如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽; 特点 1.每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行。 2.元素的高度、宽度、行高和顶...
  • 块级元素 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为块级元素 display: block; ...
  • 一、任何不是块级元素的可见元素都是内联元素##块元素(block element)* address - 地址* blockquote - 块引用* center - 举中对齐块* dir - 目录列表* div - 常用块级容易,也是css layout的主要标签* dl - 定义列表...
  • 行内元素和块级元素以及行内块级元素总是傻傻分不清,下面进行总结。 二、总结 2.1、块级元素 1、它独占一行。 2、它的宽高可以设置。 3、默认时,宽度是100%。 例如:<div>,<h1-h6>,<ul>,<ol...
  • 1.块级元素: (1)独自占据一行,故默认宽度是容器的100%。 (2)可以设置宽、高、行高、内外边距。 (3)可以容纳行内元素和其他块级元素。 注:文字类的块级元素不能容纳块级元素,例如<p>/<h1>~<h6&...
  • 【CSS】块级元素

    2021-02-01 01:07:06
    1、元素框的最内部分是实际的内容。2、直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。3、边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。水平格式化1、width影响的是...
  • 无论是初学者或者是即将面试的前端工程师,行内元素及块级元素都是非常重要的知识点,在布局设置宽高和边距时经常由于混淆行内元素及块级元素出现问题。 一、显示元素 (一)块级元素 div、p、h1-h6、form、ul、...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 100,065
精华内容 40,026
关键字:

块级元素

友情链接: 时频分析.rar