探究行内元素和块级元素

html中元素主要分为行内元素和块级元素

晋州网站建设公司创新互联建站,晋州网站设计制作,有大型网站制作公司丰富经验。已为晋州上千余家提供企业网站建设服务。企业网站搭建\外贸网站建设要多少钱,请找那个售后服务好的晋州做网站的公司定做!

行内元素

  • 不独占一行
  • 书写完成后不会自动换行
  • 没有宽和高

块级元素

  • 独占一行
  • 书写完会自动换行
  • 宽和高可以修改

还有一种特殊的元素叫作行内块级元素

描述
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。

块级元素和行内元素的分类

html中的块级元素:


标签描述
<address> 定义地址。
<article> 定义文章。
<aside> 定义页面内容之外的内容。
<audio> 定义声音内容。
<blockquote> 定义长的引用。
<canvas> 定义图形。
<caption> 定义表格标题。
<dd> 定义定义列表中项目的描述。
<div> 定义文档中的节。
<dl> 定义定义列表。
<dt> 定义定义列表中的项目。
`
定义元素的细节。
<fieldset> 定义围绕表单中元素的边框。
<figcaption> 定义 figure 元素的标题。
<figure> 定义媒介内容的分组,以及它们的标题。
<footer> 定义 section 或 page 的页脚。
<form> 定义供用户输入的 HTML 表单。
<h2> to <h7> 定义 HTML 标题。
<header> 定义 section 或 page 的页眉。
<hr> 定义水平线。
<legend> 定义 fieldset 元素的标题。
<li> 定义列表的项目。
<menu> 定义命令的列表或菜单。
<meter> 定义预定义范围内的度量。
<nav> 定义导航链接。
<noframes> 定义针对不支持框架的用户的替代内容。
<noscript> 定义针对不支持客户端脚本的用户的替代内容。
<ol> 定义有序列表。
<output> 定义输出的一些类型。
<p> 定义段落。
<pre> 定义预格式文本。
<section> 定义 section。
<table> 定义表格。
<tbody> 定义表格中的主体内容。
<td> 定义表格中的单元。
<tfoot> 定义表格中的表注内容(脚注)。
<th> 定义表格中的表头单元格。
<thead> 定义表格中的表头内容。
<time> 定义日期/时间。
<tr> 定义表格中的行。
<ul> 定义无序列表。

html中的行内元素:


标签描述
<a> 定义锚。
<abbr> 定义缩写。
<acronym> 定义只取首字母的缩写。
<b> 定义粗体字
<bdo> 定义文字方向。
<big> 定义大号文本。
<br> 定义简单的折行。
<button> 定义按钮 (push button)。
<cite> 定义引用(citation)。
<code> 定义计算机代码文本。
<command> 定义命令按钮。
<dfn> 定义定义项目。
<del> 定义被删除文本。
<em> 定义强调文本。
<embed> 定义外部交互内容或插件。
<i> 定义斜体字。
<img> 定义图像。
<input> 定义输入控件。
<kbd> 定义键盘文本。
<label> 定义 input 元素的标注。
<map> 定义图像映射。
<mark> 定义有记号的文本。
<objec> 定义内嵌对象。
<progress> 定义任何类型的任务的进度。
<q> 定义短的引用。
<samp> 定义计算机代码样本。
<select> 定义选择列表(下拉列表)。
<small> 定义小号文本。
<span> 定义文档中的节。
<strong> 定义强调文本。
<sub> 定义下标文本。
<sup> 定义上标文本。
<textarea> 定义多行的文本输入控件。
<time> 定义日期/时间。
<tt> 定义打字机文本。
<var> 定义文本的变量部分。
<video> 定义视频。
<wbr> 定义可能的换行符。

实例

我们书写几个span标签
探究行内元素和块级元素

可以看到几个span都出现在了一行内

我们再书写几个div标签
探究行内元素和块级元素

可以看到div已经垂直了(不在一行内)
继续:我们给div添加一个刚才提到的特殊元素:行内块级元素inline-block
探究行内元素和块级元素

探究行内元素和块级元素
此时div会变成行内块级元素,同时宽和高也在
因此 inline-block既有行内元素水平排列的特点,也有块级元素设置宽高的特点

  • 仔细看上图,会发现水平方向有一个bug,有一个间隔 空闲时间可以去百度下hack~
  • 解决办法:
  • margin:-3pxposition:relitive;left:-3px;

关于行内元素和块级元素先谈这么多,听说认真阅读并点赞的你,代码敲的最6哦~
有兴趣的小伙伴可以加我微信,一起讨论;V-x: dandanshen987

有一天,当你明白"小白" +"勤奋"的时候,你就会成为大牛


新闻名称:探究行内元素和块级元素
网站链接:http://ybzwz.com/article/pjgdeo.html