html 块元素、内联元素、内联块元素

最新推荐文章于 2022-08-22 16:58:31 发布
最新推荐文章于 2022-08-22 16:58:31 发布
阅读量193 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guoqingru0311/article/details/118607383
版权

块元素、内联元素、内联块元素

在这里插入图片描述

2、块元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块元素</title>
    <style type="text/css">
        .box1{
            width: 500px;
            height: 300px;
            margin: 50px auto 0;
            border: 1px solid gold;
        }

        .box1 div{
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: pink;
        }

        .box2{
            font-size: 0px;
            width: 600px;
            height: 300px;
            margin: 50px auto 0;
            border: black 1px solid;
                  /*解决内联元素间隙的方法
                                  将内联元素的父级设置font-size为0，内联元素自身再设置font-size*/
        }

        .box2 a{
            /*text-decoration: none;  */
            background-color: #5bc0de;
            /*width: 300px;*/
            /*height: 300px;*/
            /*margin: 0 20px;*/
            /*margin: 100px 10px;     !*margin上下没有作用*!*/
            padding: 0 10px;
            /*padding: 0 30px;        !*padding上下也不支持*!*/
            font-size: 16px;        /*解决内联元素间隙的方法
                                  将内联元素的父级设置font-size为0，内联元素自身再设置font-size*/
        }

        .box3{
            width: 300px;
            height: 300px;
            margin: 20px auto 0;
            border: 1px black solid;
            text-align: center; /*子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式*/
        }
    </style>
</head>
<body>
    <div class="box1">
        <div></div>
        <div></div>
    </div>

    <div class="box2">
        <a href="#">连接文字一</a>
        <a href="#">连接文字二</a>
        <a href="#">连接文字三</a>
        <a href="#">连接文字二</a>
        <a href="#">连接文字三</a>
    </div>

    <div class="box3">
        <a href="#">连接文字</a>
    </div>

</body>
</html>

显示效果如下所示：
在这里插入图片描述

2、内联块元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将内联元素转化为内联块元素</title>
    <style type="text/css">
        .box0{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 30px auto;
            font-size: 0px;     /*去除掉内联块间隙*/
        }

        .box0 a{
            width: 50px;
            height: 50px;
            background-color: pink;
            padding: 0 5px;
            font-size: 16px;        /*去除掉内联块间隙*/
            display: inline-block;  /*转化为内联块元素*/
            text-align: center;
            line-height: 48px;
        }
    </style>
</head>
<body>
    <div class="box0">
        <a href="#">连接1</a>
        <a href="#">连接2</a>
        <a href="#">连接3</a>
        <a href="#">连接4</a>
        <a href="#">连接5</a>

    </div>

</body>
</html>

在这里插入图片描述

3、元素类型转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素类型转换</title>
    <style type="text/css">
        .menu{
            width: 694px;
            height: 50px;
            /*background-color: #5bc0de;*/
            margin: 50px auto;
            font-size: 0px;     /*去除掉间隙*/
        }
        .menu a{
            width: 97px;
            height: 48px;
            background-color: pink;
            /*将内联元素转化为内联块元素*/
            display: inline-block;
            border: 1px solid goldenrod;

            font-size: 16px;    /*去除掉间隙*/

            margin-left: -1px;  /*实现合并*/
            text-align: center; /*水平居中*/
            line-height: 48px;   /*垂直居中*/
            text-decoration: none;  /*去除下划线操作*/
            color: magenta;
            font-family: "Microsoft YaHei";  /*设置字体样式*/
        }

        .menu a:hover{
			background-color:gold;
			color:#fff;
		}

    </style>
</head>
<body>
    <div class="menu">
        <a href="#">首页</a>
        <a href="#">公司简介</a>
        <a href="#">公司简介</a>
        <a href="#">公司简介</a>
        <a href="#">公司简介</a>
        <a href="#">公司简介</a>
        <a href="#">公司简介</a>
    </div>

</body>
</html>

显示效果如下所示：
在这里插入图片描述
示例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素类型转换_display属性</title>
    <style type="text/css">
        body{
            font-size: 0px;
        }
        .box{
            width: 200px;
            height: 200px;
            font-size: 16px;
            background-color: #5bc0de;
            /*display: inline;    !*转为内联元素，不支持宽高*!*/
            display: inline-block;  /*转为内联块元素*/
        }
    </style>
</head>
<body>
    <div class="box">div元素</div>
    <div class="box">div元素</div>
</body>
</html>

演示效果入校所示：
在这里插入图片描述

4、display属性演示（悬停文字效果）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display属性</title>
    <style type="text/css">
        .box{
            width: 200px;
        }

        .box .box2{
            width: 200px;
            height: 200px;
            background-color: #5bc0de;
            display: none;      /*此div默认是隐藏*/
        }

        .box:hover .box2{
            display: block;     /*进行显示块*/
        }

    </style>
