精华内容
下载资源
问答
  • 块元素(block element)一般是其他元素的容器元素,能容纳其他块元素或内联元素。最常见的就是P和div这两个,说的简单点,块元素就好比一个四方块,可以放其他的四方块,并可以呈现在页面上任何地方。默认情况下块...
  • 块级元素(block)特性:总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;内联元素(inline)特性:和相邻的内联元素在同一行,接下来为大家详细介绍下,感兴趣的朋友可以参考下哈
  • 在用CSS布局页面的时候,我们会将HTML标签分成两种,块状元素和内联元素(我们平常用到的div和p就是块状元素,链接标签a... 内联元素 内联元素只能容纳文本或者其他内联元素,它允许其他内联元素与其位于同一行,但宽度
  • 内联元素(行内元素):内联元素只能容纳文本或者其他内联元素,是块级元素的后代,它允许其他内联元素与其位于同一行,不能设置高度(height)和宽度(width)。常见内联元素为“a”。 根据块级元素的概念我们可以...
  • html块状元素和内联元素 块和内联元素 (Block and Inline Elements) Let's understand block and inline elements using the below examples: 让我们使用以下示例了解block和inline元素: 输出代码示例: (Code ...

    html块状元素和内联元素

    块和内联元素 (Block and Inline Elements)

    Let's understand block and inline elements using the below examples:

    让我们使用以下示例了解block和inline元素:

    输出代码示例: (Code Sample with Output:)

    块级元素: (Block-Level Element:)

    A Block-level element occupies the entire space of the parent (container) such as <div> and <p> in the example .

    块级元素占据了父级(容器)的整个空间,例如示例中的<div><p>

    Note that both <div> and <p> start from a new line each time, forming a block-like structure. Block-level elements begin on new lines.

    请注意, <div><p>每次都从新行开始,形成块状结构。 块级元素从新行开始。

    Common block-level elements are <div>,<p>,<article>,<section>,<figure>,<footer> etc.

    常见的块级元素<div><p><article><section><figure><footer>等。

    内联元素: (Inline Element:)

    Inline as the name says “included as a part of the main text and not as a separate section”. Inline elements occupy the space as needed within the space defined by the main element. Unlike block-level elements, they do not begin on new lines.

    内联顾名思义是“包含在正文中,而不是单独的部分”。 内联元素根据需要在主元素定义的空间内占据空间。 与块级元素不同,它们不是从新行开始。

    Some of the inline elements are <a>,<span>,<img>,<code>,<cite>,<button>,<input> etc.

    一些内联元素<a><span><img><code><cite><button><input>等。

    输出代码示例: (Code Sample with Output:)

    Note : Block-level elements may contain other block-level elements or inline elements. Inline elements cannot contain block-level elements.

    注意 :块级元素可能包含其他块级元素或内联元素。 内联元素不能包含块级元素。

    HTML5中的变化 (Changes In HTML5)

    While an understanding of block and inline elements is still relevant, you should be aware that these terms were defined in prior versions of the HTML specification.

    尽管对block和inline元素的理解仍然很重要,但是您应该知道这些术语是在HTML规范的先前版本中定义的。

    In HTML5, a more complex set of “content categories” replaces block-level and inline elements. Block-level elements are largely placed in the “flow content” category in HTML5, while inline elements correspond to the “phrasing content” category.

    在HTML5中,一组更复杂的“内容类别”代替了块级元素和内联元素。 块级元素主要位于HTML5的“流内容”类别中,而内联元素则对应于“短语内容”类别。

    For more information on the new content categories in HTML5, including flow content and phrasing content, refer to the Content categories page on the Mozilla Developer Network.

    有关HTML5中新内容类别(包括流内容和措辞内容)的更多信息,请参阅Mozilla开发人员网络上的内容类别”页面。

    Read more about HTML here.

    在此处阅读有关HTML的更多信息。

    翻译自: https://www.freecodecamp.org/news/inline-elements-and-block-elements-in-html-explained/

    html块状元素和内联元素

    展开全文
  • 布局中常用的有三种标签,块元素、内联元素、内联块元素,了解了这三种元素的特性,才能熟练的对页面进行布局。 1.块元素 块元素(会占据文档流一行显示),也可以称为行元素,布局中常用的标签如:div、p、ul、li...

    元素就是标签,

    布局中常用的有三种标签,块元素、内联元素、内联块元素,了解了这三种元素的特性,才能熟练的对页面进行布局。

    1.块元素

    块元素(会占据文档流一行显示),也可以称为行元素,布局中常用的标签如:div、p、ul、li、h1~h6、dl、dt、dd、ol 等等都是块元素。,它在布局中的行为:支持全部的样式。如果没有设置宽度,默认的宽度为父级宽度 100% 盒子占据一行、即使设置了宽度同样也是父级宽度100%。

    如图,两个div各自占据一行。

    块元素转换为内联元素。display:inline(转换之后,无法设置宽高,大小跟随内容决定,且不会占据一行显示)

    如上图所示,原本H1标题占据一行显示,转换为内联元素后后面的冒号并排显示,且大小不生效。

    2.内联元素(inline,不会占据文档流一行显示,并且其不能设置宽高,大小是由内容决定)

    内联元素,也可以称为行内元素,布局中常用的标签如:aspanem、b、strongi 等等都是内联元素。

    它们在布局中的行为: Ø 支持部分样式(不支持宽、高、margin上下、padding 上下)Ø 宽高由内容决定 Ø 盒子并在一行 Ø 代码换行,盒子之间会产生间距Ø 子元素是内联元素,父元素可以用text-align 属性设置子元素水平对齐方式,用line-height 属性值设置垂直对齐方式

    将内联元素转换为内联块元素。display:inline-block(转换后可并排显示)

    例:

    将内联元素转换为块元素。display:block(转换后占据文档流一行显示)

     

     


    解决内联元素间隙的方法
             1、去掉内联元素之间的换行

      2、将内联元素的父级设置 font-size 为 0,内联元素自身再设置 font-size 

     

     

    3.内联块元素(块元素转换为内联块元素后可以显示文档流一行)

    内联块元素,也叫行内块元素,是新增的元素类型,现有元素没有归于此类别的,img 和input元素的行为类似这种 元素,但是也归类于内联元素,我们可以用 display 属性将块元素或者内联元素转化成这种元素。它们在布局中表现 的行为:
    Ø 支持全部样式 Ø 如果没有设置宽高,宽高由内容决定
    Ø 盒子并在一行 Ø 代码换行,盒子会产生间距 子元素是内联块元素,父元素可以用 text-align 属性设置子元素水平对齐方式,用 line-height 属性值设置子元素垂 直对齐方式
    这三种元素,可以通过 display 属性来相互转化,不过实际开发中,块元素用得比较多,所以我们经常把内联元素转 化为块元素,少量转化为内联块,而要使用内联元素时,直接使用内联元素,而不用块元素转化了。

    举栗:

    如何让这两个div元素水平排列?

    我们将第一个div块元素转换为内联块元素。

    转换之后两个元素之间明显出现一道缝隙,但没有水平排列。

     

     

    将两个块元素通过display:inline-block都转换为内联块元素之后,水平排列完成。(两个元素之间的缝隙为默认5px的间距

    给予第二个元素“margin-left:-5px”之后,缝隙消失。

    如图

    display 属性*
    display 属性是用来设置元素的类型及隐藏的,常用的属性有:

    1、none 元素隐藏且不占位置

    2、block 元素以块元素显示
           3、inline 元素以内联元素显示

    4、inline-block 元素以内联块元素显示
     

     

     

     

     

     

     

     


     

    展开全文
  • 块元素,内联元素,内联块元素 1.块元素: 也称行元素, 布局中常用的标签如:div,p, h1-h6,ul,li... 支持全部的样式 可以设置元素的大小,并且元素是独占一行显示,如果没有设置宽度,默认的宽为父级100%盒子占据一...

    一.块元素,内联元素,内联块元素

    1.块元素:

         也称行元素, 布局中常用的标签如:div,p, h1-h6,ul,li...

           支持全部的样式

         可以设置元素的大小,并且元素是独占一行显示,如果没有设置宽度,默认的宽为父级100%盒子占据一行

    2.内联元素:

         也称行内元素,布局中常用的标签如:a,span,b,u,i...  

         (1)支持部分样式(不支持宽,高 margin上下,padding上下)

          (2)宽高由内容决定

          (3)盒子并在一行

          (4)代码换行,盒子之间会产生间距

          (5)不可设置元素的大小,但是元素并在一行显示,先写的先排列,后写的后排列 

          (6)子元素是内联元素,父元素可以用text-align 属性设置子元素水平对齐方式,用line-height属性设置垂直对齐方式

    3.解决内联元素的间隙方法:

          (1)设置margin-left为负值

          (2)去掉内联元素之间的换行

          (3)将内联元素的父级设置font-size为0,内联元素自身再设置font-size

    4.内联块元素:

         也称行内块元素,是新增的元素类型,img和input元素的行为类型这种元素,但是也归类于内联元素,可以用display属性将块元素或内联元素转化成这种元素       

           它们的布局行为:

           (1)支持全部样式

           (2) 如果没有设置宽高,宽高由内容决定

           (3)盒子并在一行

           (4)代码换行,盒子会产生间距

           (5)子元素是内联块元素,父元素可以用text-align设置子元素水平对齐方式,用line-height属性设置子元素垂直对齐方式  

    5.内联块元素之间的转换和使用:

            通过display属性来互相转化,块元素用的较多,经常把内联元素转化为块元素,少量转化为内联块元素,要使用内联元素时,直接使用内联元素,而不用块元素转化.

            display 属性:     none        元素隐藏且不占位置

                                     inline     元素以内联元素显示

                                    block     元素以块元素显示

                                    inline-block    元素以内联块元素显示

    二.元素溢出:当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式

    设置的方法是通过overflow属性来设置overflow属性:

         (1)visibke 默认值 内容不会被修改,会呈现在元素框之外

        (2)hidden 内容会被裁剪,并且其余内容是不可简单,超出父元素内容被隐藏 (此属性还有清除浮动,清除margin-top塌陷的功能)

        (3)scroll 内容会被修改,则浏览器会显示滚动条以便查看其余的内容    内容无论是否超出元素元素框 都会添加滚动条

           overflow-x:scroll 设置水平滚动条     overflow-y:scroll 设置垂直滚动条

        (4)auto  内容被修改,则浏览器会显示滚动条以便查看其余的内容 

        (5) inherit  规定应该从父元素继承overflow属性的值

    三.浮动:

    1.文档流:

          指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排,后写的后排,每个盒子都占据自己的位置.   

    2. 浮动特性:

        (1)浮动元素有 左浮动(float:left)和右浮动(float:right),

        (2)浮动的元素会向左或向右浮动,碰到父级元素边界,浮动元素,未浮动的元素才停下来

        (3)相邻浮动的块元素可以并在一行,超出父级宽度就换行

        (4)浮动让行内元素或块元素自动转化为行内块元素

        (5)浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动的元素内的文字会避开浮动的元素,形成文字饶图的效果

        (6)父元素内整体浮动的元素无法撑开父元素,需要清除浮动

        (7)浮动元素之间没有垂直 margin的合并

    3.清除浮动:   

            (1)父级上增加属性 overflow:hidden 

            (2)在最后一个子元素的后面加一个空的div,给样式属性clear:both

            (3)使用成熟的清除浮动样式类     .clearfix:after,.clearfix:before {

                                                                content:"";

                                                              disply:table;}

    四.定位:使用CSS的position属性来设置元素的定位类型

    1.postion的设置项如下:

        (1)relative:生成相对定位元素,元素本身相对于在html文档流中位置的进行偏移

        (2)absolute: 生成绝对定位元素,该元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了相对于body元素进行定位.(子绝父相)

        (3)fixed: 生成固定定位元素,匀速脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流动上方,相对于浏览器窗口进行定位

        (4)static:默认值,没有定位,元素出现在正常的文档流中,相当于取消定位属性或者不设置定位属性

        (5)inherit :从父元素继承position属性值

    2.定位元素特性:

             绝对定位和固定定位的块元素和行内元素会自动转化为行内元素

    3.定位元素层级:

              定位元素时浮动的正常的文档流之上的,可以用z-index属性设置元素的层级 取值为:0-999 值越大层级越大

    4.典型定位布局 :

                               (1)固定在顶部的菜单

                               (2)水平垂直居中的弹框

                               (3)哭的的侧边的工具栏

                               (4)固定在底部的按钮

       

    展开全文
  • 其实这个问题很简单——先要认清span的属性,因为span属于内联元素,而内联元素是忽略宽度和高度的,明白了这一点解决就很简单了,解决的办法就是利用css将span变为盒装元素即可。 将内联元素定义为盒装元素的方法有...
  • 对于display我想很多人都不陌生,然而在谈到内联元素,行内元素等词,还是会有人脑袋瓜子充满了疑问???我曾经自以为已经了解并懂得如何使用display,在学习vertical-align及替换元素等的时候,才深刻明白自己也就...

    对于display我想很多人都不陌生,然而在谈到内联元素,行内元素等词,还是会有人脑袋瓜子充满了疑问???我曾经自以为已经了解并懂得如何使用display,在学习vertical-align及替换元素等的时候,才深刻明白自己也就一知半解,接下来不说display各种参数的使用方法,而是谈谈display形成的各种盒模型

    display

    指定了元素的显示类型,包含两种用于指定元素怎样生成盒模型 => 决定了布局的方式,直接影响height

    1. 外部显示类型:display:block | display:inline
    2. 内部显示类型:display:flow | display:table | display:flex
    3. 外部div的高度,由其内部的文档流元素的高度总和决定,并不是相等

    我的个人的看法是外部显示类型主要是指在整个文档流当中此div的状态,而内部显示类型就是此div里面的内容布局,(例如现在经常使用的flex,就是此div内部的各个元素根据flexbox模型展示)

    文档流

    1. 如果是内联元素,文档流流动方向从左到右布局,宽度不够,换行继续流
    2. 如果是块级元素,文档流流动方向从上到下布局,一个block占据一行,依次向下布局,即使一个块宽度不足以达到总宽度

    内联元素inline

    1. 也叫行内元素,一个行内元素只占据它对应标签的边框所包含的空间
    2. 常见行内元素:<a></a> | <abbr></abbr> | <em></em> | <strong></strong> | <span></span> | <img> | <script></script> | <label></label>
    3. 特点:
    • 元素从左到右流动布局
    • 元素的height、width、margin-top、margin-bottom不可设置
    • 元素的高度就是它自身的建议行高 =>content-area的高度
    • 注意点:内联元素设置行高会有位置的变化,但没有改变盒子大小(在为内联元素设置背景时,默认高度的地方有背景),inline-box行内框高度=content area内容的高度,特殊内联元素除外!!!
    1. 内联元素转块级元素:display:block

    块级元素block

    1. 块级元素占据其父元素容器的整个空间
    2. 常见块级元素:<div></div> | <address></address> | <article></article> | <audio></audio> | <canvas></canvas> | <dd></dd> | <dl></dl> | <footer></footer> | <form></form> | <hr> | <header></header> |<h1>-<h6> | <ol></ol> | <p></p> | <section></section> | <table></table> | <ul></ul> | <video></video>
    3. 特点:
    • 每个块级元素都从新的一行开始
    • 元素的height、width、line-height、margin-top、margin-bottom都可以设置
    • 元素width在不设置的情况下,是它本身父容器的100%(除非设定一个宽度)
    1. 块级元素转内联元素:display:inline

    内联块级元素inline-block =>特殊的内联元素

    1. 替换元素,如 img / input / svg 等
    2. inline-block 元素,以及所有 display 值以 inline- 开头的元素,如 inline-table / inline-flex
    3. 处于某种特殊格式化上下文的内联元素,例如 flexbox 元素中的子元素都处于 flex formatting context(弹性格式化上下文)中
    4. 特点:
    • 元素的height、width、line-height、margin-bottom、margin-top都可以设置
    • 行框line-box和content-area的高度可被改变

    对于内联块级元素,我在看很多材料的时候,都发现很多人将其归类于内联元素或者行内元素中,则让我一度产生了很深的疑惑,为什么内联元素一会儿可以改变line-height一会儿不可以的,如果将其说成是内联块级元素,我相信很多初学者就会恍然大悟了,特别是针对替换元素,就不至于一脸懵逼两脸懵圈了~

    展开全文
  • 也叫行级元素、内联元素。 行内元素默认设置宽度是不起作用,需设置 display:inline-block 或者 block 才行。 行内元素的特点 可以和其他元素处于一行,不用必须另起一行; 元素的高度、宽度及顶部和底部边距不...
  • 在css盒子模型中,我们提到...块元素(block element)一般是其他元素的容器元素,能容纳其他块元素或内联元素。最常见的就是P和div这两个,说的简单点,块元素就好比一个四方块,可以放其他的四方块,并可以呈现在页...
  • 块元素、内联元素、内联块元素 元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。 块元素 块元素,也可以称为行元素,布局中常用的标签如:div...
  • 此元素会被显示为内联元素,元素前后没有换行符。 inline-block 行内块元素。(CSS2.1 新增的值) list-item 此元素会作为列表显示。 run-in 此元素会根据上下文作为块级元素或内联元素显示。 table 此元素...
  • 块状元素(block),行内元素(inline),行内块状元素(inline-block)。 一、块级元素: 1.每一个块级元素独占一行,下一个块级元素要另起一行。 2.元素的高度、宽度、行高以及顶和底边距...二、内联元素(行...
  • 页面布局中常用的三种标签:块元素、内联元素、内联块元素。 1. 块元素(行元素) 常见块元素:div、ul、li、dl、dt、dd、p、h1-h6 特点: 支持全部的样式; 若没有设置宽度,默认的宽度为父级的100%; 盒子占据一...
  • 内联元素的padding和margin能设置上吗? ​ 这是我前段时间面试某中厂被问到的一道面试题,一开始有点懵,但照自己的理解是这样回答的:内联元素不能通过改变宽高来改变元素大小,只能通过内部撑开,padding设置不...
  • 1.什么是内联元素内联元素有很多种叫法,如内联元素、内嵌元素、行内元素、直进式元素等,和块级元素对应。内联元素和它的兄弟元素之间一个挨着一个,都在同一行按从左至右的顺序显示,不单独占一行。 2.内联...
  • 块状元素 块状元素最大的特点是可以独占一行。...我们在一个html文件里写入块状元素、内联元素、内联-块状元素,并给它们分别设置样式来看一看效果: <!DOCTYPE html> <html> <head> <...
  • 内联元素特点

    2021-04-07 15:30:33
    内联元素(非置换元素)特点 以下描述都只针对于非置换内联元素。 设置宽高无效 内联元素设置宽高无效,默认宽高为自己本身内容大小。 只支持水平外边距,不支持垂直外边距, 可以设置水平外边距,而设置 ...
  • canvas 是内联元素?问题总结参考 前言 canvas 元素有默认的宽高,到底是块级元素还是内联元素,一直都很疑惑?下面就让我们来验证 canvas 是块级元素? 在 MDN 中可以看到 块级元素列表,其中就包含 canvas 元素,...
  • 块元素又名块级元素,和其对应的是内联元素,都是html规范中的概念,内联元素其中文叫法有多种,如:内联元素、内嵌元素、行内元素、直进式元素等
  • 块元素 块元素,也可以称为行元素,布局中常用的标签如:div、p、ul、li、h1~h6、dl、dt、dd...内联元素,也可以称为行内元素,布局中常用的标签如:a、span、em、b、strong、i等等都是内联元素,它们在布局中的行...
  • 1.特性 块级元素(block level element) 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制 ... 内联元素...
  • 块元素内联元素

    2018-02-24 13:29:22
    块级元素、行内元素、内联元素的特点,常见的元素的特点属性(href、src的区别,alt和title的区别)块级元素:div,ul,ol,dl,li,p,h1~h6,table,form,pre,address“form"这个块元素比较特殊,它只能...
  • 我们先来了解一下块元素和内联元素的概念 块元素:独占一行的元素,无论它的内容有多少,它都会独占一整行。 例如:p,h1,h2,h3…div等标签都是一个块元素 div标签没有任何语义,就是一个单纯的块元素,并且不会为它...
  • 今天先来解释一下什么是内联元素,什么是块元素 百度百科中怎么写呢: 块元素又名块级元素(block element),和其对应的是内联元素(inline element),都是html规范中的概念。大多数HTML 元素被定义为块级元素或...
  • 块状元素和内联元素(我们平常用到的div和p就是块状元素,链接标签a就是内联元素)。 块状元素一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(height)...
  • 块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后...内联元素(inline)特性: 和相邻的内联元素在同一行; 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的t...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 119,793
精华内容 47,917
关键字:

内联元素