1 常见的行内元素和块级元素

	特点	注意
块级元素 div h1~h6 p ul ol li	比较霸道；自己独占一行高度，宽度、外边距以及内边距都可以控制宽度默认是容器（父级宽度）的100% 是一个容器及盒子，里面可以放行内或者块级元素	文字类的元素内不能使用块级元素；<p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div>；同理<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素
行内(内联)元素 span a strong b em i del s ins u	相邻行内元素在一行上，一行可以显示多个高和宽直接设置是无效的默认宽度就是它本身内容的宽度行内元素只能容纳文本或其他行内元素	链接里面不能再放链接；特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全
行内块元素 img input td button	和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙；一行可以显示多个（行内元素特点）默认宽度就是它本身内容的宽度（行内元素特点）高度，行高、外边距以及内边距都可以控制（块级元素特点）

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或则其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

转换为块元素 : display:block

转换为行内元素 : display:inline

转换为行内块 : display: inline-block

判断一个标签属于哪一类只需要设置宽高即可证明

<!--块级-->
<div>div</div>
<div>div</div>
<hr>
<!--行内-->
<span>1</span>
<span>1</span>
<hr>
<!--行内块-->
<button>button</button>
<button>button</button>

<style>div {height: 50px;width: 100px;background-color: pink;}span {height: 50px;width: 100px;background-color: pink;}button {height: 50px;width: 100px;background-color: pink;}
</style>

行内元素上下的margin是无效的，可以指定左右margin值

p标签里面 + div 是有问题的

HTML行内元素和块级元素相关推荐

html 图片行内剧中,HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)...
一.转义字符由特殊字符包裹的文本会当做标签去解析对应不换行空格对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响. < ...
php div行内块元素,行内元素与块级元素的区别详细介绍
首先,CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,分别为块级(block).行内(inline). 块级元素:(以下列举比较常用的块级元素,详 ...
css变成块级元素_探讨行内元素转换为块级元素_html/css_WEB-ITnose
行内元素和块级元素对于前端来说是一个很重要的概念.在CSS中,只有块级元素有物理属性,而元素则有三种形态: 1. 块级元素:有物理属性,width,height写值起作用,而且要占据一行. 2. 行内 ...
【HTML】行内元素与块级元素
一.行内元素与块级元素的三个区别 1.行内元素与块级元素直观上的区别行内元素会在一条直线上排列,都是同一行的,水平方向排列块级元素各占据一行,垂直方向排列.块级元素从新行开始结束接着一个断行. 2 ...
行内块元素有哪些标签_html的行内元素与块级元素总结
希望大家补充一下常见的块级元素与行内元素~ 如有错误,请大家在评论区指出,一起进步! 一.区别二.常见的块级元素: p:段落标签 div:把DIV看作是一容器,容器专门用来包含内容 h1.h2- - ...
行内元素和块级元素的区别
1.常见行内元素和块级元素 (1)行内元素 <span>.<a>.<br>.<b>.<strong>.<img>.<inp ...
html块中的内容垂直居中,css如何设置行内元素与块级元素的内容垂直居中
首先我们先了解一下行内元素和块级元素行内元素(内联元素):没有自己的独立空间,它是依附于其他块级元素存在的,空间大小依附于内容多少.行内元素没有度.宽度.内外边距等属性. 块级元素:占据独立的空间, ...
[css] 行内元素和块级元素有什么区别，如何相互转换？
[css] 行内元素和块级元素有什么区别,如何相互转换? 一般通过display属性来区分块级元素和行内元素,block代表块级元素,inline代表行内元素. 块级元素: 1.内容独占一行. 2.w ...
行内元素与块级元素，以及区别
行内元素与块级元素首先,CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,分别为块级(block).行内(inline). 块级元素:(以下列举比 ...
行内元素和块级元素的区别，为何img、input等行内元素可以设置宽高??（夯实基础）
我们习惯将html中元素分类为行内元素和块级元素,如下: ·常见块级元素有:html.body.div.header.footer.nav.section.aside.article.p.hr.h1~ ...

HTML行内元素和块级元素

1 常见的行内元素和块级元素

HTML行内元素和块级元素相关推荐

最新文章

热门文章