</head>
<body>
    <div class="box">
        <h3>悬停文字效果</h3>
        <div class="box2">说明文字</div>
    </div>
</body>
</html>

演示效果如下所示：
在这里插入图片描述

练习：使用列表制作菜单

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用列表制作表单</title>
    <style type="text/css">
        .menu{
            width: 694px;
            height: 50px;
            /*background-color: #5bc0de;*/
            /*去除掉小圆点的操作*/
            list-style: none;
            margin: 50px auto 0;
            padding: 0;
            font-size: 0;
            text-align: center;     /*使其内联块居中显示*/
        }
        .menu li{
            width: 97px;
            height: 48px;
            display: inline-block;
            border: 1px solid black;
            margin-left: -2px;
            font-size: 16px;
            line-height: 48px;
            font-family: "Microsoft YaHei UI";
        }
        .menu li a{
            width: 97px;
            height: 48px;
            text-decoration: none;
            display: block;
            color: pink;
        }
        .menu li :hover{
            background-color: goldenrod;
            color: white;
        }
        .menu li a:hover{
            color: white;
        }

    </style>

</head>
<body>
<!--    ul.menu>(li>a{#})*7-->
    <ul class="menu">
        <li><a href="#">公司简介</a></li>
        <li><a href="#">公司简介</a></li>
        <li><a href="#">公司简介</a></li>
        <li><a href="#">公司简介</a></li>
        <li><a href="#">公司简介</a></li>
        <li><a href="#">公司简介</a></li>
        <li><a href="#">公司简介</a></li>
    </ul>
</body>
</html>

在这里插入图片描述

郭庆汝
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html 内联元素和html 块级元素概述及区别
12-13
内联元素(inline)特性： •和相邻的内联元素在同一行; •宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或...
html 元素的内联块元素,html内联元素和块级元素的基本概念及使用示例
weixin_30824361的博客
06-05 157
html标签分为两种，内联元素和块级元素，首先我们先了解一下内联元素和块级元素的概念：块级元素：一般是其它元素的容器，可容纳内联元素和其它块级元素，块级元素排斥其它元素与其位于同一行，可设置宽度(width)高度(height)属性，正常流中的块级元素会垂直摆放。常见块状元素为“div”内联元素(行内元素)：内联元素只能容纳文本或者其他内联元素，是块级元素的后代，它允许其他内联元素与其位于同一行，...
块元素和内联元素的特点
小小的博客
08-25 729
块元素和内联元素                          div就是一个块元素，                 所谓的块元素就是会独占一行的的元素,无论他的内容有多少(就是与宽度无关),他都会独占一整行。                 p h1 h2 h3 ... 都是块元素                 div这个标签没有任何语义，就是一个纯粹的块元素，             ...
浅谈HTML中的块级元素和内联元素
weixin_30418341的博客
11-05 96
一、基本概念 1、块级元素(block element)：一般都从新行开始占据一定的矩形空间，可以设置其宽、高属性来改变矩形的大小。一般情况下块级元素可以包含内联元素和其它块级元素，但也有特殊如form只能包含其它块级元素，p只能包含内联元素。常见块级元素如div、p、form等。 2、内联元素(inline element)：也叫内嵌元素、行内元素、直进式元素。一般都是基于语义级(sem...
HTML学习之路-08块元素、内联元素、内联块元素
weixin_63204687的博客
08-22 342
学习了块元素、内联元素、内联块元素以及使用display属性进行元素之间的转换
HTML——01：内联元素和块元素
qq_39964240的博客
12-21 3155
块元素：&lt;h1&gt;、&lt;p&gt;、&lt;ul&gt;，显示时会独立成行。 内联元素：&lt;b&gt;、&lt;a&gt;、&lt;img&gt;，显示时不会独立成行。 &lt;div&gt;元素：块元素，组合其它HTML的容器。它可以来修饰在容器自身内的元素。通常可以使用css修饰。 例子： &lt;!DOCTYPE html PUBLIC "-//
块级元素和内联元素及可变元素汇总
01-19
块元素(block element) 　p – 段落 　pre – 格式化文本 　table – 表格 　ol – 排序表单 　ul – 非排序列表 　address – 地址 　blockquote – 块引用 　center – 居中对齐块 　div – 常用块级 　...
浅谈CSS块级元素与行内元素(内联元素)的区别和联系
12-13
在css盒子模型中，我们提到了html元素中的块元素（block element）和内联元素（inline element）。那么它们究竟是什么呢？ 其实，这两种元素都是html规范中的概念。块元素(block element)一般是其他元素的容器元素...
什么是块元素block和内联元素inline
11-22
什么是块元素block和内联元素inline，什么是块元素block和内联元素inline。。。
html中的块元素和内联元素
weixin_46683645的博客
08-13 263
html中的块元素和内联元素 我们先来了解一下块元素和内联元素的概念 块元素:独占一行的元素，无论它的内容有多少，它都会独占一整行。 例如:p,h1,h2,h3…div等标签都是一个块元素 div标签没有任何语义，就是一个单纯的块元素，并且不会为它里面的元素设置任何的默认样式，它的作用主要是用来给页面布局的 内联元素：指的是只占自身大小的元素，不会占用一行，所以也称为行内元素。 例如：a,img,iframe,span等标签都是一个内联元素 span标签没有任何的语义，span标签专门用来选中文字，然
html中内联元素是什么意思,HTML中内联元素指的是什么
weixin_42302872的博客
06-05 1218
HTML中内联元素指的是什么发布时间：2020-12-17 09:38:32来源：亿速云阅读：74作者：小新这篇文章主要介绍了HTML中内联元素指的是什么，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。在HTML中，内联元素是指display属性为inline的元素；内联元素也叫行内元素，在网页中总是随着文字流出现在“行内”，这些元素不会...
Html/Css内联块元素
学渣罗小贱9*w4YBsXS@3W
11-21 239
最近几天复习html/css，内联块的效果图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>内联块元素</title> <style type="text/css"> .menu{ width: 694px; height: 50px;
Html 中的块级元素和行内元素（内联元素）
qq524752841的专栏
07-12 1771
先从字面意思找，块级元素可以看做讲台，自己独占一排，常见标签：, , , ；行内元素（内联元素）可以看做学生的课桌，可以多个占用一排，常见标签：, , , ；
html内联元素与块元素
许俊彬
05-24 557
一.行内元素和块级元素有哪些？ 块级元素 information on author long quotation push button table caption definition description deleted text generic language/style conta
HTML全标签分类块级内联内联块
front_endxiaobaia的博客
03-29 247
- -注释： 标签分类查询文档，不涉及如何使用 部分标签由于非常不兼容主流浏览器未注明 标签参照W3C 数据采集使用Firefox 74.0(64位)版本 1.块级元素-- block ···特点： ······独占一行； ······不设置宽度时与父容器相同； ······支持所有样式； 具体： html div p body form ul ...
HTML内联变成块级元素,HTML 块级、内联、内联块级元素（转）
weixin_34438187的博客
06-05 257
【常用的块级元素】div，form，p，table，h1~h6，hr，dl，ol，ul，pre等【常用的内联元素】a，img，input，span，br，select，strong，em，textarea，label等【概念】块级：block内联：inline内联块级：inline-block【特征】1.块级元素独占一行。可设置width，height，margin，padding。内部可包含块级...
前端HTML——三大元素之块元素 内联块元素 和内联元素
m0_48930261的博客
08-16 699
块元素 div就是一个块元素， 所谓的块元素就是会独占一行的元素，无论它的内容有多少 都会独占一行 p h1 h2…都是块元素 div这个标签没有任何语义，就是一个纯粹的块元素 并且不会为它里面的元素设置任何的默认样式 块元素主要用来对页面进行布局 内联元素 span就是一个内联元素（行内元素） 所谓的行内元素，指的是只占自身大小的元素，不会占用一行 常见的内联元素： a img iframe span span没有任何的语义，专门用来选中文字，然后为文字设置样式 内联元素主要用来用来选中文字，然
HTML内联（行内）元素、块元素（块级元素）、内联块（行内块）元素区别
HaleyTiger的博客
01-31 850
零、html元素分类 在CSS中，html中的标签元素大体被分为三种不同的类型： （1）内联元素（行内元素）； （2）块元素（块级元素）； （3）内联块元素（行内块元素）。 一、内联元素（行内元素）——普通内联元素 特点： 1、多个行内元素可以同时处于同一行上； 2、元素的高度、宽度不可设置； 3、元素的宽度就是它包含的文字或图片（一般a标签里面可以包图片）的宽度，不可改...
HTML中的块元素、内联元素和内联快元素
qq_43654065的博客
09-04 728
页面布局中常用的三种标签：块元素、内联元素、内联块元素。 1. 块元素（行元素） 常见块元素：div、ul、li、dl、dt、dd、p、h1-h6 特点： 支持全部的样式； 若没有设置宽度，默认的宽度为父级的100%； 盒子占据一行，即使设置了宽度。 2.内联元素（行内元素） 常见的内联元素：a、span、lable、button、textarea、b、strong、select、em 特点： 不支持宽、高、margin上下、padding上下； 宽、高由内容决定； 盒子并在一行； 代码换行，盒子之间
块元素和内联元素区别
最新发布
03-10
块元素和内联元素是HTML中常用的两种元素类型，它们在布局和显示上有一些区别。 1. 块元素： - 块元素以新行开始，占据整个可用的宽度，默认情况下会自动换行。 - 块元素可以设置宽度、高度、内外边距等属性。 -...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值