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

    2016-03-26 17:43:53
    1.行内元素与块级元素直观上的区别 行内元素会在一条直线上排列,都是同一行的,水平方向排列 块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。 2.块级元素可以包含行内元素和块级元素。...

    一、行内元素与块级元素

    块级元素列表
    <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.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

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

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


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

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

    展开全文
  • 目录 1.HTML 行内元素 块级元素 2.常用的 display 值 3.行内元素块级元素 盒模型区别 4.块级元素 overflow 5.实践 1.HTML 行内元素 块级元素 行内元素一般是内容的容器,而块级元素一般是其他容器的...
    目录
    1.HTML 行内元素 与 块级元素
    2.常用的 display 值
    3.行内元素 和 块级元素 盒模型区别
    4.块级元素 与 overflow
    5.实践
    1.HTML 行内元素 与 块级元素
    行内元素一般是内容的容器,而块级元素一般是其他容器的容器。一般情况下,行内元素
    只能包含内容或者其它行内元素,宽度和长度依据内容而定,不可以设置,可以和其它元素
    和平共处于一行;而块级元素可以包含行内元素和其它块级元素,且占据父元素的整个空间,
    可以设置 width 和 height 属性,浏览器通常会在块级元素前后另起一个新行。
    因此,行内元素适合显示具体内容,而块级元素适合做布局。常用的行内和块级元素如下:
    级别 元素
    行内元素 a,b,strong,span,img,label,button,input,select,textarea
    块级元素header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer
    之所以说“一般情况下”,是因为元素的级别不是一成不变的,浏览器是按照规范规定元素默认的级别,但是可以通过“display”属性改变其级别。
    2.常用的 display 值
    常用的 display 可能的值如下:
    inline 以行内元素行为展示
    block 以块级元素行为展示
    inline-block 行内元素和块级元素特性兼而有之,既不会占满父元素,又可以设置width和height属性
    table 以表格的形式展示
    table-column 以表格列的形式展示
    flex CSS3 新增,虽然处于CR阶段,但是很多现代浏览器已经支持无前缀的该特性,IE从11开始部分支持。类似块级元素,但是可以用于制作自适应布局
    inline-flex 类似行内元素,但是可以用于制作自适应布局
    grid CSS3 新增,目前处于“实验阶段(Experimental)”,只是得到了IE11和edge的部分支持
    3.行内元素 和 块级元素 盒模型区别
    行内元素尺寸由内含的内容决定,盒模型中 padding, border 与块级元素并无差异,都是标准的盒模型,
    但是 margin 却只有水平方向的值,垂直方向并没有起作用。
    块级元素当没有明确指定 width 和 height 值时,块级元素尺寸由内容确定,
    当指定了 width 和 height 的值时,内容超出块级元素的尺寸就会溢出,
    这时块级元素要呈现什么行为要看其 overflow 的值,下面会提到。
    块级元素的 padding, border 和标准的盒模型一致,
    但是如果 width + padding + border + 指定的margin 小于其父元素的宽度时,
    浏览器会通过补margin 来填满整行。
    4.块级元素 与 overflow
    块级元素当没有明确指定 width 和 height 值时,块级元素尺寸由内容确定,
    当指定了 width 和 height 的值时,内容超出规定的尺寸就会溢出,元素的尺寸并不会随着内容改变。
    这时候使用 overflow 可以指定内容超出时的行为,当然, overflow 只对块级元素起作用,
    指定当内容超出块级容器的时候,块级元素该如何处理内容的显示。overflow 可能的值如下
    visible 默认值,如果内容超出容器尺寸,不做任何处理
    hidden 超出的内容被截断并隐藏
    scroll 无论内容是否超出,总是显示滚动条。可以控制只显示一个方向的滚动条,
    这时应该设置 overflow-x 和 overflow-y
    auto 内容没有超出时,不显示滚动条;内容超出时,显示滚动条,
    且如果只有一个方向超出,那么只显示该方向上的滚动条
    5.实践
    6.总结
    文章总结了行内元素和块级元素的区别,每个元素都可以通过 display 来设置行内还是块级显示,
    inline 和 block 是两种显示模型,浏览器对每个元素都要采用一种模型来呈现元素,
    上面我们提到的行内元素和块级元素分组,其实并不是它们天生就应该这样,而是浏览器按照规范指定了默认值,
    因此即使我们没有指定这些属性,那些元素仍然会按照其所属类别渲染呈现。 通过display 可以改变元素对应的渲染呈现模型,也就是盒模型。当块级元素的内容超出容器时,
    使用 overflow 属性来指定块级元素的行为。
    问题

     《1》怎么消除inline-block之间的空白字符
    1. CSS trick,如设font-size/line-height为0。但此种方法副作用过多,完全不可取
    2. 某些元素不写结束标签不会产生额外的空白节点,比如li元素。缺点是不是所有元素都可以用这个方法,且要求使用HTML语法,而不能用XHTML语法。
    3. 特殊的标签写法,如:
    <ul
    ><li>1</li
    ><li>2</li
    ><li>3</li
    ></ul>
    个人认为此种也是削足适履的方式,不建议。
    4. 删掉空白。缺点,源代码排版会面临困难。
    5. 我认为目前来说最优雅的方法,使用不产生额外空白节点或者支持空白控制的模板语言。比如Jade、Smarty({strip} | Smarty)等。缺点,你不是直接写HTML,即使没有其他使用模板的必要。另外阅读生成的代码比较困难。不过这两个缺点对于专业前端工程师来说基本上不成为问题。
    《2》block inline-block 区别在哪里

    总体概念

    1. block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到 该行排满。
    2. 大体来说HTML元素各有其自身的布局级别(block元素还是inline元素):
      • 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
      • 常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
    3. block元素可以包含block元素和inline元素;但inline元素只能包含inline元素。要注意的是这个是个大概的说法,每个特 定的元素能包含的元素也是特定的,所以具体到个别元素上,这条规律是不适用的。比如 P 元素,只能包含inline元素,而不能包含block元素。
    4. 一般来说,可以通过display:inline和display:block的设置,改变元素的布局级别。

    block,inline和inlinke-block细节对比

    • display:block
      1. block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
      2. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
      3. block元素可以设置margin和padding属性。
    • display:inline
      1. inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
      2. inline元素设置width,height属性无效。
      3. inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
    • display:inline-block
      1. 简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

    补充说明

    • 一般我们会用display:block,display:inline或者display:inline-block来调整元素的布局级别,其实display的参数远远不止这三种,仅仅是比较常用而已。
    • IE(低版本IE)本来是不支持inline-block的,所以在IE中对内联元素使用display:inline-block,理论上IE 是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline- block属性的表象。

             《3》块级元素怎么和行内元素底线对齐

    1.可以将父级使用table,需要底部对齐的子元素使用table-cell + vertical-align: bottom进行定位。

    2.div{height:30px;}
    a{font-size:12px;}

    除了设置line-height和padding之外,有什么比较灵活的方案实现a的行框底部位于div底部。即使以后改变了a的字体大小或者div的高度,仍然不变。


    展开全文
  • 下面小编就为大家带来一篇全面了解行内元素与块级元素的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 行内元素与块级元素直观上的区别 1.行内元素会在一条直线上排列,都是同一行的,水平方向排列块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。 2.块级元素可以包含行内元素和块级元素。...

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

    1.行内元素会在一条直线上排列,都是同一行的,水平方向排列块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。

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

    3.行内元素与块级元素属性的不同,主要是盒模型属性上行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效

    行高决定行内元素的上限(即margin-top和padding-top的设置是否显示出来),当你不设置或者设置的行高小于字体所决定的行高时,行高为默认值,即字体*1.4;

    无论行高为多少,margin和padding左右下三个方向可以随意设置并显示,下方向,可以设置,也有对应的盒模型,但是底部的底不是砖头,后面的还是可以冲上来,知道碰到其line-height.

    行内元素不可以设置宽(width)和高(height),但可以与其他行内元素位于同一行,行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定,宽度由内容的长度控制。

    什么时候需要把行内元素转换为块级元素?

    display:block;比较常用于<a><span>这两个标签,因为他们不是块级元素,定义display:block属性后,定义width、height等和长宽相关的css属性才会生效。

    行内元素的高度可以用line-height设置,宽度可以用margin和padding,为什么还需要block化?

    这在设置单行文字时是有效的,

    什么时候会倾向于设置width和height?

    你想把文字限定在一个宽度和高度内部,

    来自网上资料

     

    转载于:https://www.cnblogs.com/hfeng007/p/9104676.html

    展开全文
  • 行内元素与块级元素的特点与不同网页布局行内元素块级元素通过css设定元素类型 网页布局 在学习css的各项属性值之前,我希望大家能先理解清楚行内元素与块级元素的特点与不同点,这对网页的布局真的十分重要,在我没有...

    行内元素与块级元素的特点与不同

    网页布局

    在学习css的各项属性值之前,我希望大家能先理解清楚行内元素与块级元素的特点与不同点,这对网页的布局真的十分重要,在我没有理解之前对网页布局的认识就十分模糊
    大家可以将html网页看做是多分割组成的网页,每个分割都是多行组成的,事实上很多元素看起来不再同一水平线上但都在同一行
    布局示意图

    行内元素

    行内元素顾名思义就是处在一行内的元素,这样的元素不会自己一个人占满一行,而是和其他行内元素一起分享一行
    如span标签,这些元素可以存在于同一行,并且只有当一行充满时才会折行,这些元素无法设置宽高,他们的宽高由文字内容大小自适应,并且上下内外边距的设定对他们也无效(当他们单独存在一行时可以)

    在这里插入图片描述

    块级元素

    块级元素和行内元素不同,无论设定宽高与否他都会独占一行,如div,ul,块级元素可以设定上下内外边距
    在这里插入图片描述
    行内块级元素具有行内元素和块级元素的特性如img标签和imput标签,他和行内元素一样,分享一行,在行末折行,并且与块级元素一样可以设置宽高和上下内外边距
    在这里插入图片描述

    通过css设定元素类型

    其实行内与块级元素都可以通过css进行设置
    属性:display
    属性值:block(块级) block-inline(行内块级) inline(行内)

    <span style="display:block;width:200px;height:100px;baclground-color:yellow">这是span标签</span>
    <!-- 这里将span设置为块级元素,这样做就可以像块级元素一样设置它的宽高了 -->
    <div style="display:inline">这是div</div><span>这是span</span>
    <!-- 这里将div设置为行内元素他就会与span共同分享一行了 -->
    

    在这里插入图片描述

    展开全文
  • 一、行内元素与块级元素的三个区别 1.行内元素与块级元素直观上的区别 行内元素会在一条直线上排列,都是同一行的,水平方向排列 块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。 2....
  • 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...       一次偶然的面试遇到的题目,虽然当时知道块级元素和行内...一、行内元素与块级元素 ...
  • 对于前端初学者,行内元素和块级元素有时会“傻傻分不清”,这里我简单说一下行内元素与块级元素。用通俗的话来讲,块级元素就是一次至少占一行的元素,无论内容是否真的填满了一行,都会占据至少一行的空间,再写...
  • 行内元素与块级元素的特性与例子: https://blog.csdn.net/HU_YEWEN/article/details/84934041 https://blog.csdn.net/weixin_40612082/article/details/80472807 ...关于行内元素能否设置内外边距: ...
  • 1.行内元素与块级元素直观上的区别  行内元素会在一条直线上排列,都是同一行的,水平方向排列  块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。 2.块级元素可以包含行内元素和块级...

空空如也

空空如也

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

行内元素与块级元素