html:(40):块级元素和内联块级元素

1.下表列出了内联元素和块级元素的主要区别

html中内联元素和块级元素的区别

块级元素

行内元素

独占一行,默认情况下,其宽度自动填满其父元素宽度

相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化

可以设置width,height属性

行内元素设置width,height属性无效

可以设置margin和padding属性

行内元素起边距作用的只有margin-left、margin-right、padding-left、padding-right,其它属性不会起边距效果。

对应于display:block

对应于display:inline;

2.按字母顺序排列块级元素主要有

<address>        定义地址
<caption>        定义表格标题
<dd>        定义列表中定义条目
<div>        定义文档中的分区或节
<dl>        定义列表
<dt>        定义列表中的项目
<fieldset>        定义一个框架集
<form>        创建表单元素
<h1><h2><h3><h4><h5><h6>        标题元素
<hr>        水平线
<legend>        给fieldset元素定义标题
<li>        定义列表项目
<noframes>        为那些不支持框架的浏览器显示文本,放置于frameset标签内
<noscript>        为那些不支持脚本的浏览器显示文本
<ol>        有序列表
<ul>        无序列表
<p>        定义段落
<pre>        定义预格式化文本
<table>        定义表格
<tbody>        定义表格主体
<td>        表格中的标准单元格
<tr>        表格中的行
<tfoot>        表格中的页脚
<th>        定义表头单元格
<thead>        定义表格的表头

3.内联元素有

<a>        可定义锚以及超链接
<abbr>        表示一个缩写形式
<acronym>        表示只取title中首字母的缩写形式
<b>        字体加粗
<bdo>        可覆盖默认的文本方向
<big>        大号字体加粗
<br>        换行
<cite>        引用进行定义
<code>        定义计算机代码文本
<dfn>        定义一个定义项目
<em>        定义为强调的内容
<i>        斜体文本效果
<img>        向网页中嵌入一张图像
<input>        输入框
<kbd>        定义键盘文本
<label>        为input进行标记/标注
<q>        定义短的引用

<s>    表示不准确不相关,却不应当给予删除的内容

<samp>        定义样本文本

<select>        定义单选或者多选菜单
<small>        呈现小号字体效果
<span>        组合文档中的行内元素
<strong>        语气更强的强调内容
<sub>        定义下标文本
<sup>        定义上标文本
<textarea>        多行文本输入控件
<tt>        打字机或者等宽的文本效果
<var>        定义变量

<input>和<img>都是行内元素,但是它们是可以设置宽和高的。这里就涉及到可替换元素和不可替换元素。

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

 例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看html代码,则看不到图片的实际内容;又例如根据<input>标签的type属性来决定是显示输入框,还是单选按钮等。 html中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容,即是一个空元素,例如: <img src=”cat.jpg” /> <input type="submit" name="submit" value="提交" /> 浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。 

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

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

Demo

  1. <html>
  2. <head>
  3. <style>
  4.    #div1{
  5.  
  6.        background-color: red;     
  7.        border: 1px solid black;
  8.        display: inline;
  9.        margin: 100px;//内联元素只有左右外边距有效
  10.      width: 100px;//内联元素宽高是有内容决定的
  11.        height: 100px;//内联元素宽高是有内容决定的,line-height也可以设置高度
  12.    }
  13.    #div2{
  14.        width: 100px;
  15.        height: 100px;
  16.        background-color: green;
  17.      margin: 100px;
  18.    }
  19. </style>
  20. </head>
  21.     <body>
  22.         <div id="div1">12345</div>
  23.         <div id="div2">122</div>
  24.     </body>
  25.  
  26. </html>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/425602.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Django中提供了6种缓存方式

开发调试内存文件数据库Memcache缓存&#xff08;python-memcached模块&#xff09;Memcache缓存&#xff08;pylibmc模块&#xff09;1. 开发调试 12345678910111213141516171819202122232425262728293031323334353637383940# 此为开始调试用&#xff0c;实际内部不做任何操作…

HDU-6180 Schedule

题意 给n个工作的开始时间和结束时间 每个工作需要用机器来完成 让我们给这n个工作规划机器 规划出尽可能少机器数目 以及计算最少的机器时间(机器时间为机器使用的最终结束时间减去开始时间)分析 这道题其实就是一个工作的开始结束形成了一个线段 让我们求多个线段不交叉不重…

数字图像处理技术的应 用领域

数字图像处理技术的应 用领域 图像处理技术的主要应用领域有&#xff1a; 生物医学、遥感技术、工业生产、军事技术、 通信技术、侦缉破案、气象预报、宇宙探索、考 古等&#xff0c;已经遍布国民经济的各个领域。 发展历史 20世纪20年代&#xff1a;报纸业 Bartlane电缆图…

前端基础3-2——JavaScript

目录内部对象DateJSONAJAX面向对象编程操作BOM对象&#xff08;重点&#xff09;操作DOM对象&#xff08;重点&#xff09;操作表单formjQuery如何巩固前端基础内部对象 标准对象 Date 基本使用 转换 JSON JSON是什么 在javascript中&#xff0c;一切皆为对象&#…

ltp makefile 解析

困惑于 /include/mk/automake.mk中出现了第一个目标 而makefile却任然将all当做最终目标 测试了一番后发觉&#xff1a; ifeq ($(MAKE_3_80_COMPAT),1)# Trick make 3.80 into thinking that the default goal is all..PHONY: defaultdefault: allelse #pick this.DEFAULT_GOA…

