css 块级元素与内联元素

前言

HTML标签种类繁多，常见的标签有<div>、<p>、<li>以及<img>、<span>等。

CSS为了流体布局的需要通常这些标签分为两大类：块级元素和内联元素（内联级元素）。

因为CSS诞生之初就是为了解决网页图文布局的，所以为了布局的需要将标签分了两类，块级元素负责结构，内联元素负责内容。

块级元素

块级元素（block-level element）‘用于负责结构’，它垂直显示，宽度自动撑满，可以设置宽高。常见块级元素有div 、h1 ~ h6 、p、ol、ul、li等。

这里需要特别说明一下：

display: block的元素是块级元素，但不代表块级元素就是display: block;

例如：<li>标签 display 的默认值是 list-item，<table>标签display 的默认值是 table。但它们都是块级元素。

清除浮动

由于块级元素具有换行特性，因此可以结合 clear 属性来清除浮动。

    .clear:after { 
        content: ''; 
        display: table; // 也可以是 block，最好不要是 list-item 
        clear: both; 
    }

为什么最好不要是 list-item ？

因为display: list-item; 主要是因为它兼容性不好 IE 浏览器不支持,

并且额外会出现的项目符号，还得再加一行 list-style: none;

内联元素

内联元素（inline-level elements）‘用于负责内容’，它并排显示，宽度自动收缩，不能设置宽高。常见内联元素有a、span、b、u、label 、em等。

这里也需要特别说明一下：

内联元素也一样，display 为 inline 的元素是内联元素，但不代表块级元素就是display: inline;

display 为inline-block 和 inline-table 都是内联元素。

例如：按钮，其 display 默认值是 inline-block；是内联元素。

结语

本文到此结束

如果大家还有什么其他想法，欢迎在评论区交流！