2021-07-17 元素的分类~块元素、行内元素、行内块元素

前端畑鹿惊

于 2021-07-17 15:27:08 发布

阅读量158

点赞数 1

分类专栏：笔记文章标签： html css

本文链接：https://blog.csdn.net/m0_46522502/article/details/118856809

版权

笔记专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.元素的分类

①块元素: 可以设置宽高, 独自占一整行
②行内元素: 不可以设置宽高, 不会独自占一整行
③行内块元素: 可以设置宽高, 不会独自占一整行

下面通过实例分辨👇👇👇

<hr>
    <h3>块元素: 可以设置宽高, 独自占一整行</h3>
    <div class="block"></div> 
    <h1 class="block"></h1>
    <p class="block"></p>
    <ul class="block"></ul>
    <ol class="block"></ol>
    <dl class="block"></dl> 
    <li class="block"></li>
    <form action="" class="block"></form>
    <table class="block"></table> 测试

    <hr>

    <h3>行内元素: 不可以设置宽高, 不会独自占一整行</h3>
    <span class="inline">行内</span> *（行内元素span没有上下内外边距，只能设置左右内外边距，但其占用空间（每一行文字的高度）则由 line-height 属性决定）*
    <b class="inline">行内</b>
    <i class="inline">行内</i>
    <s class="inline">行内</s >
    <u class="inline">行内</u > 测试

    <hr>
    
    <h3>行内块元素: 可以设置宽高, 不会独自占一整行</h3>
    <input class="inline-block" type="text">
    <img class="inline-block" src=""> 测试

CSS样式👇👇👇

.block{
    width: 20px;
    height: 20px;
    background-color: indianred;
}

.inline{
    width: 200px;
    height: 200px;
    background-color: lawngreen;
}

.inline-block{
    width: 50px;
    height: 50px;
    background-color: rgb(212, 60, 85);
}

在这里插入图片描述

2.display属性

概念：display 属性可以设置元素的内部和外部显示类型。元素的外部显示类型将决定该元素在流式布局中的表现（块级或内联元素）；元素的内部显示类型可以控制其子元素的布局（例如：grid 或 flex）。
/* 隐藏元素 */
display: none;

/* 把元素转为 块元素 */
display: block;

/* 把元素转为 行内元素 */
display: inline;

/* 把元素转为 行内块元素 */
display: inline-block;

/* 类似于table标签，用表格布局 */
display: table;

/* 09年w3c的布局方案, 弹性布局 */
display: flex;

/* 网格布局 */
display: grid;

3.overflow

概念：CSS属性 overflow 定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么。

.box {
overflow: visible | hidden | scroll | auto | inherit;
}

/* 默认值visible:(不做任何操作) 内容不会被修剪，会呈现在元素框之外 */
overflow: visible;

/* hidden: 溢出的部分会被裁切，使之不可见 */
overflow: hidden;

/* scroll: 溢出部分 浏览器会显示滚动条以便查看其余内容 （不管有无溢出, 都有滚动条） */
overflow: scroll;

/* auto: 由浏览器定夺，如果内容被修剪(溢出)，就会显示滚动条 */
/* overflow: auto; */

看例子👇👇👇

<body>

    <h3>overflow 定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。</h3>

    <div>
        This is my very important paragraph. I am a distinguished gentleman of such renown that my paragraph needs to be styled in a manner befitting my majesty. Bow before my splendour, dear students, and go forth and learn CSS!
    </div>
</body>

当定义overflow: visible;时，不做任何操作。
在这里插入图片描述
当定义overflow: hidden;是，溢出部分会被裁剪并隐藏。

当定义为overflow: scroll;时，溢出部分浏览器会显示滚动条以便查看其余内容（不管有无溢出, 都有滚动条）

当定义为overflow: auto;时，由浏览器定夺，内容哪个部分溢出，对应方向就会显示滚动条。
在这里插入图片描述

前端畑鹿惊

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
2021-07-17 元素的分类~块元素、行内元素、行内块元素

1.元素的分类①块元素: 可以设置宽高, 独自占一整行②行内元素: 不可以设置宽高, 不会独自占一整行③行内块元素: 可以设置宽高, 不会独自占一整行下面通过实例分辨????????????<hr> <h3>块元素: 可以设置宽高, 独自占一整行</h3> <div class="block"></div> <h1 class="block"></h1> <p class="
复制链接

扫一扫