HTML-置换元素
我们都知道,行内元素
不能够定义宽度和高度,但 img,input,button等标签作为行内元素却可以定义宽高,为什么呢?这就牵扯到了置换元素和非置换元素。
置换元素:
w3c官方解释:“An element that is outside the scope of the CSS formatter, such as an image,embedded document, or applet”
直译过来就是,不受 css 格式化范围控制的元素,css 渲染模型并不考虑对此内容的渲染。
如 img、input、select、textarea、button、label 等被称为可置换元素。浏览器根据这些元素的标签和属性,来决定元素的具体显示内容。
例如:浏览器根据 <img> 标签的 src 属性显示图片,而如果查看 (x)html 代码,则看不到图片的实际内容;<input>标签,根据type 属性决定是显示输入框还是按钮。
置换元素在其显示中生成了框,这也就是有的内联元素能够设置宽高的原因。
置换元素区别于一般的 inline 元素,他们本身拥有内在尺寸(宽度,高度,宽高比),也可以设置 width / height 属性,他们的性质同行内元素设置了 inline-block 一样。
非置换元素:
官网并未对非置换元素做出具体定义,可以认为除去置换元素都是非置换元素。
HTML中的大多数元素都是不可置换元素,例如<label>标签,<p>标签里的内容会被浏览器直接显示给用户。
HTML-置换元素的更多相关文章
- [CSS]置换和非置换元素
转自:http://blog.doyoe.com 先进一个题外话 在面试一个 重构(各大公司的叫法可能不太一样)时,我喜欢从一个点开始问,然后一直延展下去成为一条线,甚至是一个面,直到问到不会的地方, ...
- 转载:img是什么元素?置换元素?
转载: https://blog.csdn.net/kingliguo/article/details/52643594 img是什么元素? 应是行内元素,判断一个元素是行内元素,还是块元素,无非就是 ...
- HTML中的置换元素和非置换元素
我们都知道,行内元素不能够定义宽度和高度,但 img,input,button等标签作为行内元素却可以定义宽高,为什么呢?这就牵扯到了置换元素和非置换元素. 置换元素: w3c官方解释:“An ele ...
- margin -------总结(block inline 可置换元素)
margin在块元素.内联元素中的区别 block元素(块元素)大致有:P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE ...
- CSS置换元素和非置换元素
置换元素: 1. 一个内容 不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素. 2. 置换元素就是浏览器根 ...
- CSS的置换和非置换元素
一个来自面试的坑. 面试的时候考官先问了行内元素和块级元素的区别,这个不难理解.然后一脚就踩进了,置换元素的坑.例如img就是行内置换元素,这种行内元素是可以设置宽高的. 什么是置换元素 一个内容不受 ...
- 【HTML/CSS】置换元素
置换元素: 一个内容不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素. 行内级置换和非置换元素的宽度定义 对 ...
- CSS十问——好奇心+刨根问底=CSSer
最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限 ...
- 前端知识杂烩(HTML[5]?+CSS篇)
1. CSS 优先级算法如何计算?2.如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?3.用纯CSS创建一个三角形的原理是什么?4. 如何解决inline-block元素的空白间距( ...
- 浅析inline-block--使用inline-block创建布局
inline-block前端程序猿们肯定不陌生,它是display属性的一个取值. 之所以称之为inline-block.是因为它兼具行内元素(inline-element)和块级元素(block-e ...
随机推荐
- 暑假撸系统7- 熊孩子的捣乱!javascript保存前台状态!
系统大体框架已经搭的差不多了, 往下就是技术性的美化以及修补了,但这也是最最耗费时间的.在这个过程就发现了一个有意思的需求,这里把思路以及解决方案总结下. 因为做的是考试系统,不管是大或者小的考试,本 ...
- 我们一起来学Shell - 正则表达式
文章目录 什么是正则表达式 正则表达式元字符 正则表达式应用举例 POSIX 方括号表达式 POSIX 字符集列表: 我们一起来学Shell - 初识shell 我们一起来学Shell - shell ...
- CentOS 7 升级 gcc-4.8.5 到 gcc-5.4.0
文章目录 1.环境介绍 2.下载gcc-5.4.0源码包 3.编译安装gcc 4.验证gcc版本 5.更新gcc连接 1.环境介绍 [root@localhost ~]# gcc -v Using b ...
- CentOS 7 下编译安装 4.14 内核
文章目录 rpm升级 编译升级 升级前 下载安装包 编译内核 更新启动引导 修改默认启动内核 重启之后验证 rpm升级 # rpm的方式升级内核 1.载入内核公钥 [root@localhost ~] ...
- 打破刻板印象,了解真正的商业智能BI
在技术飞速发展的过程中,人们越来越怀疑传统的数据分析方法.可以通过对商业智能的各种误解来解释这一点,如今,这种误解正在作为有效的真理传播.例如,数据仓库已达到其目标.而数据质量似乎也正在失去其相关性 ...
- 匿名函数 =匿名方法+ lambda 表达式
匿名函数的定义和用途 匿名函数是一个"内联"语句或表达式,可在需要委托类型的任何地方使用. 可以使用匿名函数来初始化命名委托[无需取名字的委托],或传递命名委托(而不是命名委托类型 ...
- 多个n维向量围成的n维体积的大小
前言 上周我们数学老师给了我们一道题,大意就是两个向量a和b,一个点M=$x*a+y*b$,x,y有范围,然后所有M组成的面积是一个定值,求x+y的最小值.当然这是道小水题,但我在想,如果把两个向量变 ...
- 计算机网络——HTTP
目录 计算机网络-HTTP篇 HTTP 基本概念 常见状态码 常见字段 Get 与 Post HTTP 特性 HTTP(1.1) HTTP/1.1 HTTPS 与 HTTP HTTP/1.1.HTTP ...
- 爬虫之Beautfulsoup模块及新闻爬取操作
今日内容概要 IP代理池的概念及使用 requests其他方法补充 Beautifulsoup模块 避免你自己写正则表达式 利用该模块爬取京东的商品信息 今日内容详细 IP代理池的概念及使用 1.有很 ...
- 关于UI自动化IOS元素定位方法说明
1. 元素属性介绍 下图是通过weditor定位的微博的"我的钱包",各属性如下图: className:元素类型,如:XCUIElementTypeButton isEnable ...