#HTML的块元素和行内元素#

最新推荐文章于 2023-12-08 09:49:08 发布

房东的_猪

最新推荐文章于 2023-12-08 09:49:08 发布

阅读量158

点赞数

文章标签：前端 html html5

本文链接：https://blog.csdn.net/Abner_/article/details/125673582

版权

一、块元素和行内元素

1、块元素(block element)

经典的块元素标签有<p></p>、<div></div>、<h1></h1>

块元素特点：

①一般是用来布局的;

②会独占一行，自上向下排列；

③块元素的宽度默认是父元素的百分百;

④块元素的高度默认是被内容撑开的;

代码示例：

<!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>Document</title>
</head>

<body>
    <h1>凡日月所照</h1>
    <div>江河所至</div>
    <p>皆为汉土</p>
</body>

</html>

如下图1所示:

图1

2、行内元素(inline element)

经典的标签元素有 <em> <strong> <s>

行内元素特点：

①一般用来包裹文字;

②不可以独占一行,自左向右排列，满了就向下，再自左向右排序；

③行内元素宽高都是被内容昂撑开的，不可以自定义宽度;

3、行内块元素(Inline block element)

常用行内块元素：img

兼具块元素、行内元素的特点

①又不会独占一行，又可以设置宽高；

display 实现不同元素的相互转换

可选值：

none block inline inline-block

(注意：

①块元素里面什么都能放，可放块元素、行内元素、行内块元素；

②行内元素里不能放块元素；

③p标签是一个特殊的块元素，里面不能放块元素；

④特殊的行内元素 a标签，什么都能放，除了它自己；

)

二、结构布局标签

<!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>Document</title>
</head>

<body>

    <!--html5新的结构布局-->
    <header></header>
    <!--表示头部-->

    <main>
        <nav></nav>导航
        <aside></aside>和主题相关的内容，侧边栏
        <article></article>
        <!--文章相关的内容-->
    </main>
    <!--表示主体-->
    <footer></footer>
    <!--表示底部-->
    <section></section>  上面的标签都不合适的时候就用这个，独立的区块



    <!--html以前的旧结构布局-->
    <div></div>
    <div></div>
    <div></div>

</body>

</html>

如下图2所示: