一、块元素

display:block

//常见的块元素有<p></p><h1></h6><ul></ul><ol></ol><hr><div></div><form></form>

特点：
①、自己独占一行。
②、高宽、内外边距都可以控制。
③、默认宽度时父级宽度。
④、是一个容器和盒子，里面可以放行内元或者块级元素。
注意：
①、文字类元素内不能使用块级元素。
例如：

、标签主要用于放文字，里面不能再放其它块级元素。

插入一下如果两个块元素同时设置margin，会引起margin塌陷，两个块之前的margin以大的margin为准

二、行内元素

display：inline

//常见的行内元素有<span></span><a href=""></a><b></b><strong></strong><i></i><em></em><label></label><small></small>

特点：
①、一行可以显示多个。
②、宽高设置无效。
③、默认宽度是他本身内容的宽度。
④、行内元素只能容纳文本或者其它行内元素，不能放块级元素。
注意：
①、链接里面不能再放链接。
②、特殊情况 a 里面可以放块级元素，但是要转换为块级模式最安全。

三、行内块元素

display：inline-block

//常见的行内块元素有<img src="" ><iframe src="" ></iframe><input type=""  /><textarea rows="" cols=""></textarea><select></select><button type=""></button>

特点：
①、一行可以显示多个。
②、默认宽度就是他本身内容的宽度。
③、宽高、内外边距都可以控制。

链接: https://www.cnblogs.com/wan520/p/13916536.html

html基础之块元素、行内元素、行内块元素相关推荐

HTML基础-标签分类(闭合标签，空标签，块级元素，行内元素，行级块元素，可替换元素)
文章目录一.闭合标签和空标签二.位置特性(块级元素,行内元素,行级块元素) 块级元素(block) 行级元素(inline) 行内块元素(inline-block) 三.元素之间的转化四.可替换 ...
元素（块、行内、行内块
块元素的特点 1.支持所有样式 2.块级元素独占一行 3.块级元素默认宽度和父元素一样常用块元素块级元素一般 div p ol ul h1-h6 li dl dt dd 等都是初始化(样式重置 ...
html的div块float后宽度无效,行内元素（例如）设置float之后才能用width调整宽度...
本文将要为您介绍的是行内元素(例如)设置float之后才能用width调整宽度,具体完成步骤: 因为只有块元素才会有物理属性,在css世界里边,有三种形态的东西,1.块元素. 特性:有物理属性,wid ...
块元素div转变为行内块元素之后如何消除之间间隙
块元素div转变为行内块元素之后如何消除之间间隙写了三个div,使其变成行内块元素之后,发现,有间隙,哟,我的小天使啊. 最外层父级div宽度width大于三个小div宽度之和父级div: #aa ...
行内元素和块级元素：内联(行级)元素不能设置margin-top
内联(行级)元素不能设置宽高,但padding属性可以设置,需要注意的是行级元素不能设置margin-top和margin-bottom属性,但可以设置margin-left和margin-righ ...
行转换html,块级、行内、行内元素相互转换
块级.行内.行内元素相互转换 html> 块级.行内.行内块元素相互转换 *{margin: 0px;padding: 0px;} body{background: url(images/5.j ...
行内元素有哪些？块级元素有哪些？空(void)元素有那些？行内元素和块级元素有什么区别？
行内元素有哪些? 常用的行内元素: a - 锚点 em - 强调 br - 换行 img - 图片 font - 字体设定(不推荐) span - 常用内联容器,定义文本内区块 input - 输入框 ...
html行内元素转为块级元素,前端面试题-行内元素和块级元素
一.行内元素一个行内元素只占据它对应标签的边框所包含的空间. 二.块级元素块级元素占据其父元素(容器)的整个空间,因此创建了一个"块".通常浏览器会在块级元素前后另起一个新行. ...
CSS之块、行内、行内块元素
块元素独占一行如h1-h6.p.div.ul.ol.li等: 宽高内外边距可以调: 宽度默认是父级宽度100%: 都是容器盒子,里面可以放行内或块级元素. 注意点:文字类元素如p. ...
行内元素与块级元素的区别，行内元素与块级元素分别有哪些
文章目录 1.块级元素 2.行内元素 3.行内块元素(融合了前两者的特点) 4.三个元素的转换 5.常用的行内元素 6.常用的块级元素 6.常用的块级元素 1.块级元素 1.总是从新的一行开始,即各个 ...

html基础之块元素、行内元素、行内块元素

html基础之块元素、行内元素、行内块元素

一、块元素

二、行内元素

三、行内块元素

html基础之块元素、行内元素、行内块元素相关推荐

最新文章

热门文章