数字图像处理(拓展)

1&#xff0e;数字图像处理及特点 数字图像处理又称为计算机图像处理&#xff0c;它是指将图像信号转换成数字信号并利用计算机 对其进行处理的过程&#xff0c;以提高图像的实用性&#xff0c;从而达到人们所要求的预期结果。 数字图像处 理还有以下特点&#xff1a; ① 处理…

HDU-5532Almost Sorted Array LIS问题

题意 就是检查这个序列是否删除一个元素就能变成非严格的有序序列 表面上就是一个卡条件检查数组的问题 分析&#xff1a; 在向量中upperbound插入上界 这样能够使数组里的数列长度尽可能大 因为 我们是在不断用小数替换数列中的数 大的数直接拼接到最后 code #include…

文件和结构体

LITTLESUN本来是在学队列啊&#xff0c;在手动模拟队列的地方发现了结构体这个小怪&#xff0c;为了能赶紧打队列大BOSS就赶紧跑过来填下文件和结构体的坑鸭&#xff01; 转载于:https://www.cnblogs.com/LITTLESUNwl/p/10435877.html

电磁波谱与可见光谱

电磁波谱与可见光谱 电磁辐射波 在实际的图像处理应用中&#xff0c;最主要的图像来源于电磁 辐射成像。 电磁辐射波包括无线电波、微波、红外线、可见光、 紫外线、X射线、γ射线。 电磁辐射波的波谱范围很广&#xff0c;波长最长的是无线电波 为3102m&#xff0c;其波长是…

[Leedcode][JAVA][第9题][回文数][数学法]

【问题描述】[简单] 判断一个整数是否是回文数。回文数是指正序&#xff08;从左向右&#xff09;和倒序&#xff08;从右向左&#xff09;读都是一样的整数。示例 1:输入: 121 输出: true 示例 2:输入: -121 输出: false 解释: 从左向右读, 为 -121 。 从右向左读, 为 121- 。…

Weak Pair HDU - 5877 树状数组+离散化+DFS遍历

题意 给我们一颗有根有向树 以及每个点得权值a[1]~a[n] 需要我们求出在这颗树种有多少对满足以下两个条件的pair &#xff08;1&#xff09;u是v的祖先节点 &#xff08;2&#xff09;a[u]*a[v]< k N<1e5 a[i]<1e9 k<1e18 分析 由于需要在树中找符合要求的对…

【模板】最新空web.xml模板

<?xml version"1.0" encoding"UTF-8"?> <web-app xmlns"http://xmlns.jcp.org/xml/ns/javaee"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://xmlns.jcp.org/xml/ns/javaeehttp://x…

人眼的视觉特性

人眼的视觉特性 视觉系统基本构造 视觉过程 包括&#xff1a;光学过程&#xff1b;化学过程&#xff1b;神经处理过程 光学过程 物体在视网膜上成像 整体视觉过程 亮度适应能力 亮度适应能力 明亮较暗现象&#xff1f; 逐渐能够看清物体暗光适应(20~30s) 较暗明亮现象…

微信小程序测试的策略和注意事项

一、测试前准备&#xff08;环境搭建&#xff09; 1.前端页面 微信Web开发者工具安装、授权测试用的微信号可预览和调试小程序...可参考此文&#xff1a; 微信Web开发者工具-下载、安装和使用图解 2.管理后台 配置内网测试服务器环境&#xff0c;通过PC端Web站点管理小程序前端…

【解决问题】idea启动本地tomcat访问localhost:8080报404错误

把tomcat安装目录下webapp下的的ROOT文件夹配置到idea中 并且将/ROOT修改application context为 /

[Leedcode][第十题][剑指offer]面试题第[19]题[正则表达式][动态规划][递归][JAVA]

【问题描述】[困难] 请实现一个函数用来匹配包含. 和*的正则表达式。模式中的字符.表示任意一个字符&#xff0c;而*表示它前面的字符可以出现任意次&#xff08;含0次&#xff09;。在本题中&#xff0c;匹配是指字符串的所有字符匹配整个模式。例如&#xff0c;字符串"…

图像的采样和量化

图像的采样和量化 图像成像模型 图像的采样和量化 图像数字化 •将代表图像的连续(模拟)信号转换为离散(数字) 信号的过程称为图像数字化 •步骤&#xff1a;采样和量化 •主要技术 成像&#xff1a;光信息&#xff0d;>电信号 模数转换&#xff08;A/DConverter&…

Elegant Construction HDU-5813 构造

- 题意 给出我们从1-n城市的点能直接&#xff08;或间接&#xff09;到达的城市的数量作为这个点的权值 让我们判断并构造一个单向图 使得这个图完全契合给出的数据 special judge 任意一组结果就可以题目中给出 图中无环无回路- 分析 刚看到根据联通数目构造图 哇 这怎么做 好…

【解决问题】IDEA配置Tomcat添加Deployment时没有Artifact

下面这里别忘了把整个项目也拉到左边的output-root&#xff08;拉完之后会有个WEB-INF&#xff09;

java将数据生成csv文件

1&#xff0c;httpRequest接口触发进程[或者可以换成其他方式触发] /** * 出入库生成CSV文件 * param req * param params * return */RequestMapping(value "explanCsvFileToOrder")ResponseMessage explanCsvFileToOrder(HttpServletRequest req, RequestParam Ma…