-
2021-04-09 09:58:33更多相关内容
-
HTML行内元素与块级元素有哪些及区别?
2021-01-08 08:27:44想起之前工作面试时,面试官问的一个问题:行内元素有哪些,和块级元素有什么区别?这是一道蛮基础的面试题,但是很多初学者平时只注重标签语义,忽视了标签行内和块级的特性, 因此对于上述问题很有可能答不上来... -
css中行内元素和块级元素的区别
2020-12-04 02:01:31一、行内元素和块级元素的区别 1、 行内元素不会占据整行,在一条直线上排列,都是同一行,水平方向排列; 块级元素会占据一行,垂直方向排列。 2、 块级元素可以包含行内元素和块级元素;行内元素不能包含... -
微信小程序布局之行内元素和块级元素
2021-03-29 20:30:03元素按照显示方式主要可以分为块级元素和行内元素,元素的显示方式由display属性控制。 块级元素特点总结: 1、总是在新行上开始 2、宽度的默认为width+margin-left+margin-right+padding-left+padding-right刚好... -
块级元素的三种垂直水平居中的方法
2020-12-29 15:28:33直奔主题在这里提供三种块级元素垂直水平居中的方法 flex(子级宽高可固定也可不固定,随意) 定位+margin(固定子级的宽高,margin-top,margin-left取自身一半的负值) 定位+transform(不固定子级的宽高) flex... -
浅谈CSS块级元素与行内元素(内联元素)的区别和联系
2020-12-13 09:11:00块元素(block element)一般是其他元素的容器元素,能容纳其他块元素或内联元素。最常见的就是P和div这两个,说的简单点,块元素就好比一个四方块,可以放其他的四方块,并可以呈现在页面上任何地方。默认情况下块... -
text-indent的用法包括块级元素等详细总结
2020-12-13 15:37:451.text-indent应用于块级元素 2.text-indent应用于行内元素 3.text-indent应用于替换元素 4.text-indent应用于inline-block元素 5.继承 6.总结 一、text-indent应用于块级元素 text-indent常用于段落首行2字符的缩进... -
【CSS基础学习】行内元素,块级元素,行内块级元素
2021-01-08 10:23:34文章目录元素的显示方式和转换块级元素行级元素行内块级元素显示方式之间的转化 元素的显示方式和转换 块级元素 块级元素(inline): 块级元素可以包含行内元素和其它块级元素,且占据父元素的整个空间,可以设置 ... -
对于div,p等块级元素css如何实现自动换行
2020-12-13 09:33:20复制代码代码如下: ”wrap”>正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div> css 复制代码代码如下: #wrap{white-space:normal; width:200px; } 1.(IE浏览器)连续的英文... -
网页中块级元素行内元素css盒子里面水平居中对齐_css选中第一个元素
2020-07-23 09:27:11盒子水平居中 快兔兵团 居中的含义 块级盒居中 块级盒子木身居中 块级盒子里而有内容居中 行内元素居中 设置外围盒子 设置本身 块级元素居中(本身居中) 100100 认的是左上角对齐 div class=box </div> 盒子的位置 ... -
CSS行内元素和块级元素的居中实例分析
2020-12-13 15:23:39行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的margin-left和margin-right设置成auto,将table居中,使... -
html 内联元素和html 块级元素概述及区别
2020-09-28 07:41:07块级元素(block)特性:总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;内联元素(inline)特性:和相邻的内联元素在同一行,接下来为大家详细介绍下,感兴趣的朋友可以参考下哈 -
对行内元素和块级元素的一些认识
2020-12-13 17:21:11一、常见块级元素有哪些: 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 ; 三... -
详解HTML常用的标签中行内元素和块级元素
2020-12-11 05:13:19* div – 常用块级容易,也是css layout的主要标签 * dl – 定义列表 * fieldset – form控制组 * form – 交互表单 (只能用来容纳其它块元素) * h1 – 大标题 * h2 – 副标题 * h3 – 3级... -
标签 li 是不是块级元素分析
2020-09-28 07:52:56块级元素:block-level,相信大家都知道吧(or Google it)。以前在写代码的时候,面对 标签总觉得很奇怪。 -
关于块级元素和行内元素
2014-09-15 23:03:05关于块级元素和行内元素的一些小知识点的总结 -
详解块级元素、行内元素、行内块级元素类型、区别及相互转化
2019-05-02 17:44:451)块级元素 特点: 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>
前两行不做改变,第三、四行转为行内块级元素,第五、六行转为块级元素,此时在浏览器中的显示效果为:
可以看到行内元素不能独占一行,且设置外边距无效;行内块级元素也不能独占一行,但能够设置外边距;块级元素即独占一行,也能够设置外边距。
-
CSS布局之块级元素、块级元素和行内块元素
2020-12-29 10:08:38元素有行内元素(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 外边距
行内块元素可正常设置外边距。值得注意的是,行内块的外边距跟其他行内块元素或块级元素的外边距不会发生重叠。
-
行内元素和块级元素 displayDemo.html
2019-04-13 01:13:59NULL 博文链接:https://maoting.iteye.com/blog/1722563 -
HTML+CSS:html元素分类之块级元素、内联元素、内联块级元素
2021-06-12 01:22:20原标题:HTML+CSS:html元素分类之块级元素、内联元素、内联块级元素 html元素主要分为3类,块级元素、内联元素以及内联块级元素,本篇文章我们来就详细介绍一下各个分类的含义以及对应的特点。(1)块级元素在html中...原标题:HTML+CSS:html元素分类之块级元素、内联元素、内联块级元素
html元素主要分为3类,块级元素、内联元素以及内联块级元素,本篇文章我们来就详细介绍一下各个分类的含义以及对应的特点。
(1)块级元素
在html中div、 p、hx、form、ul 、 li、dl、dd就是块级元素。css属性设置display:block就是将元素显示为块级元素。块级元素特点:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行;(一个块级元素独占一行)
2、元素的高度、宽度、行高以及顶和底边距都可设置;
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
我们这里将块级元素代码写一下然后看一下在浏览器中的显示效果。html代码就如下所示:
在网页中我们可以看到,这些元素每一个都单独占据一行的空间,不管内容是否够一行。
(2)内联元素
在html中,span、a、label、input、 strong 和em就是典型的内联元素(行内元素)(inline)元素。当然块状元素也可 以通过代码display:inline将元素设置为内联元素。内联元素特点:
1、和其他元素都在一行上;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
注意:为 a 元素设置了宽和高,但都没有起到作用,原因是a在默认的时候是内联元素,内联元素是不可以设置宽和高的。
我们这里将内联元素代码写一下然后看一下在浏览器中的显示效果。html代码就如下所示:
在网页中我们可以看到,这些元素会在一行一直排着显示,直到充满整行空间才会换行显示。
(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块级元素、行内元素、行内块级元素
2021-02-07 08:48:50块级元素 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为块级元素 display: block; ... -
HTML的块级元素和内联元素
2021-07-06 07:20:20一、任何不是块级元素的可见元素都是内联元素##块元素(block element)* address - 地址* blockquote - 块引用* center - 举中对齐块* dir - 目录列表* div - 常用块级容易,也是css layout的主要标签* dl - 定义列表... -
css块级元素,行内元素和行内块级元素
2022-04-11 10:38:20行内元素和块级元素以及行内块级元素总是傻傻分不清,下面进行总结。 二、总结 2.1、块级元素 1、它独占一行。 2、它的宽高可以设置。 3、默认时,宽度是100%。 例如:<div>,<h1-h6>,<ul>,<ol... -
块级元素、行内元素、行内块级元素的特点
2019-07-25 14:39:061.块级元素: (1)独自占据一行,故默认宽度是容器的100%。 (2)可以设置宽、高、行高、内外边距。 (3)可以容纳行内元素和其他块级元素。 注:文字类的块级元素不能容纳块级元素,例如<p>/<h1>~<h6&... -
【CSS】块级元素
2021-02-01 01:07:061、元素框的最内部分是实际的内容。2、直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。3、边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。水平格式化1、width影响的是... -
块级元素和行内元素的区别
2021-03-26 15:04:48无论是初学者或者是即将面试的前端工程师,行内元素及块级元素都是非常重要的知识点,在布局设置宽高和边距时经常由于混淆行内元素及块级元素出现问题。 一、显示元素 (一)块级元素 div、p、h1-h6、form、ul、...