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

时间：2022-12-26 20:02:57


文章目录

  • ​​一. CSS的元素显示模式​​
  • ​​二. HTML的区块元素和内联元素​​
  • ​​1. 块元素​​
  • ​​2. 行内元素​​
  • ​​3. 行内块元素​​
  • ​​4. 元素显示模式转换​​
  • ​​三. <div>元素​​
  • ​​四. <span>元素​​
  • ​​五. 简洁版小米侧边栏​​

一. CSS的元素显示模式

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

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

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

1. 块元素

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

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

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

2. 行内元素

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

实例: <b>, <td>, <a>, <img>
  • div标签 默认独占一行
  • span标签 它的长度是封装数据的长度
  • p段落标签 默认会在段落的上方或下方各空出一行来（如果已有就不再空）

3. 行内块元素

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

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

4. 元素显示模式转换

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

  • 比如想要增加链接 < a > 的触发范围

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

<!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>

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

三. <div>元素

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

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

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

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

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

<!DOCTYPE html>
<html>

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

<body>

    <div  style="width:500px">

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

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

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

        </div>

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

    </div>

</body>

</html>

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

四. <span>元素

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

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

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

五. 简洁版小米侧边栏

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

<!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>

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




标签：

相关文章