0
点赞
收藏
分享

微信扫一扫

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 都是内联元素。

例如:<button>按钮,其 display 默认值是 inline-block;是内联元素。

结语

本文到此结束

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

举报

相关推荐

0 条评论