37 元素模式（行内元素，块元素，行内块元素）

最新推荐文章于 2022-11-23 17:10:33 发布

hello_sunny123

最新推荐文章于 2022-11-23 17:10:33 发布

阅读量614

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/hello_sunny123/article/details/118581939

版权

本文详细介绍了CSS中元素的显示模式，包括块元素、行内元素和行内块元素的特点。块元素独占一行，可控制宽高和内外边距；行内元素在同一行显示，宽度受内容限制；行内块元素结合两者特性，允许设置间距和尺寸。了解这些模式有助于优化网页布局。

摘要由CSDN通过智能技术生成

CSS的元素显示模式

了解元素的显示模式可以更好的让我们布局页面.

1.什么是元素的显示模式

作用:网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。

元素显示模式就是元素(标签)以什么方式进行显示,比如`<div>`自己占一行,比如一行可以放多个`<span>`.

`HTML`元素一般分为块元素和行内元素两种类型。

2.元素显示模式的分类

一.块元素

常见的块元素有`<hl>~<h6>、<p>、<div>、<ul>, <ol>、<li>`等,其中 `<div>` 标签是最典型的块元素。

块级元素的特点：

(1)比较霸道,自己独占一行。

(2)高度,宽度、外边距以及内边距都可以控制。

(3)宽度默认是容器(父级宽度)的100%

(4)是一个容器及盒子,里面可以放行内或者块级元素。

注意：

文字类的元素内不能使用块级元素

`<p>`标签主要用于存放文字,因此`<p>`里面不能放块级元素,特别是不能放`<div>`

同理, `<hl>~<h6>`等都是文字类块级标签,里面也不能放其他块级元素

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块级元素</title>
    <style>
        div {
     
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </