Web前端——HTML中的区块布局

巧克力code

已于 2022-02-12 14:47:20 修改

阅读量6.3k

点赞数 4

分类专栏： Web前端文章标签： html

于 2020-09-29 11:46:56 首次发布

本文链接：https://blog.csdn.net/qq_44853882/article/details/108865469

版权

Web前端专栏收录该内容

15 篇文章 5 订阅

订阅专栏

文章目录

一. CSS的元素显示模式
二. HTML的区块元素和内联元素
三. <div>元素
四. <span>元素
五. 简洁版小米侧边栏

一. CSS的元素显示模式

在这里插入图片描述

二. HTML的区块元素和内联元素

大多数 HTML 元素被定义为块级元素或内联元素。

1. 块元素

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例: <h1>, <p>, <ul>, <table>

在这里插入图片描述

2. 行内元素

内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>

div标签默认独占一行
span标签它的长度是封装数据的长度
p段落标签默认会在段落的上方或下方各空出一行来（如果已有就不再空）

3. 行内块元素

在这里插入图片描述

4. 元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解: 一个模式的元素需要另外一种模式的特性

比如想要增加链接 < 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>
    <style>
        a {
            width: 150px;
            height: 50px;
            background-color: pink;
            /* 把行内元素a，转换为块级元素 */
            display: block;
        }

        div {
            width: 300px;
            height: 100px;
            background-color: red;
            display: inline;
        }

        span {
            width: 300px;
            height: 30px;
            background-color: skyblue;
            display: inline-block;
        }
    </style>
</head>

<body>
    <a href="#">pink老师</a>
    <a href="#">pink老师</a>
    <div>我是块元素</div>
    <div>我是块元素</div>
    <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>
</body>

</html>

在这里插入图片描述

三. <div>元素

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。

div 元素是用于分组 HTML 元素的块级元素。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>格式布局</title>
</head>

<body>

    <div id="container" style="width:500px">

        <div id="header" style="background-color:#FFA500;">
            <h1 style="margin-bottom:0;">主要的网页标题</h1>
        </div>

        <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
            <b>菜单</b><br>
            HTML<br>
            CSS<br>
            JavaScript
        </div>

        <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
              
        </div>

        <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
            版权 © runoob.
        </div>

    </div>

</body>

</html>

在这里插入图片描述

四. <span>元素

HTML <span> 元素是内联元素，可用作文本的容器

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span>元素可用于为部分文本设置样式属性。

五. 简洁版小米侧边栏

在这里插入图片描述

<!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>
    <style>
        a {
            display: block;
            width: 230px;
            height: 40px;
            background-color: #55585a;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
            line-height: 40px; 
        }

        /* 鼠标经过链接变化背景颜色 */
        a:hover{
            background-color: #ff6700;
        }

    </style>
</head>
<body>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
</body>
</html>

在这里插入图片描述

巧克力code

关注

4
点赞
踩
33

收藏

觉得还不错? 一键收藏
0
评论
Web前端——HTML中的区块布局

一. HTML的区块元素和内联元素大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。实例: <h1>, <p>, <ul>, <table>内联元素在显示时通常不会以新行开始。实例: <b>, <td>, <a>, <img>二. <div>元素HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容
复制链接

扫一扫