900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 行内 块级 行内块三者元素的区别

行内 块级 行内块三者元素的区别

时间:2019-07-03 10:02:16

相关推荐

行内 块级 行内块三者元素的区别

1.行内元素:

特点:

与其他行内元素并排,不能设置宽高,默认的宽度就是文字的宽度。

行内元素不能设置margin-top,margin-bottom,padding-top,padding-bottom,line-height.

行内元素有:

除了p之外,所有的文本级标签,都是行内元素。p是个文本级标签,但是是个块级元素。

<span>...</span><a>...</a> 链接<br> 换行<b>...</b> 加粗<strong>...</strong> 加粗<sup>...</sup> 上标<sub>...</sub> 下标<i>...</i> 斜体<em>...</em> 斜体<del>...</del> 删除线<u>...</u> 下划线<input>...</input> 文本框<textarea>...</textarea> 多行文本<select>...</select> 下拉列表

2.块级元素:

特点:

霸占一行,不能与其他任何元素并列。能接受宽高,如果不设置宽度,那么宽度将默认变为父级的100%。

块级元素:所有的容器级标签,都是块级元素,以及p标签。div , h系列 , li , dt ,dd。

注意:

段落元素(文字元素)内不能放块元素

例如,p标签里不能放div标签,h1中也不能放div

<address>...</adderss> <center>...</center> 地址文字<h1>...</h1> 标题一级<h2>...</h2> 标题二级<h3>...</h3> 标题三级<h4>...</h4> 标题四级<h5>...</h5> 标题五级<h6>...</h6> 标题六级<hr> 水平分割线<p>...</p> 段落<pre>...</pre> 预格式化<blockquote>...</blockquote> 段落缩进 前后5个字符<marquee>...</marquee> 滚动文本<ul>...</ul> 无序列表<ol>...</ol> 有序列表<dl>...</dl> 定义列表<table>...</table> 表格<form>...</form> 表单<div>...</div>

3.行内块元素

特点:

和相邻的行内元素(包含行内块)在一行上,它们直接会有空白缝隙;

一行可以显示多个;

默认宽度就是内容的宽度;

高度、宽度、内外边距都可以自定义;

注意了:img是一个可替换元素。它的 display 属性的默认值是 inline,但是它的默认分辨率是由被嵌入的图片的原始宽高来确定的,使得它就像 inline-block 一样。你可以为 设置 border/border-radius、padding/margin、width、height 等等的 CSS 属性。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。