HTML/CSS盒子模型

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

盒子模型的组成:

内容区域(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>
相关推荐
RadiumAg12 分钟前
记一道有趣的面试题
前端·javascript
yangzhi_emo17 分钟前
ES6笔记2
开发语言·前端·javascript
yanlele33 分钟前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子2 小时前
React状态管理最佳实践
前端
烛阴2 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子2 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...2 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
天天扭码3 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html
xw53 小时前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !3 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app