【前端基础】行元素、块元素、行块元素

行内元素

常用的行元素：<span>、修饰字体的<b>和<i>标签。

特性：

• margin：左右有效、上下无效；padding的上下左右都有效
• 不能设置宽高
• 不能自动换行

块状元素

常用的块元素：<div>、其他块元素还有：<p>、<nav>、<aside>、<header>、<footer>、<section>、<article>、<ul-li>等。

• 多个块元素标签写在一块，默认的排列方式是由上至下。
• margin、padding的上下左右都有效。
• 能够识别宽高
• 可以自动换行

行内块元素

行内块元素综合了行元素和块元素的特性，但是各有取舍。

• 不能自动换行
• 可以设置宽高
• 多个行内块元素写在一起，默认排列方式是从左到右

行元素和块元素的区别

1. 行元素不能嵌套块元素，块元素可以嵌套块元素
2. 给行元素设置宽高不会生效，可以给块元素设置宽高
3. 给行元素设置margin：left、right好使；top、bottom上下不好使。给块元素的margin设置上下左右都能生效。
4. 行元素不能自动换行，块元素可以自动换行。

行元素、块元素、行块元素相互切换

display:inline;//变成行元素
display:block;//变成块元素
display:inline-block;//变成行块元素

去掉div间隔的方法

这么写两个div之间会有间隔

<div>1</div>
<div>2</div>

如何去掉两个临近div间的间隔，方法如下：

方法1：

去掉回车

<div>1</div><div>2</div>

方法2：

给body的font-size设置为0

body{
    font-size=0;
}