css的block、inline和inline-block

最新推荐文章于 2023-04-23 21:33:41 发布

原创最新推荐文章于 2023-04-23 21:33:41 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #html

CSS 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了CSS中的三种布局模式：block、inline和inline-block。block元素独占一行，常用于结构元素；inline元素保持在同一行，适用于文本和链接；而inline-block结合两者特性，适用于需要调整尺寸的行内元素。转换方式包括float、position和display属性的设置。了解这些概念有助于优化网页布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css的block、inline和inline-block

block：块级元素

一个块级元素独占一行，即使设置了width，仍然独占一行。
默认情况下block元素宽度自动填满父元素宽度。
可以设置width、height、margin、padding属性。

常见块级元素：

<header>、<aside,>、<video>、<audio>、<footer>、<h1~6>、<p>、<div>、<form>、<table>、<ul>、<ol>、<li>、<dl>、<hr>等

inline：行内元素

和其他元素都在同一行。
水平方向的margin、padding属性可以设置。
元素的width、height，垂直方向的margin、padding不可设置。
元素的宽度就是它包含的文字或图片的宽度，不可改变。

常见行内元素：

<a>、<b>、<strong>、<span>、<label>、<button>、<img>、<input>、<select>、<textarea>

其中img、input是行内块元素

inline-block：行内块元素

简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现，使其既具有block的宽高特性又具有inline的同行特性。

和其他元素都在一行上。
可以设置width、height、margin、padding属性。
常见行内块元素
```
<img>、<input>
```

行内元素与块级元素之间的转换

1、float

当把行内元素设置float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动属性

2、position

position:absolute、position:fixed都会使原先的行内元素变为块级元素

3、display

块级元素->行内：display:inline;

行内元素->块级：display:block;

转换为行内块标签：display:inline-block;