精华内容
下载资源
问答
  • 行内元素和块级元素

    2021-03-12 20:34:58
    行内元素和块级元素 行内元素和块级元素的区别 常见的行内元素和块级元素

    行内元素和块级元素

    1.块级元素

    • 独占一行
    • 宽高以及边距都可以设置
    • 宽度缺省是他容器的100%,除非设定一个宽度
    • 可以容纳内联元素(行内元素)和其他块级元素

    2.行内元素

    • 和其他行内元素在一行上
    • 高,行高以及边距不可改变
    • 宽度是他文字或者图片的宽度,不可改变
    • 行内元素只能容纳文本或者其他行内元素
    • 注意:
      设置宽度width 无效。
      设置高度height 无效,可以通过line-height来设置。
      设置margin 只有左右margin有效,上下无效。
      设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。两者的区别主要在盒模型上。

    3.行内元素和块级元素的转换(display属性)

    描述
    none 此元素被隐藏
    block 元素显示为块级元素,并前后会带有换行符
    inline 默认,元素显示为内联元素,前后没有换行符
    inline-block 行内块元素
    • inline-block 的元素(如input、img)既具有 block 元素可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性,比如 inline-block 元素也可以设置 vertical-align(因为这个垂直对齐属性只对设置了inline-block的元素有效) 属性。块级元素会换行,就有换行,HTML 中的换行符、空格符、制表符等合并为空白符.所以换行符会占据宽度,产生间隙

    • 如何取消inline-block产生的间隙
      1.使用负值的margin各个浏览器的负值也不相同,才能完美贴合
      2.在父元素的css中设置word-spacing负值

    • HTML 中的换行符、空格符、制表符等合并为空白符,字体大小不为 0 的情况下,空白符自然占据一定的宽度,使用inline-block 会产生元素间的空隙。

    • 在了解inline-block之前,导航栏一直采用float浮动来达到横向排列的目的,然而浮动是会产生副作用的,需要清除浮动,相对变得麻烦了。使用inline-block将会变得很方便

    4.HTML中常见块级元素

    标签 描述
    canvas 定义图形
    caption 定义表格标题
    div 定义文档中的节
    dl 定义列表
    dt 定义列表中的项目
    footer 定义section或者page的页脚
    header 定义section或者page的页眉
    h1-h6 定义html标题
    hr 定义水平线
    nav 定义导航链接
    ol 定义有序列表
    ul 定义无序列表
    li 定义列表中的项目
    p 定义段落
    section 定义节
    table 定义表格
    thead 定义表头
    th 定义表头单元格
    tbody 定义表格主题内容
    tr 定义表格中的行
    td 定义表格单元
    tfoot 定义表格标注内容(脚注)

    5.HTML中常见行内元素

    标签 描述
    a 定义锚
    b 字体加粗
    br 下一行
    button 定义按钮
    textarea 定义多行的文本输入控件
    del 定义被删文本
    em 强调文本
    img 定义图像
    i 定义斜体
    input 定义输入控件
    lable 定义input元素的标注
    select 定义选择列表
    option 定义选择列表的列表
    time 定义时间
    video 定义视频

    可变元素

    标签 描述
    button 定义按钮
    del 删除文本
    map 图片区块
    script 客户端脚本
    applet java applet
    iframe inline frame
    ins 插入的文本
    object object对象
    展开全文
  • html行内元素和块级元素行内元素和块级元素文档流概念 行内元素和块级元素 html标签也可以叫做元素,比如<h1>就是一个元素,html的元素分为块级元素和行内元素 常见块级元素: div、 p、 h1~h6、 ui、 ol、 ...

    html行内元素和块级元素

    行内元素和块级元素

    html标签也可以叫做元素,比如<h1>就是一个元素,html的元素分为块级元素和行内元素

    常见块级元素:

    divph1~h6uioldlliddtablehrblockquoteaddressmenupre

    常见行内元素:

    spanimgainputselecttextarealableabbrembigsmallhrciteiqsubsupstrongu

    块级元素会独占一行,可以设置宽高;行内元素可以共占一行,但不能设置宽高(行内块元素可以设置宽高,同时和其他元素共享一行,如<img> )。

    1. 可以通过使用css改变行内元素的特性实现控制其宽高:
      display:block 实现将行内元素变为块级元素,可控制其宽高,同时独占一行
      display:inline-block 实现行内元素变为行内块,可控制其宽高,同时与其他行级元素共享一行
    2. 通过修改块级元素的特性实现其与其他元素共享一行
      float:

    文档流概念

    浏览器在显示内容(包括文本、图片、超链接、音频、视频等)时,是从左往右,从上到下的顺序显示的,这种形式是一个标准的文档流,标准的文档如果把浏览器看成一个平面则所有元素在该平面占用空间
    如果某个元素脱离了标准流则不再占用浏览器标准流的平面空间。这样的元素一般是浮动元素,浮动到了标准流的上方,这样的元素叫做非标准流。
    在这里插入图片描述

    展开全文
  • 三、行内元素示例HTMLCSSExample四、块级元素示例HTMLCSSExample五、行内元素的特点5.1 其他元素都在同一行上5.2 高,行高及外边距内边距不可改变5.3 宽度就是它的文字或图片的宽度,不可改变5....

    一、行内元素

    一个行内元素只占据它对应标签的边框所包含的空间。

    二、块级元素

    块级元素占据其父元素(容器)的整个空间,因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。

    三、行内元素示例

    HTML

    bV6Iwl?w=1470&h=72

    CSS

    bV6Ixe?w=392&h=23

    Example

    bV6Ixz?w=665&h=189

    四、块级元素示例

    HTML

    bV6Izl?w=1468&h=68

    CSS

    bV6IyI?w=360&h=21

    Example

    bV6IzO?w=665&h=188

    五、行内元素的特点

    5.1 和其他元素都在同一行上

    5.2 高,行高及外边距和内边距不可改变

    5.3 宽度就是它的文字或图片的宽度,不可改变

    5.4 行内元素只能容纳文本或者其他行内元素

    5.5 设置行内元素,需要注意如下

    (1)设置宽度 width 无效。

    (2)设置高度 height 无效,但可以通过 line-height 来设置。

    (3)设置 margin 只有 左右有效,上下无效。

    (4)设置 padding 只有 左右有效,上下无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。

    六、块级元素的特点

    6.1 总是在新一行开始

    6.2 高度,行高以及外边距和内边距都可改变

    6.3 若宽度没有设置,则默认宽度为容器的100%,除非设定一个宽度

    6.4 块级元素可以容纳行内元素和其他块级元素

    七、行内元素和块级元素对比

    7.1 内容

    (1)一般情况下,行内元素只能包含数据和其他行内元素。

    (2)而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。

    7.2 格式

    默认情况下,行内元素不会以新行开始,而块级元素会新起一行。

    7.3 宽高

    (1)行内元素不可以设置宽高

    (2)块级元素可以设置宽高

    7.4 内边距和外边距

    (1)行内元素水平方向的 margin 和 padding 可以生效。但竖直方向的 margin 和 padding 不能生效。

    (2)块级元素可以设置margin,padding

    八、行内元素列表

    a

    锚点

    abbr

    缩写

    acronym

    首字

    b

    粗体(不推荐)

    bdo

    bidi override

    big

    大字体

    br

    换行

    cite

    引用

    code

    计算机代码(在引用源码的时候需要)

    dfn

    定义字段

    em

    强调

    font

    字体设定(不推荐)

    i

    斜体

    img

    图片

    input

    输入框

    kbd

    定义键盘文本

    label

    表格标签

    q

    短引用

    s

    中划线(不推荐)

    samp

    定义范例计算机代码

    select

    项目选择

    small

    小字体文本

    span

    常用内联容器,定义文本内区块

    strike

    中划线

    strong

    粗体强调

    sub

    下标

    sup

    上标

    textarea

    多行文本输入框

    tt

    电传文本

    u

    下划线

    九、块级元素列表

    address

    地址

    blockquote

    块引用

    center

    举中对齐块

    dir

    目录列表

    div

    常用块级容易,也是CSS layout的主要标签

    dl

    定义列表

    fieldset

    form控制组

    form

    交互表单

    h1

    大标题

    h2

    副标题

    h3

    3级标题

    h4

    4级标题

    h5

    5级标题

    h6

    6级标题

    hr

    水平分隔线

    isindex

    input prompt

    menu

    菜单列表

    noframes

    frames可选内容,(对于不支持frame的浏览器显示此区块内容

    noscript

    可选脚本内容(对于不支持script的浏览器显示此内容)

    ol

    有序表单

    p

    段落

    pre

    格式化文本

    table

    表格

    ul

    无序列表

    十、可变元素

    可变元素为根据上下文语境决定该元素为行内元素或者块级元素。

    applet

    java applet

    button

    按钮

    del

    删除文本

    iframe

    inline frame

    ins

    插入的文本

    map

    图片区块(map)

    object

    object对象

    script

    客户端脚本

    十一、行内元素和块级元素的转换

    11.1 display

    (1)行内元素 display:inline

    (2)块级元素 display:block

    (3)行内块元素 display:inline-block

    (4)行内元素转换块级元素 display:block

    (5)块级元素转换行内元素 display:inline

    11.2 float

    若设置行内元素 float:left/right,则该行内元素转换为块级元素 ,且具有浮动特性。

    11.3 position

    若为行内元素进行定位,position:absolute 或者 position:fixed 都会把行内元素转换为块级元素。

    展开全文
  • 探究行内元素和块级元素 探究行内元素和块级元素 CSS 在html中元素主要分为行内元素和块级元素 行内元素 不独占一行 书写完成后不会自动换行 没有宽和高 块级元素 独占一行 书写完会自动换行 宽和高可以修改...

    探究行内元素和块级元素

    探究行内元素和块级元素

    CSS


    html中元素主要分为行内元素和块级元素

    行内元素

    • 不独占一行
    • 书写完成后不会自动换行
    • 没有宽和高

    块级元素

    • 独占一行
    • 书写完会自动换行
    • 宽和高可以修改

    还有一种特殊的元素叫作行内块级元素

    描述
    none 此元素不会被显示。
    block 此元素将显示为块级元素,此元素前后会带有换行符。
    inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
    inline-block 行内块元素。(CSS2.1 新增的值)
    list-item 此元素会作为列表显示。

    块级元素和行内元素的分类

    html中的块级元素:


    标签 描述
    <address> 定义地址。
    <article> 定义文章。
    <aside> 定义页面内容之外的内容。
    <audio> 定义声音内容。
    <blockquote> 定义长的引用。
    <canvas> 定义图形。
    <caption> 定义表格标题。
    <dd> 定义定义列表中项目的描述。
    <div> 定义文档中的节。
    <dl> 定义定义列表。
    <dt> 定义定义列表中的项目。
    ` 定义元素的细节。  
    <fieldset> 定义围绕表单中元素的边框。
    <figcaption> 定义 figure 元素的标题。
    <figure> 定义媒介内容的分组,以及它们的标题。
    <footer> 定义 section 或 page 的页脚。
    <form> 定义供用户输入的 HTML 表单。
    <h1> to <h6> 定义 HTML 标题。
    <header> 定义 section 或 page 的页眉。
    <hr> 定义水平线。
    <legend> 定义 fieldset 元素的标题。
    <li> 定义列表的项目。
    <menu> 定义命令的列表或菜单。
    <meter> 定义预定义范围内的度量。
    <nav> 定义导航链接。
    <noframes> 定义针对不支持框架的用户的替代内容。
    <noscript> 定义针对不支持客户端脚本的用户的替代内容。
    <ol> 定义有序列表。
    <output> 定义输出的一些类型。
    <p> 定义段落。
    <pre> 定义预格式文本。
    <section> 定义 section。
    <table> 定义表格。
    <tbody> 定义表格中的主体内容。
    <td> 定义表格中的单元。
    <tfoot> 定义表格中的表注内容(脚注)。
    <th> 定义表格中的表头单元格。
    <thead> 定义表格中的表头内容。
    <time> 定义日期/时间。
    <tr> 定义表格中的行。
    <ul> 定义无序列表。

    html中的行内元素:


    标签 描述
    <a> 定义锚。
    <abbr> 定义缩写。
    <acronym> 定义只取首字母的缩写。
    <b> 定义粗体字
    <bdo> 定义文字方向。
    <big> 定义大号文本。
    <br> 定义简单的折行。
    <button> 定义按钮 (push button)。
    <cite> 定义引用(citation)。
    <code> 定义计算机代码文本。
    <command> 定义命令按钮。
    <dfn> 定义定义项目。
    <del> 定义被删除文本。
    <em> 定义强调文本。
    <embed> 定义外部交互内容或插件。
    <i> 定义斜体字。
    <img> 定义图像。
    <input> 定义输入控件。
    <kbd> 定义键盘文本。
    <label> 定义 input 元素的标注。
    <map> 定义图像映射。
    <mark> 定义有记号的文本。
    <objec> 定义内嵌对象。
    <progress> 定义任何类型的任务的进度。
    <q> 定义短的引用。
    <samp> 定义计算机代码样本。
    <select> 定义选择列表(下拉列表)。
    <small> 定义小号文本。
    <span> 定义文档中的节。
    <strong> 定义强调文本。
    <sub> 定义下标文本。
    <sup> 定义上标文本。
    <textarea> 定义多行的文本输入控件。
    <time> 定义日期/时间。
    <tt> 定义打字机文本。
    <var> 定义文本的变量部分。
    <video> 定义视频。
    <wbr> 定义可能的换行符。

    实例

    我们书写几个span标签
    此处输入图片的描述

    可以看到几个span都出现在了一行内

    我们再书写几个div标签
    此处输入图片的描述

    可以看到div已经垂直了(不在一行内)
    继续:我们给div添加一个刚才提到的特殊元素:行内块级元素inline-block
    此处输入图片的描述

    此处输入图片的描述
    此时div会变成行内块级元素,同时宽和高也在
    因此 inline-block既有行内元素水平排列的特点,也有块级元素设置宽高的特点

    • 仔细看上图,会发现水平方向有一个bug,有一个间隔 空闲时间可以去百度下hack~
    • 解决办法:
    • margin:-3pxposition:relitive;left:-3px;

    关于行内元素和块级元素先谈这么多,听说认真阅读并点赞的你,代码敲的最6哦~
    有兴趣的小伙伴可以加我微信,一起讨论~; V-x: dandanshen987

    有一天,当你明白"小白" +"勤奋"的时候,你就会成为大牛

    转载于:https://my.oschina.net/u/4130326/blog/3047274

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,099
精华内容 2,039
关键字:

行内元素和块级元素