HTML/CSS盒子模型

冰逸.itbignyi2023-08-29 10:47

盒子：页面中的所有的元素（标签），都可以看做一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更加方便的进行页面布局

盒子模型的组成：

内容区域（content）、内边距区域（padding）、边框区域（border）、外边框区域（margin）

布局标签：实际开发网页中，会大量频繁的使用div和span这两个没有语义的布局标签

标签：<div><span>

特点：

div标签：

一行只显示一个

宽度默认式父元素的宽度，高度默认由内容撑开

可以设置宽高
soan标签：

一行可以显示多个

苦读和高度默认由内容撑开

不可以设置宽高

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>焦点访谈：中国底气</title>
    <style>
        h1{
            color: blue;
           
        }
       #time{
            color: rgb(240, 11, 53);
       }
       #sb{
            width: 100px;
       }
       a{
            color: black;
            text-decoration: none;
            width: 55px;
       }
       #center{
                width: 65%;
                margin: 0 auto;
       }
    </style>
</head>
<body>
   <div id="center">
    <img src="https://pic2.zhimg.com/80/v2-597a23f8427f41a41dfd2f5b8474d09d_1440w.webp"width="300px"><a href="https://blog.csdn.net/jbykmzls"><span id="sb" >冰逸</span></a> 
    <h1>焦点访谈：中国底气</h1>
    <hr>
    <span id="time">2023.8.25</span>
    <hr>
    <p>一个非常好用的高清壁纸网站，里面的壁纸质量高而且数量丰富，不管你喜欢什么样的壁纸都能满足你。
        首页还给除了很多热门标签，想要动漫壁纸的话，直接点一下标签就能快速查看。</p>
    <img src="https://pic4.zhimg.com/80/v2-118cdd0b9ead23ba24d3f48b0fd945ef_1440w.webp"width="500">
    </div> 
</body>
</html>