块级元素和行内元素区别

css中将html标签分为哪几种类型?

在CSS中,html中的标签元素大体被分为三种不同的类型:
块状元素、内联元素(又叫行内元素)和内联块状元素。
块状元素:display:block内联元素:display:inline

常用的块状元素有:

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

内联块状元素:display:inline-block

常用的内联元素有:

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

常用的内联块状元素有:

<img>、<input>

行内元素和块级元素的具体区别是什么?inline-block是什么?
一,行内元素与块级元素的区别:

1.行内元素与块级元素直观上的区别二、行内元素与块级元素的三个区别

行内元素会在一条直线上排列(默认宽度只与内容有关),都是同一行的,水平方向排列。

块级元素各占据一行(默认宽度是它本身父容器的100%(和父元素的宽度一致),与内容无关),垂直方向排列。块级元素从新行开始,结束接着一个断行。

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素,只能包含文本或者其它行内元素。

3.行内元素与块级元素属性的不同,主要是盒模型属性上:行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效

二、行内元素和块级元素转换

    display:block; (字面意思表现形式设为块级元素)

   display:inline; (字面意思表现形式设为行内元素)

三、inline-block

inline-block 的元素(如input、img)既具有 block 元素可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性,比如 inline-block 元素也可以设置 vertical-align(因为这个垂直对齐属性只对设置了inline-block的元素有效) 属性。
HTML 中的换行符、空格符、制表符等合并为空白符,字体大小不为 0 的情况下,空白符自然占据一定的宽度,使用inline-block 会产生元素间的空隙。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

块级元素和行内元素区别