html中的块级元素与行级元素

发表于 |
| 字数统计: 1k | 阅读时长 ≈ 3

前言

在最开始的时候没有清除的认识到块级元素与行级元素的差别，也没有想到二者之间有如此大的差别，以及二者之间的关系以下是我对二者的学习总结：

块级元素和行内元素的定义

块级元素：

  • 总是在新行上开始；
  • 高度，行高以及外边距和内边距都可控制；
  • 宽度缺省是它的容器的100%，除非设定一个宽度。
  • 它可以容纳内联元素和其他块元素

行内元素？

  • 和其他元素都在一行上；
  • 高，行高及外边距和内边距不可改变；
  • 宽度就是它的文字或图片的宽度，不可改变
  • 内联元素只能容纳文本或者其他内联元素

对行内元素，需要注意如下：

  • 设置宽度width 无效。
  • 设置高度height 无效，可以通过line-height来设置。
  • 设置margin 只有左右margin有效，上下无效。
  • 设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

    可以通过display对二者进行调整

    display属性表：
值 描述
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
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>）
inherit 规定应该从父元素继承 display 属性的值。

这是一个小测试：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style>
  div{
      border: 1px solid blue;
      margin-bottom: 10px;
  }
  span{
      border: 1px solid red;
      height: 50px;
      margin: 40px;
      /* 可以发现对span这个行内元素设置了height属性但是其并没有生效 
      设置了margin，但只有左右margin生效，padding同理。
      */
  }
  .div3{
    display: inline;
    /* 将其设为行内元素，其只拥有行内元素的特性 */
    
  }
  .div4{
      display: inline-block;
      /* 将其设置为行内块级元素，兼具二者特性 */
      height: 50px;
  }
</style>
<body>
<div>这是第一个div:div是块级元素，默认宽度是100%,可以设置宽度与高度，默认自动占一行</div>
<div>这是第二个div<span>这是一个块级元素:大小只与内容有关，不可以设置宽度与高度，但能设置行高，默认不占一行</span></div>
<div">这是第三个div：通过display:inline将其变为行内元素</div>
<div">这是第四个div:通过display:inline-block将其变为行内块级元素，兼具二者特性</div>
</body>

效果图：

以上就是我的学习总结。

-------------本文结束感谢您的阅读-------------
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多