块状元素、内联元素和内联块状元素

CSS中，html中的标签元素大体被分为三种不同的类型：块状元素（display：block）、内联元素(又叫行内元素display：inline)和内联块状元素（display:inline-block）。可以通过代码来相互转换。
一.常用的块状元素有：

<div>、<p>、<h1>-<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）。默认高度等于子元素高度。父子均是块级元素时，子块的高度可能冲破父级的限制

二.常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

内联元素特点：
1.和其他内联元素都在一行上；

2.可以通过margin、padding来改变左右的距离，但不可以改变上下的距离，导致width、height、line-height失效或。可以使用border。

3.内联元素之间有空白区域，空白区域的形成是因为<span>之间有回车，在html中，空格、制表符、回车都属于空白符，多个空白符都会视为一个空格，空格的大小由父级<div>的font-size决定。注意：只有内联(内联块)与内联(内联块)之间的空白符才会形成一个空格，文本元素(除空白符)也是属于内联元素。常用解决方法，给<div>设置font-size: 0;，在<span>上把font-size设置回去

三.常用的内联块状元素有：

<img>、<input>

inline-block 元素特点：
1.和其他元素都在一行上；

2.元素的高度、宽度、行高以及顶和底边距都可设置。

3.它也会有元素间出现空白区域的问题

四、参考的文章：
https://www.jianshu.com/p/1cf...

https://segmentfault.com/a/11...

块状元素、内联元素和内联块状元素相关推荐

html 指定对象为块元素,html内联（行内）元素、块级（块状）元素和行内块元素分类...
HTML可以将元素分类方式分为内联(行内)元素.块级(块状)元素和行内块元素三种. 注:HTML是标签语言,那么既然是标签,就可以自己定义一些自己元素(如自定义的元素等),自定义元素浏览器默认解析为内 ...
html 内联元素转换,HTML 什么是内联元素？
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,而display属性为inline的元素就是行内元素. 内联元素(inl ...
html5块元素代码,html5 区块与内联div 与span html块级元素(示例代码)
HTML 和可以通过和将 HTML 元素组合起来. HTML 块元素大多数 HTML 元素被定义为块级元素或内联元素. 编者注:"块级元素"译为 block level e ...
为什么有些内联（行内）元素可以设置宽高？
为什么有些内联(行内)元素如img.input可以设置宽高? 在说明之前我们先来了解一些定义. 块级元素和内联元素: ①块级元素总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示. 宽 ...
在html中列表是块元素还是,HTML基础知识4-列表及表单的写法、块级元素和内联（行内）元素的区别...
一.有序列表.无序列表.自定义列表如何使用?写个简单的例子.三者在语义上有什么区别?在哪些情况下使用哪种(重要)? 如何嵌套? 1.简单例子如下: Document div.div1 { backgr ...
html常见的块元素与内联（行内）元素用法说明
html平时常见的块元素有:div, p, h1, h2, h3等,内联元素有:span, a, img等. 块元素的属性:无论内容是什么,都会独占一整行.主要用于页面布局. 内联元素的属性:只占自身 ...
web前端入门到实战：html常见的块元素与内联（行内）元素用法说明
html平时常见的块元素有:div, p, h1, h2, h3等,内联元素有:span, a, img等. 块元素的属性:无论内容是什么,都会独占一整行.主要用于页面布局. 内联元素的属性:只占自身 ...
html块级元素转换内联,HTML中的块级元素和内联元素
1.特性块级元素(block level element) 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示宽度(width).高度(height).内边距(padding)和外 ...
html中内联元素是什么意思,html中的块元素和内联元素的区别
一.定义块元素一般都从新行开始,它可以容纳内联元素和其他块元素,可设置高度.宽度和边距等. 内联元素一般都是基于语义级的基本元素,它只能容纳文本或其他内联元素,主要特点是:和其他元素位于同一行上,高 ...
iframe内联元素有白边原因_Selenium无法定位元素的几种解决方案
01frame/iframe表单嵌套 WebDriver只能在一个页面上对元素识别与定位,对于frame/iframe表单内嵌的页面元素无法直接定位. 解决方法: driver.switch_to.f ...

块状元素、内联元素和内联块状元素

块状元素、内联元素和内联块状元素相关推荐

最新文章

热门文章