转自:http://blog.doyoe.com

先进一个题外话

在面试一个 重构(各大公司的叫法可能不太一样)时,我喜欢从一个点开始问,然后一直延展下去成为一条线,甚至是一个面,直到问到不会的地方,然后又换另外一个点。

例如:我可能会说,能简单聊聊 行内级元素 和 块级元素 的区别吗。

一般这时,候选人都会说到 行内级元素 不会换新行,而 块级元素 会格式化为块状,即换行。但也有些遗憾的方面(如:混淆了块元素和块级元素,行内元素和行内级元素),当然这看起来似乎不是特别重要。

这时我会继续问,行内元素 能够定义宽度和高度吗?

不少候选人会说:不能

我会继续问,说几个你熟悉的 行内元素 吧

于是 spanstrongemins… 答案我还是比较满意的。

我仍然会继续,img 是行内元素么?

候选人这时通常会迟疑一下,可能意识到我接下来想问啥了,但还是会回答:

于是我会说,那 img 能定义宽度和高度么?

有的候选人这时会犹豫,因为如果回答是,就会推翻他之前说的 行内元素不能定义宽高,如果回答不是,似乎又和他所熟知的经验不一致。但通常最后还是会回答:

那我就又得问,你之前不是说 行内元素不能定义宽高 吗?为什么 img 可以?

到这里,候选人基本上不知道要怎么回答好了,最后可能会告诉我,因为 img 是特殊元素

当然,虽然这么回答也不能说是错误的,但基本上也能知道候选人对这条线的基础的掌握程度了。

但我希望听到的答案是通过解释置换元素相关的概念从而给出答案。

什么是置换元素?

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

什么是非置换元素?

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

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

对于行内级非置换元素,宽度设置是不适用的。

对于行内级置换元素来说,其宽度的设置需遵循以下几点:

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

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

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

    例子同上

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

    典型的例子:img 当只定义了其高度值时,其宽度将会根据固有宽高比进行等比设置

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

    典型的例子:比如iframe, canvas

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

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

对于行内级非置换元素,高度设置是不适用的。

对于行内级置换元素来说,其高度的设置需遵循以下几点:

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

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

[CSS]置换和非置换元素的更多相关文章

  1. CSS的置换和非置换元素

    一个来自面试的坑. 面试的时候考官先问了行内元素和块级元素的区别,这个不难理解.然后一脚就踩进了,置换元素的坑.例如img就是行内置换元素,这种行内元素是可以设置宽高的. 什么是置换元素 一个内容不受 ...

  2. CSS置换元素和非置换元素

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

  3. HTML中的置换元素和非置换元素

    我们都知道,行内元素不能够定义宽度和高度,但 img,input,button等标签作为行内元素却可以定义宽高,为什么呢?这就牵扯到了置换元素和非置换元素. 置换元素: w3c官方解释:“An ele ...

  4. 【HTML/CSS】置换元素

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

  5. 5:CSS元素类型

    5:CSS元素类型 学习目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依据和元素类型分 ...

  6. 好程序员web前端分享CSS元素类型

    好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...

  7. CSS2.1SPEC:视觉格式化模型之包含块

    原汁原味的才是最有味道的,在阅读CSS标准时对这一点的体会更加深刻了,阅读文档后的一大感觉就是很多看上去理所应当的样式表现也都有了对应的支持机制.本文首先从包含块写起,一方面总结标准中相应的阐述,并且 ...

  8. 元素类型以及overflow,white-space等属性

    1:预格式化标签:<pre></pre>2:overflow属性="visible/hidden(隐藏)"/scroll/auto(自动)/inherit; ...

  9. 【化繁为简】非前端开发者的福音---CSS的预处理语言 Less&Sass

    写在前面:        众所周知CSS 是一门非程序式语言,没有变量.函数.SCOPE(作用域),在前期的界面样式设计时,需要书写大量看似没有逻辑的代码,不方便维护及扩展,也不利于重复调用,尤其对于 ...

随机推荐

  1. leetcode 154. Find Minimum in Rotated Sorted Array II --------- java

    Follow up for "Find Minimum in Rotated Sorted Array":What if duplicates are allowed? Would ...

  2. 关于kafka连接不上别的机器问题Connection refused

    1.确认config里面的server.properties 正确(包括IP+端口2181记得看清,用hostname的话记得etc/hostnames下面查看全部配置上没,建议用hostname方便 ...

  3. Java基础了解

    今天刚开始学习Java,除了老师讲的之外,又进一步上网去了解了下Java的相关知识: Java语言的主要特点: 1. 跨平台性 所谓的跨平台性,是指软件可以不受计算机硬件和操作系统的约束而在任意计算机 ...

  4. hihoCoder #1301 : 筑地市场 (打表+构造)

    题目大意:问含有4或者7的第k大的正数是多少. 题目分析:1~10.1~100.1~1000...之间的含有4或者7的个数可以求出,这样就可以从高位到地位依次确定这个数的每一位上的值. 代码如下: # ...

  5. ZOJ-3933 Team Formation (二分图最佳完美匹配)

    题目大意:n个人,分为两个阵营.现在要组成由若干支队伍,每支队伍由两个人组成并且这两个人必须来自不同的阵营.同时,每个人都有m个厌恶的对象,并且厌恶是相互的.相互厌恶的人不能组成一支队伍.问最多能组成 ...

  6. IOS请求H5页面、要求自定义agent判断是电脑、安卓还是iPhone登录

    //自定制的userAgent- (void)createMyAgent{        NSString *userAgent = [[[UIWebView alloc]init]stringByE ...

  7. poj3687 拓扑序

    题意:有编号 1-n 的球,每个球的质量不同,质量从 1 到 n 不等,给出一系列比较,分别是两个编号的球的大小关系,求一个序列满足上述关系,并且从编号 1 开始依次选择可选的最小质量,输出每个球的质 ...

  8. GCC编译器

    详见<gcc中文手册> 编译过程 预处理器cpp 编译器gcc 汇编器as 链接器linker file.c   -------------> file.i  ----------- ...

  9. java的nio之:java的nio系列教程之概述

    一:java的nio的核心组件?Java NIO 由以下几个核心部分组成: ==>Channels ==>Buffers ==>Selectors 虽然Java NIO 中除此之外还 ...

  10. easyUI之window

    window组件是一个可拖动.浮动的面板,用于显示信息.内容可用 href或ajax获取. window是一个显示窗口,同时也可以显示layout的功能(也就是创建复合的组合窗口),如 <div ...