精华内容
下载资源
问答
  • 二、块级元素块级元素占据其父元素(容器)的整个空间,因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。三、行内元素示例HTMLCSSExample四、块级元素示例HTMLCSSExample五、行内元素的特点5.1 和其他...

    一、行内元素

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

    二、块级元素

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

    三、行内元素示例

    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 都会把行内元素转换为块级元素。

    展开全文
  • 1、行内元素&块级元素 行内元素:指该元素标记的内容不不会对现在的结构造成影响。 块级元素:单独占据一行。 常见的行内元素: 内联元素(inline element): a - 锚点,abbr - 缩写,acronym - 首字,...
    1、行内元素&块级元素
    1. 行内元素:指该元素标记的内容不不会对现在的结构造成影响。
    2. 块级元素:单独占据一行。
    常见的行内元素:
    内联元素(inline element) 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 - 下划线,var - 定义变量。
    可变元素(为根据上下文语境决定该元素为块元素或者内联元素:applet - java applet,button - 按钮,del - 删除文本,iframe - inline frame,ins - 插入的文本,map - 图片区块(map),object - object对象,script - 客户端脚本。
    常见块元素(block element):address - 地址blockquote - 块引用center - 举中对齐块dir - 目录列表div - 常用块级容易,也是css layout的主要标签dl - 定义列表fieldset - form控制组form - 交互表单h1 - 大标题h2 - 副标题h3 - 3级标题,h4 - 4级标题h5 - 5级标题h6 - 6级标题hr - 水平分隔线isindex - input promptmenu - 菜单列表noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容noscript - )可选脚本内容(对于不支持script的浏览器显示此内容),ol - 排序表单,p - 段落pre - 格式化文本table - 表格ul - 非排序列表。
    2、块级元素与行内元素之间的转换
    display:inline; //块级元素(独占一行)变为行内元素--可以文本居中
    display:block; //行内元素变为块级元素--可以设置宽高
    display:inline-block; //其实仍是行内元素,但是可以设置width及height属性等
    展开全文
  • 块级元素可以包含行内元素和其它块级元素,且占据父元素的整个空间,可以设置 width 和 height 属性,浏览器通常会在块级元素前后另起一个新行。 常见块级元素: header,form,ul,ol,table,article,div,hr,aside,...
  • 行内元素块级元素

    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对象
    展开全文
  • 行内元素块级元素

    千次阅读 2015-08-11 07:51:40
    一、行内元素块级元素的三个区别 1.行内元素块级元素直观上的区别  行内元素会在一条直线上排列,都是同一行的,水平方向排列  块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。 2....

    一、行内元素与块级元素的三个区别

    1.行内元素与块级元素直观上的区别

        行内元素会在一条直线上排列,都是同一行的,水平方向排列

        块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。

    2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

    3.行内元素与块级元素属性的不同,主要是盒模型属性上

    行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效

    二、行内元素转换为块级元素

            display:block (字面意思表现形式设为块级)

    三、行内元素与块级元素

    块级元素列表
    <address> 定义地址
    <caption> 定义表格标题
    <dd> 定义列表中定义条目
    <div> 定义文档中的分区或节
    <dl> 定义列表
    <dt> 定义列表中的项目
    <fieldset> 定义一个框架集
    <form> 创建 HTML 表单
    <h1> 定义最大的标题
    <h2> 定义副标题
    <h3> 定义标题
    <h4> 定义标题
    <h5> 定义标题
    <h6> 定义最小的标题
    <hr> 创建一条水平线
    <legend> 元素为 fieldset 元素定义标题
    <li> 标签定义列表项目
    <noframes> 为那些不支持框架的浏览器显示文本,于 frameset 元素内部
    <noscript> 定义在脚本未被执行时的替代内容
    <ol> 定义有序列表
    <ul> 定义无序列表
    <p> 标签定义段落
    <pre> 定义预格式化的文本
    <table> 标签定义 HTML 表格
    <tbody> 标签表格主体(正文)
    <td> 表格中的标准单元格
    <tfoot> 定义表格的页脚(脚注或表注)
    <th> 定义表头单元格
    <thead> 标签定义表格的表头
    <tr> 定义表格中的行
    行内元素列表
    <a> 标签可定义锚
    <abbr> 表示一个缩写形式
    <acronym> 定义只取首字母缩写
    <b> 字体加粗
    <bdo> 可覆盖默认的文本方向
    <big> 大号字体加粗
    <br> 换行
    <cite> 引用进行定义
    <code> 定义计算机代码文本
    <dfn> 定义一个定义项目
    <em> 定义为强调的内容
    <i> 斜体文本效果
    <img> 向网页中嵌入一幅图像
    <input> 输入框
    <kbd> 定义键盘文本
    <label> 标签为 input 元素定义标注(标记)
    <q> 定义短的引用
    <samp> 定义样本文本
    <select> 创建单选或多选菜单
    <small> 呈现小号字体效果
    <span> 组合文档中的行内元素
    <strong> 语气更强的强调的内容
    <sub> 定义下标文本
    <sup> 定义上标文本
    <textarea> 多行的文本输入控件
    <tt> 打字机或者等宽的文本效果
    <var> 定义变量
    可变元素列表--可变元素为根据上下文语境决定该元素为块元素或者内联元素
    <button> 按钮
    <del> 定义文档中已被删除的文本
    <iframe> 创建包含另外一个文档的内联框架(即行内框架)
    <ins> 标签定义已经被插入文档中的文本
    <map> 客户端图像映射(即热区)
    <object> object对象
    <script> 客户端脚本

    展开全文
  • 行内元素块级元素,行内块级元素之间的区别前言一、行内元素特点:二、使用步骤1.引入库2.读入数据总结 前言 本次培训主要讲解了HTML的各种标签,感觉受益良多。所以我在课下总结了一下行内元素块级元素,行内...
  • 行内元素有:a b span img input select strong 块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p ...行内元素转块级元素:displai:inline 行内元素块级元素转行内块元素:display:inlind-block ...
  • 想起之前工作面试时,面试官问的一个问题:行内元素有哪些,和块级元素有什么区别?这是一道蛮基础的面试题,但是很多初学者平时只注重标签语义,忽视了标签行内和块级的特性,因此对于上述问题很有可能答不上来或者...
  • 什么是行内元素块级元素、行内块级元素 块级元素 每个块级元素通常都会独占一行或者是多行,可以对其单独设置高度,宽度以及对齐等属性。 常见的块级元素有:<h1>~<h6>,<p>,<div>,<ul&...
  • 行内元素转换成块级元素 在行内元素中设置display:block;就可以让行内元素变成块级元素。 在行内元素中设置display:inline-block; 就可以让行内元素变成块级元素,而且可以在同一行内显示。...
  • 行内元素块级元素 html标签也可以叫做元素,比如<h1>就是一个元素,html的元素分为块级元素行内元素 常见块级元素: div、 p、 h1~h6、 ui、 ol、 dl、 li、 dd、 table、 hr、 blockquote、 address、 ...
  • 一、行内元素块级元素的区别 1、 行内元素不会占据整行,在一条直线上排列,都是同一行,水平方向排列; 块级元素会占据一行,垂直方向排列。 2、 块级元素可以包含行内元素块级元素;行...
  • HTML标签的类型分为三种:行内元素,行内块元素,块级元素 而标签的属性是可以转换的 display:inline: 转换为行内元素 display:linline-block 转换为行内块元素 display:block 转换为块级元素 特性: 行内元素: 1.无法...
  • 探究行内元素块级元素 探究行内元素块级元素 CSS 在html中元素主要分为行内元素块级元素 行内元素 不独占一行 书写完成后不会自动换行 没有宽和高 块级元素 独占一行 书写完会自动换行 宽和高可以修改...
  • HTML元素大体被分为三种:行内元素块级元素、行内块级元素 想实现三者之间的转换,可使用display属性: display:inline;//行内元素 display:block;//块级元素 display:inline-block;//行内块级元素 1.行内...
  • html行内元素块级元素的区别目录html行内元素...块级元素行内元素的区别行内元素块级元素的三个区别行内元素块级元素直观上的区别 行内元素会在一条直线上排列,都是同一行的,水平方向排列 块级元素各占据一行
  • 在html中的元素主要分为行内元素(又称内联元素)以及块级元素 块级元素的特点 书写时会令起一行开始 高度宽度可修改 容纳内联元素和其他块级元素 行内元素的特点 书写不会令其一行 和其他元素处于一行上 高度...
  • 下面小编就为大家带来一篇全面了解行内元素块级元素的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 本文通过具体实例给大家详细介绍了CSS行内元素块级元素的居中的实现方法,非常简单实用,推荐给大家,希望大家能够喜欢。
  • 【CSS基础学习】行内元素块级元素,行内块级元素 原创 ...
  • 行内元素块级元素 盒模型区别 4.块级元素 与 overflow 5.实践 1.HTML 行内元素块级元素 行内元素一般是内容的容器,而块级元素一般是其他容器的容器。一般情况下,行内元素 只能包含内容或者其它行内元素,...
  • 一、块级元素 每个块级元素默认单独占一行,每增加一个块级元素时,会自动换行,从上而下自动...2、块级元素可以包含行内元素块级元素,但是行内元素不包含块级元素 3、行内元素块级元素在和模型上的区别  行
  • 行内元素如果其上一个元素也是行内元素,则他们会分布在统一水平线上,即在一行上排列,块级元素不论上一个元素是行内元素还是块级元素都要另起一行,单独占一行。 对于行内元素设置with、height、margin值无效,但...
  • 1、行内元素转换成块级元素:display:block; 2、块级元素转换成行内元素:display:inline; 3、行内元素转行内块级元素:display:inline-block;

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 43,067
精华内容 17,226
关键字:

行内元素转块级元素