zoukankan      html  css  js  c++  java
  • 置换和非置换元素

    1、置换和非置换元素

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

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

    1.3、 例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来,而如果查看(X)HTML代码,则看不到图片的实际内容;又例如根据input标签的type属性来决定是显示输入框,还是单选按钮等。

    1.4、 HTML中的img、input、textarea、select、object都是替换元素。这些元素往往没有实际的内容,即是一个空元素。

    2、非置换元素/不可替换元素

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

       <!-- span是非置换元素 因此 hello word 被展示出来 而不是被替换成其他内容 -->
       <span>hello word</span>
    

    3、行内级置换的宽度定义

    • 若宽高的计算值都为 auto 且元素有固有宽度,则 width 的使用值为该固有宽度

    典型的例子是:拥有默认宽高的 input 当宽度的计算值为auto时,则宽度使用值为其默认的固有宽度

    • 若宽度的计算值为 auto 且元素有固有宽度,则 width 的使用值为该固有宽度

    例子同上

    • 若宽度的计算值为 auto 且高度有 非auto 的计算值,并且元素有固有宽高比,则 width 的使用值为 高度使用值 * 固有宽高比

    典型的例子:img 当只定义了其高度值时,其宽度将会根据固有宽高比进行等比设置,这也是为什么img是行内元素,但可以设置宽高的原因

    • 除此之外,当 width 的计算值为 auto 时,则宽度的使用值为 300px

    典型的例子:比如iframe, canvas

    4、行内级置换的高度定义

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

    5、行内级非置换元素的宽度定义

    宽度设置是无效的,如:

    <!-- 设置宽度无效 ,span的宽度默认为其内容的宽度 -->
    <span>hello word</span> 
    

    6、行内级非置换元素的高度定义

    高度设置无效,如:

    <!-- 设置高度无效 ,span的高度默认为其内容的高度 -->
    <span>hello word</span>
  • 相关阅读:
    最近积累的JS 东西,分享一下
    C#定时任务框架Quartz.NET
    如何成为微软社区MVP以及年终总结
    git 基于某个分支创建分支
    iframe跨域-Js通信的一种方式
    tcp连接建立断开过程及状态变化
    MySQL-InnoDB的事务隔离与锁
    MySQL索引原理总结
    php gd实现简单图片验证码与图片背景文字水印
    php 取post数据的三种方式
  • 原文地址:https://www.cnblogs.com/dushao/p/5999544.html
Copyright © 2011-2022 走看看