CSS 的块级元素和行内元素

柔情只为你懂 2024-05-06 21:24 70阅读 0赞

![previewfile\_1658340036][previewfile_1658340036]

## CSS 的块级元素和行内元素 ##

> 常见的块级元素：`h1 - h6`，`p`，`div`， `ul`， `ol`， `li`等  
> 常见的行内元素：`a`，`strong`，`b`，`em`，`i`，`span`等

### 块级元素的特点 ###

*  独占一行
 *  高度, 宽度, 内外边距, 行高都可以控制.
 *  宽度默认是和父元素一样宽
 *  是一个容器(盒子), 里面可以放行内和块级元素

注：文字类的元素内不能使用块级元素，例子`p`标签主要用于存放文字, 内部不能放块级元素, 比如`div`标签

### 行内元素的特点 ###

*  不独占一行，一行可以显示多个
 *  无法设置高度，宽度，行高
 *  左右外边距有效(上下无效)，内边距有效
 *  默认宽度就是本身的内容
 *  行内元素通常只能容纳文本和其他行内元素，不能放块级元素

注：a 标签中不能再放 a 标签；a标签是行内元素，但是可以放块级元素，不过更建议先把 a 转换成块级元素

### 行内元素和块级元素的区别 ###

1.  块级元素独占一行，行内元素不独占一行
2.  块级元素可以设置宽高，行内元素不能设置宽高
3.  块级元素四个方向都能设置内外边距，行内元素垂直方向不能设置

### 行内元素和块级元素的相互转化 ###

使用`display`属性进行修改，可以把`div`等块级元素变成行内元素，也可以把 `a` ,`span`等变成块级元素

> `display: block;` 将行内元素改成块级元素(常用)  
> `display: inline;` 将块级元素改成行内元素(几乎不用)  
> `display: inline-block;` 将选中元素改成行内块元素

**示例代码**

> 将`a`标签行内元素改成块级元素

![image-20240225135656111][]

**运行效果**  
更改前效果：  
![image-20240225135831995][]

更改后效果：  
![image-20240225135914232][]

> `margin: auto;`块级元素水平居中  
> `text-align: center;` 是让行内元素或者行内块元素居中的

去除浏览器默认样式，保证代码在不同的浏览器上都能按照统一的样式显示

* {
        
        marign: 0;
        padding: 0;
    }

[previewfile_1658340036]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/4c8bd7684bbf4b5197cecdfbe82e79e4.jpeg
[image-20240225135656111]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/e5d7f10d50b74c5ca8dd11ab62717bf7.png
[image-20240225135831995]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/81d44a030e20407495a6fb8a18d4a4fc.png
[image-20240225135914232]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/e53dff2620a94d23879caba801bcde9b.png