zoukankan      html  css  js  c++  java
  • 行内元素(内联元素)、块级元素以及行内块元素的区别

    行内元素以及块级元素的区别
    inline行内元素(内联元素)
    block块级元素  inline-block行内块元素
     不换行,和其他内联元素共行  总是从新行开始

     不独占一行的块级元素,

    在某种程度上可实现与浮动的相似的效果,

    但是inline-block占据文档流,

    所以不会产生父容器坍塌问题,

    而产生的缝隙问题,使用张鑫旭的博客

    去除inline-block元素间间距的N种方法

    可替换元素

     可以设置元素的高度与宽度

    可设置margin和padding任意方向,几乎所有的可替换元素都是行内元素

    如<img>、<input>、<textrarea>、<select>、<object>这些空元素

     默认宽度是父容器宽度的100%,可以设置高与宽,

     可以设置margin和padding任意方向

    非替换元素

     宽度只与内容有关,不可设置高度与宽度,而是用line-height来控制高度,

    padding左右起作用,上下不会影响行高

    margin左右作用起作用,上下不起作用

    例如<a>、<span>等

    只能容纳文本或其他内联元素  能容纳其他块状元素或者内联元素

           

    备注:(以下内容引自mabel_on_line

    可替换元素

              就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。

              例如:浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看(X)HTML代码,则看不到图片的实际内容

              又例如:根据<input>标签的type属性来决定是显示输入框,还是单选按钮等。

              (X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。

              这些元素往往没有实际的内容,即是一个空元素, 浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。

    非替换元素:(X)HTML 的大多数元素是不可替换元素,即其内容直接表现给用户端(例如浏览器)。

              段落<p>是一个不可替换元素,文字“段落的内容”全被显示。

    padding左右起作用,上下不会影响行高,

              但是对于有背景色和内边距的行内非替换元素,背景可以向元素上下延伸,但是行高没有改变。

              因此视觉效果就是与前面的行重叠。(《css权威指南》 P249)

    margin左右作用起作用,上下不起作用,

              原因在于:行内非替换元素的外边距不会改变一个元素的行高(《css权威指南》 P227)。

    行内元素(内联元素):行内元素不形成新内容块,即在其左右可以有其他元素,

              例如:<a>、<span>、<strong>等,都是典型的行内级元素。

              display属性等于“inline”的元素都是行内元素。几乎所有的可替换元素都是行内元素,例如<img>、<input>等等。

    块级元素:最明显的特征就是它默认在横向充满其父元素的内容区域,而且在其左右两边没有其他元素,即块级元素默认是独占一行的

              典型的块级元素有:<div>、<p>、<h1>到<h6>,等等。            

               通过CSS设定了浮动(float属性,可向左浮动或向右浮动的)以及设定显示(display)属性为“block”或“list-item”的元素都是块级元素。

               ★ 但是浮动元素比较特殊,由于浮动,其旁边可能会有其他元素的存在。

                    例如:“list-item”(列表项<li>),会在其前面生成圆点符号,或者数字序号。

  • 相关阅读:
    JavaScript对原始数据类型的拆装箱操作
    Javascript继承(原始写法,非es6 class)
    动态作用域与词法作用域
    自行车的保养
    探索JS引擎工作原理 (转)
    C语言提高 (7) 第七天 回调函数 预处理函数DEBUG 动态链接库
    C语言提高 (6) 第六天 文件(续) 链表的操作
    C语言提高 (5) 第五天 结构体,结构体对齐 文件
    C语言提高 (4) 第四天 数组与数组作为参数时的数组指针
    C语言提高 (3) 第三天 二级指针的三种模型 栈上指针数组、栈上二维数组、堆上开辟空间
  • 原文地址:https://www.cnblogs.com/zp0818/p/8695139.html
Copyright © 2011-2022 走看看