行内元素和块元素

发表于： 2019-04-15

字数：747 阅读：≈ 2分钟浏览：

这几天在学长学姐的一个公司那边跟着学前端，基本都还是写一个界面为主，在写CSS的时候就碰到了行内元素和块元素这两个知识点，这里做个整理，方便以后回顾。

内容决定所占空间的多少，内容多少就占多少空间

不能换行

不能设置宽高（默认宽高是0）

margin垂直方向无效（margin-top,margin-bottom）,若设置垂直方向用line-height属性

当多个行内元素排列在一起，他们之间会出现空格

a buttun span input label 等，具体可查阅行内元素

不管内容多少，块元素都会在浏览器中独占一行，即有多个块元素时，会从上至下排列

可设置宽高，如果不设置宽高那么它的宽度是100%，即占满父级元素一整行

相邻外边距会重叠，比如margin-bottom和margin-top重叠（可用padding或border解决）

div h1-h6 p ul li 等，具体可查阅块级元素

行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。

不自动换行

能够识别宽高

默认排列方式为从左到右

我们可以通过设置display的属性，来操纵一个元素是哪类元素。

1
2
3


display: inline;
display: block;
display: inline-block;

Syasusu's Blog