zoukankan      html  css  js  c++  java
  • 行内元素和块级元素详解

    行内元素和块级元素,一般大家都这嘛说,其实有好多细节呢。你造吗?

    一、块级元素和块元素:

    1.块级元素是那些视觉上会被格式化成块状的元素,通俗一点来说就是那些会换新行的元素。display 属性的:blocklist-itemtableflexgrid 值都可以将一个元素设置成块级元素 

    2.块元素是 display 属性值为 block 的元素,它应该是 块级元素 的一个子集,而不是等同的,一个 块元素 是一个 块级元素,但一个 块级元素 不一定是一个 块元素

    3.怎嘛说呢,比方说某元素是是行内属性,你添加display:block;就是块元素,但是像<li></li>不需要添加display:inline;就可以换行,就叫做块级元素;

    二、行内元素和行内级元素

    1.行内级元素是那些不会为自身内容形成新的块。display 属性的:inlineinline-tableinline-blockinline-flexinline-grid 值都可以将一个元素设置成行内级元素。

    2.如同块元素之于块级元素的关系,行内元素仅仅是 display 属性值为 inline 的元素。

    三、下边列举一些具体标签是行内级元素还是块级元素:

    行内级元素:

    • b, big, i, small, tt
    • abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
    • a, bdo, br, img, map, object, q, script, span, sub, sup
    • button, input, label, select, textarea

    块级元素:

    • <address>联系方式信息。
    • <article> HTML5文章内容。
    • <aside> HTML5伴随内容。
    • <audio> HTML5音频播放。
    • <blockquote>块引用。
    • <Canvas> HTML5绘制图形。
    • <dd>定义列表中定义条目描述。
    • <div>文档分区。
    • <dl>定义列表。
    • <fieldset>表单元素分组。
    • <figcaption> HTML5图文信息组标题
    • <figure> HTML5图文信息组 (参照 <figcaption>)。
    • <footer> HTML5区段尾或页尾。
    • <form>表单。
    • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>标题级别 1-6.
    • <header> HTML5区段头或页头。
    • <hgroup> HTML5标题组。
    • <hr>水平分割线。
      <noscript>不支持脚本或禁用脚本时显示的内容。
    • <ol>有序列表。
    • <output> HTML5表单输出。
    • <p>行。
    • <pre>预格式化文本。
    • <section> HTML5一个页面区段。
    • <table>表格。
    • <tfoot>表脚注。
    • <ul>无序列表。
    • <video> HTML5视频。

    四、下边说下置换元素:置换元素就归为行内级元素吧

    1.一个 内容 不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素。

    2.w3c并没有给出明确的非置换元素的解释,但能确定的是除置换元素之外,所有的元素都是非置换元素。

    3.其实置换元素就是不换行,但是拥有宽,高。类似于inline-block属性。

    常见置换元素:<img>、<input>、<textarea>、<select>、<object>

    置换元素的高度的设置需遵循以下几点:

    • 1.若宽高的计算值都为 auto 且元素有固有高度,则 height 的使用值为该固有高度;
    • 2.若高度的计算值为 auto 且元素有固有高度,则 height 的使用值为该固有高度;
    • 3.若高度的计算值为 auto 且宽度有 非auto 的计算值,并且元素有固有宽高比,则height 的使用值为:宽度使用值 / 固有宽高比
    • 4.若高度的计算值为 auto 且上述条件完全不符,则 height 的使用值 不能大于150px,且宽度不能大于长方形高度的2倍。

    其它类型的置换元素,其高度的定义都参照行内置换元素的定义。

    文章参考:http://caibaojian.com/inline-vs-block.html

          http://blog.doyoe.com/

  • 相关阅读:
    asp.net 网页标题、关键字、描述
    星级评分jQuery插件
    以jquery为基础的星星评分
    投票系统显示结果jQuery插件
    JAVASCRIPT模拟模式对话窗口
    Repeater 嵌套代码
    window服务程序安装卸载批处理文件
    c#window程序开发入门系列自学笔记
    jquery 模式对话框改进版
    php的正则表达式完全手册
  • 原文地址:https://www.cnblogs.com/gaoxuerong123/p/7114719.html
Copyright © 2011-2022 走看看