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 ...
随机推荐
- 图解python | 安装与环境设置
作者:韩信子@ShowMeAI 教程地址:http://www.showmeai.tech/tutorials/56 本文地址:http://www.showmeai.tech/article-det ...
- demo_2_27
#define _CRT_SECURE_NO_WARNINGS 1#include <stdio.h>#include <string.h> int count_bit_one ...
- 『无为则无心』Python面向对象 — 59、魔法方法
目录 1.魔法方法__new__() 2.魔法方法__init__() 3.魔法方法__del__() 4.魔法方法__str__()和__repr__() 5.魔法方法__call__() 6.魔法 ...
- [杂记]如何在ppt里插入高亮代码
在为c语言习题课准备课件的时候发现需要向ppt内插入代码,简单的文本粘贴没有高亮,格式也很混乱需要自己慢慢调,于是自己鼓捣了一下,实现了向ppt内插入高亮代码. [所需软件]Office PowerP ...
- C#析构函数(方法)
析构方法是在垃圾回收.释放资源时使用的.析构函数用于析构类的实例.备注: 不能在结构中定义析构函数.只能对类使用析构函数. 一个类只能有一个析构函数. 无法继承或重载析构函数. ...
- CultureInfo、DateTimeFormatInfo、NumberFormatinfo之间的关系
CultureInfo.DateTimeFormatInfo.NumberFormatinfo之间的关系 线程中CurrentCulture和CurrentUICulture 区别 以下是win10操 ...
- Qt:QFileInfo
0.说明 QFileInfo提供了独立于系统的文件信息. QFileInfo提供的信息包括文件名.路径.访问权限.文件大小.修改时间等.此外,它也可以用于获取有关Qt 资源的信息(resource). ...
- 爬虫之爬取豆瓣top250电影排行榜及爬取斗图啦表情包解读及爬虫知识点补充
今日内容概要 如何将爬取的数据直接导入Excel表格 #如何通过Python代码操作Excel表格 #前戏 import requests import time from openpyxl impo ...
- qt(二)
主程序入口: #include <iostream> #include <QApplication> #include "MainWindow.h" int ...
- JZ-034-第一个只出现一次的字符位置
第一个只出现一次的字符位置 题目描述 在一个字符串(0<=字符串长度<=10000,全部由字母组成)中找到第一个只出现一次的字符,并返回它的位置, 如果没有则返回 -1(需要区分大小写). ...