资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/详解css中的display属性（行内元素和块级元素）

详解css中的display属性（行内元素和块级元素）

figofuture / 3277人阅读

摘要：在中，和就是典型的行内元素元素。内联元素不多带带占一行，给他设置宽高是没有用的。在中和就是块级元素。此元素会根据上下文作为块级元素或内联元素显示。此元素会作为块级表格来显示类似，表格前后带有换行符。

display属性

首先，所有主流浏览器都支持 display 属性。其次，我们都知道display 属性规定元素应该生成的框的类型。默认值：inline

我们常用的display属性值有：

inline

block

inline-block

none

把 display 设置成 none 不会保留元素本该显示的空间，但是 visibility: hidden 还会保留。

那么，display:inline、display:block和display:inline-block有什么区别呢？




inline
inline

block
 block

inline-block
inline-block

点击result查看demo:


http://jsfiddle.net/qjgcjLm8/

inline特性

我们发现内联对象inline给它设置属性height和width是没有用的，致使它变宽变大的
原因是

内部元素的宽高`+padding`。观察inline对象的前后元素我们会发现`inline`不多带带占一行，
其它元素会紧跟其后。
block特性 
而块对象`block`是可以设置宽高的，但是它的实际宽高是本身宽高`+padding`。
观察`block`的前后元素我们会发现`block`要多带带占一行。

然而，当我们即需要div有宽高，又不希望它独占一行怎么办？

inline-block特性

这个时候我们就需要使用inline-block了，再观察一下上面的demo，我们会发现：

inline-block既具有block的宽高特性又具有inline的同行元素特性。

也就是说，当我们想要让一个元素既不独占一行，又可以设置其宽高属性的时候，我们就可以选择inline-block了。

然而，在IE6/7下padding对inline的宽高是对其没影响的。

由此，我们可以联想到行内元素和块级元素

行内元素特点 
1、和其他元素都在一行上；

2、元素的高度、宽度、行高及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
块级元素特点 
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

在html中，、、就是典型的行内元素（inline）元素。

块级元素是可以设置宽高的，但是它的实际宽高是本身宽高+padding。block元素要多带带占一行。内联元素不多带带占一行，给他设置宽高是没有用的。

在html中

、

、

、
、
    和
  • 就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将行内元素a转换为块状元素，从页使用a元素具有块状元素特点。

    a{display:block;}

    那么，display的其他属性值呢？

    list-item 此元素会作为列表显示。

    run-in此元素会根据上下文作为块级元素或内联元素显示。

    compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。

    marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。

    table 此元素会作为块级表格来显示（类似table），表格前后带有换行符。
    inline-table 此元素会作为内联表格来显示（类似table），表格前后没有换行符。
    table-row-group 此元素会作为一个或多个行的分组来显示（类似tbody）
    table-header-group 此元素会作为一个或多个行的分组来显示（类似thead）
    table-footer-group： 此元素会作为一个或多个行的分组来显示（类似tfoot）
    table-row 此元素会作为一个表格行显示（类似 tr ）。
    table-column-group 此元素会作为一个或多个列的分组来显示（类似 colgroup ）。
    table-column 此元素会作为一个单元格列显示（类似 col ）
    table-cell 此元素会作为一个表格单元格显示（类似 td 和 th）
    table-caption 此元素会作为一个表格标题显示（类似 caption）

    行内和块级元素

私有云 专线服务 php 行内元素 html设置行内元素 元素属性 DOM元素属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110924.html

相关文章

  • css中的display属性(行内元素和块级元素)

    摘要：元素分类关于这点我还有些问题，暂且放上来，慢慢修改，非常欢迎纠正中的标签元素大体被分为三种不同类型块状元素，内联元素和内联块状元素常见的块状元素有常见的内联元素有有类特殊的元素如等，他们被称为可置换元素。 我们常用的display属性值有： inline block inline-block none 把 display 设置成 none 不会保留元素本该显示的空间，但是 vis...

    Magicer 评论0 收藏0

  • 前端面试题-行内元素和块级元素

    摘要：二块级元素块级元素占据其父元素容器的整个空间，因此创建了一个块。而块级元素可以包含行内元素和其他块级元素。格式默认情况下，行内元素不会以新行开始，而块级元素会新起一行。 一、行内元素 一个行内元素只占据它对应标签的边框所包含的空间。 二、块级元素 块级元素占据其父元素（容器）的整个空间，因此创建了一个块。通常浏览器会在块级元素前后另起一个新行。 三、行内元素示例 HTML showIm...

    int64 评论0 收藏0

  • 前端面试题-行内元素和块级元素

    摘要：二块级元素块级元素占据其父元素容器的整个空间，因此创建了一个块。而块级元素可以包含行内元素和其他块级元素。格式默认情况下，行内元素不会以新行开始，而块级元素会新起一行。 一、行内元素 一个行内元素只占据它对应标签的边框所包含的空间。 二、块级元素 块级元素占据其父元素（容器）的整个空间，因此创建了一个块。通常浏览器会在块级元素前后另起一个新行。 三、行内元素示例 HTML showIm...

    cucumber 评论0 收藏0

  • 块级元素和行内元素

    摘要：例效果注为块级元素行内元素，与块级元素相对，它不会占一行，两个甚至多个行内元素一般情况下在同一行。块级元素各占据一行默认宽度为父元素的，垂直方向排列。块级元素可以包含行内元素和块级元素。一直对块级元素和行内元素的区别和特性有点模糊，于是各方参考总结一下，方便自己梳理知识： 首先说一下什么是块级元素和行内元素块级元素，指自动占一行的元素，下一个元素（标签）会在新行开始，这行就是这个块级元素的地...

    yhaolpz 评论0 收藏0

  • 行内元素和块元素以及行内块元素的特点

    摘要：标签一般分为块标签和行内标签两种类型，也可以称为块元素和行内元素。块元素和行内元素的具体特点如下三块级元素块元素会独自占据一整行，或者多行，可以任意设置其大小尺寸，是用于搭建网页布局的必须部分，使网页结构更加紧凑合理。一、背景 初学html，接触很多标签、、、、等，当写出简单的小页面的时候，例如仅仅是一篇带有标题的文章，标题标签单独一行，不管后面有多大的空间；标签中使用多个给某些词做强调，但...

    OldPanda 评论0 收藏0

发表评论

登陆后可评论

0条评论

figofuture

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
UCloud （优刻得科技股份有限公司）

UCloud （优刻得科技股份有限公司）是中立、安全的云计算服务平台，坚持中立，不涉足客户业务领域。公司自主研发IaaS、PaaS、大数据流通平台、AI服务平台等一系列云计算产品，并深入了解互联网、传统企业在不同场景下的业务需求，提供公有云、混合云、私有云、专有云在内的综合性行业解决方案。

Copyright © 2012-2023 UCloud 优刻得科技股份有限公司｜沪公网安备 31011002000058号｜ 沪ICP备12020087号-3｜
<