css块元素，行内元素，行内块元素详解

编程小阳

已于 2024-07-17 15:22:08 修改

阅读量266

点赞数 9

文章标签： css 前端

于 2024-07-17 15:18:35 首次发布

本文链接：https://blog.csdn.net/OYJP666/article/details/140495863

版权

CSS元素显示模式(块元素，行内元素，行内块元素)

块元素

常见块元素：<h1> <p> <div> <ul> <ol> <li> <form>以及html5语义化标签<header> <footer> <nav> <article> <section>等等, 其中<div>是最典型的块元素

块元素特点：

独占一行
可以设置高度，宽度，外边距以及内边距
宽度默认是父级宽度
是一个容器盒子里面可以放行内元素或者块级元素

注意：

文字类的元素里面不允许放块级元素。如：<p>标签里面不能放块级元素特别是div

同理，h1~h6里面也不能放块级元素

行内元素(也称为内联元素)

行内元素：一行排列多个，不能设置宽高

常见的行内元素有：<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span> <label> <button> <br> <font>等等，其中<span>是最典型的行内元素

行内元素的特点：

相邻的行内元素在一行上面，一行可以显示多个行内元素
宽高直接设置是无效的
默认宽度就是他本身的宽度
行内元素只能容纳文本或其他行内元素

注意：行内元素里面不能放块元素

链接里面能不能放链接

行内元素的上下外边距不生效，左右外边距生效

小技巧：想让行内元素和行内块元素水平居中，只需要给其父元素添加 text-align: center 即可

行内块元素

在行内元素里面有几个特殊的标签----<img/> ，<input>，<td>，<textarea>，<select>他们同时拥有块元素和行内元素的特点。有些资料称他们为行内块元素

行内块元素的特点：

相邻的行内元素(或行内块元素)在一行上面，他们之间会存在空白缝隙。
一行可以显示多个
默认宽度就是他们本身的宽度(行内元素特点)
高度，行高，内外边距都可以控制(块级元素的特点)

img其实是行内元素，只是img本身自带width属性，我们把它归类于行内块元素，它属于特殊的行内块元素

input属于纯行内块元素

拓展：

浏览器会把行内元素和行内块元素识别成文字

text-align：center；可作用于行内元素和行内块元素上

margin：0 auto；可作用于块级元素上

垂直排列的块级元素，添加相对方向的外边距，优先执行较大的，忽略较小的。

元素显示模式的相互转换(`重点`)

例：把<a>转换成块级元素，这样就可以设置 a 的宽高，增加 a 的点击范围

转换为块级元素 display:block
转换为行内元素 display:inline
转换为行内块元素 display:inline-block

  练习：

 <style>
    a {
      width: 230px;
      height: 40px;
      background-color: #55585a;
      display: block;
      font-size: 14px;
      color: white;
      text-decoration: none;
      padding-left: 20px;
      line-height: 40px
    }

    a:hover {
      background-color: #ff6700;
    }
  </style>
</head>

<body>
  <a href="#">这是一个a标签</a>
  <a href="#">这是一个a标签</a>
  <a href="#">这是一个a标签</a>
  <a href="#">这是一个a标签</a>
  <a href="#">这是一个a标签</a>
  <a href="#">这是一个a标签</a>

</body>