块级元素和行内元素的区别

多态露台
• 阅读 3894

区别:

注:行内元素会在一条直线上,是在同一行的。

//我是行内元素SPAN标签//我是行内元素strong标签//

注:块级元素各占一行。是垂直方向的!

我是块级元素div标签
我是块级元素P标签

如果你要将行内元素变成块级元素,那么就只需要在该标签上加上样式 display:block

块级元素可以用样式控制其高和宽。

行内元素不可以控制宽和高。

除非你想将它转变成为块级元素。它的宽和高,是随标签里的内容而变化。

所有行内元素和块级元素标签(比较懒,别人整理的):

块级元素列表

<address>定义地址

<caption>定义表格标题

<dd>定义列表中定义条目

<div>定义文档中的分区或节

<dl>定义列表

<dt>定义列表中的项目

<fieldset>定义一个框架集

<form>创建 HTML 表单

<h1>定义最大的标题

<h2>定义副标题

<h3>定义标题

<h4>定义标题

<h5>定义标题

<h6>定义最小的标题

<hr>创建一条水平线

<legend>元素为 fieldset 元素定义标题

<li>标签定义列表项目

<noframes>为那些不支持框架的浏览器显示文本,于 frameset 元素内部

<noscript>定义在脚本未被执行时的替代内容

<ol>定义有序列表

<ul>定义无序列表

<p>标签定义段落

<pre>定义预格式化的文本

<table>标签定义 HTML 表格

<tbody>标签表格主体(正文)

<td>表格中的标准单元格

<tfoot>定义表格的页脚(脚注或表注)

<th>定义表头单元格

<thead>标签定义表格的表头

<tr>定义表格中的行

行内元素列表

<a>标签可定义锚

<abbr>表示一个缩写形式

<acronym>定义只取首字母缩写

<b>字体加粗

<bdo>可覆盖默认的文本方向

<big>大号字体加粗

<br>换行

<cite>引用进行定义

<code>定义计算机代码文本

<dfn>定义一个定义项目

<em>定义为强调的内容

<i>斜体文本效果

<img>向网页中嵌入一幅图像

<input>输入框

<kbd>定义键盘文本

<label>标签为 input 元素定义标注(标记)

<q>定义短的引用

<samp>定义样本文本

<select>创建单选或多选菜单

<small>呈现小号字体效果

<span>组合文档中的行内元素

<strong>语气更强的强调的内容

<sub>定义下标文本

<sup>定义上标文本

<textarea>多行的文本输入控件

<tt>打字机或者等宽的文本效果

<var>定义变量

可变元素素列表

可变元素为根据上下文语境决定该元素为块元素或者内联元素

<button>按钮

<del>定义文档中已被删除的文本

<iframe>创建包含另外一个文档的内联框架(即行内框架)

<ins>标签定义已经被插入文档中的文本

<map>客户端图像映射(即热区)

<object>object对象

<script>客户端脚本
点赞
收藏
评论区
推荐文章
明月 明月
4年前
css实现文字两端对齐
language这是摘哦给你发觉得斯蒂芬这是摘哦给你发觉得斯蒂芬在块级元素box上面,加上textalign:justify;,在span元素上加上样式languagedisplay:inlineblock;paddingleft:100%;效果图
小嫌 小嫌
4年前
css中块状元素和内联元素
CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。块状元素块状元素特点1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。常用的块状元素有:、
菜园前端 菜园前端
3年前
考考你HTML常用的标签有哪些?
原文链接:基础标签div块元素介绍:没有任何含义,主要用于div进行模块布局类型:块级元素block,盒子占用宽度为一整行属性:没有属性language我是模块span行内文本元素介绍:没有任何含义,主要用于展示文本内容类型:内联元素inline,盒子占用
Wesley13 Wesley13
4年前
JQ选择器
如果你想寻找id以“sub\_”开头的元素,你可以使用:$("id^'sub_'")如果你想寻找id以“trim”结尾的元素,你可以使用:$("id$'trim'")要获得id包含“AAA”的元素,需要使用(这比遍历要快)$("id'trim'")可以指定元素类型input或者其他标签
Stella981 Stella981
4年前
Python+Selenium自动化篇
本篇文字主要学习selenium定位页面元素的集中方法,以百度首页为例子。0.元素定位方法主要有:id定位:find\_element\_by\_id('')name定位:find\_element\_by\_name('')class定位:find\_element\_by\_class\_name(''
Wesley13 Wesley13
4年前
CSS块级元素与行内元素
CSS块级元素与行内元素行内元素与块状元素1、块级元素:可以设置width,height属性。行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化。可以通过lineheight设置行高(行高和height是不同的东西)。2、块级元素:可以设置margin和padd
Wesley13 Wesley13
4年前
CSS实现居中的方式
在介绍居中方式之前,简单介绍一下行内元素和块级元素。行内元素和其他元素都在同一行高,行高及外边距和内边距部分可以改变宽度只与内容有关行内元素只能容纳文本或者其他行内元素常用内联元素:a,img,input,lable,select,span,text
Wesley13 Wesley13
4年前
CSS中清除浮动的作用以及如何清除浮动
1.什么是浮动,浮动的作用“浮动”从字面上来理解就是“悬浮移动、非固定”的意思。块级元素(div、table、span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观。这就要用到浮动了。被设置浮动的元素会脱离标准流(竖直排列),从而达到水平排列的效果。例如.未设置浮动时图1中的两张图片竖直排列在父级元素(橙色区域)
Wesley13 Wesley13
4年前
CSS清除浮动的4种方式
1、使用空标签清除浮动。我用了很久的一种方法,空标签可以是div标签,也可以是P标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动,并为其定义CSS代码:clear:both。此方法的弊端在于增加了无意义的结构元素。2、使用overflow属性。此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用
Stella981 Stella981
4年前
2014年百度阿里前端面试(一面)
先说下百度:百度的笔试题目是相对较简单的,都是些基本知识例如html里面的空元素,块级元素,行内元素,第二题是link和@import引入css的区别,第三个是一个函数输出的题,也很简单,往后的几个是提升网站性能,还有一个域名劫持,最后一个是一个编程题让把一个数按照1000,000,000这样的状态输出,总之都不是很难;百度被称为是炮灰的坟墓,进入面试的人很
可莉 可莉
4年前
2014年百度阿里前端面试(一面)
先说下百度:百度的笔试题目是相对较简单的,都是些基本知识例如html里面的空元素,块级元素,行内元素,第二题是link和@import引入css的区别,第三个是一个函数输出的题,也很简单,往后的几个是提升网站性能,还有一个域名劫持,最后一个是一个编程题让把一个数按照1000,000,000这样的状态输出,总之都不是很难;百度被称为是炮灰的坟墓,进入面试的人很
多态露台
多态露台
Lv1
十年一觉扬州梦,赢得青楼薄幸名。
文章
4
粉丝
0
获赞
0