盒子模型导读

深入理解CSS盒子模型
最新推荐文章于 2025-11-26 15:59:01 发布
原创 最新推荐文章于 2025-11-26 15:59:01 发布 · 953 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #html

目标

能够准确阐述盒子模型的4个组成部分

能够利用边框复合写法给元素添加边框

能够计算盒子的实际大小

能够利用盒子模型布局模块案例

能够给盒子设置圆角边框

能够给盒子添加阴影

能够给文字添加阴影

盒子模型

1.1看透网页布局的本质

网页布局过程：

1.先准备好相关的网页元素，网页元素基本都是盒子Box

2.利用CSS设置好盒子样式，然后摆放到相应位置

3.往盒子里面装内容

网页布局的核心本质，就是利用CSS摆盒子。

1.2盒子模型组成

所谓盒子模型，就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是盛装内容的容器。

CSS盒子模型本质是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容。

1.3 边框（border）

border可以设置元素的边框。边框有三部分组成：边框宽度（粗细）边框样式 边框颜色

语法：

border:border-width||border-style||border-color

属性作用
border-width定义边框粗细，单位是px
border-style边框样式 solide实线、dotted点线、dashed虚线线框
border-color边框颜色

CSS 边框属性允许你指定一个元素边框的样式和颜色。

边框描写：

border:1px,solid red;没有顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* width: 300px;
            height: 200px;
            border-width: 5px;
            border-style: solid; */
            /* border-style: dotted;点线 */
            /* border-style: dashed;虚线边框 */
            /* border-color: pink; */
            width: 300px;
            height: 200px;;
            border: 1px,solid,pink;
            
            
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

border-top:1px solid red;/*只设定上边框，其余同理*/

请给一个200*200的盒子，设置上边框为红色，其余边框为蓝色，提示：一定注意边框的层叠性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* width: 300px;
            height: 200px;
            border-width: 5px;
            border-style: solid; */
            /* border-style: dotted;点线 */
            /* border-style: dashed;虚线边框 */
            /* border-color: pink; */
            /* width: 300px;
            height: 200px;;
            border: 1px,solid,pink; */
            width: 200px;
            height: 200px;
            border: 1px solid blue;
            border-top:1px solid red;

            
            
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

 1.4 表格的细线边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今日小说排行榜</title>
    <style>
        table {
            width: 500px;
            height: 249px;

        }
        table,
        td,th {
            border: 1px solid pink;
            border-collapse: collapse;
            font-size: 14px;
            text-align: center;
        }
    </style>
</head>

<body>
    <table align="center" cellspacing="0">
        <thead>
<tr>
    <th>排名</th>
    <th>关键词</th>
    <th>趋势</th>
    <th>进入搜索</th>
    <th>最近七日</th>
    <th>相关链接</th>
</tr>
        </thead>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>上升</td>
            <td>456</td>
            <td>123</td>
            <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百度</a></td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>上升</td>
            <td>456</td>
            <td>123</td>
            <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百度</a></td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>上升</td>
            <td>456</td>
            <td>123</td>
            <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百度</a></td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>上升</td>
            <td>456</td>
            <td>123</td>
            <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百度</a></td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>上升</td>
            <td>456</td>
            <td>123</td>
            <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百度</a></td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>上升</td>
            <td>456</td>
            <td>123</td>
            <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百度</a></td>
        </tr>

    </table>
</body>
</html>

border-collapse：合并单元格

1.5 边框会影响盒子的实际大小

边框会额外增加盒子的实际大小，因此，我们7欧两种方案解决：

1.测量盒子大小的时候，不量边框

2.如果测量的时候包含了边框，则需要width/height减去边框宽度。

1.6 内边距

padding 属于用于设置内边距，即边框与内容之间的距离。

属性作用
padding-left左行内距
padding-right右行内距
padding-top上内边距
padding-bottom下内边距

padding属性（简写属性）可以有一到四个值。

值的个数表达意思
padding:5px;1个值，代表上下左右都有5像素内边距
padding:5px 10px2个值，代表上下内边距5px，左右内边距是10px
padding：5px 10px 20px3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素
padding:5px 10px 20px 30px4个值，上5 右10 下20 左30 顺时针
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        /* padding: 5px; */
        /* 内边距复合写法（简写） */
        /* padding: 5px 10px; */
        /* padding: 5px 10px 20px; */
        padding: 5px 10px 20px 30px;

    }
    </style>
</head>
<body>
    <div>
        盒子内容是content盒子内容是content盒子内容是content盒子内容是content
    </div>
</body>
</html>

当我们给盒子指定padding值后，发生了2件事情：

1.内容和边框有了距离，添加了内边距。

2.padding影响了盒子实际大小。

也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

解决方案：

如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。

综合案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新浪导航</title>
    <style>
        .nav{
           
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            height: 41px;
          
        
        }
        .nav a{
                display: inline-block;
                line-height: 41px;
                padding: 0 20px;
                font-size: 12px;
                color: #4c4c4c;
                text-decoration: none;

        }
        a:hover {
            background-color: #eee;
        color: orange;
        
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
        <a href="#">三个字</a>
    </div>
</body>
</html>

小米侧边栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .nav{
            
            width: 200px;
            height: 40px;
            font-size: 14px;
        }
        .nav a{
            display: block;
              background-color: #55585a;
              color: #fff;
            text-decoration: none;
              line-height: 40px;
                   padding-left: 30px;

        }
        a:hover {
            background-color: #ff6700;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">手机 电话卡</a>
        <a href="#">电视 盒子</a>
        <a href="#">笔记本 平板</a>
        <a href="#">出行 穿戴</a>
        <a href="#">智能 路由器</a>
        <a href="#">健康 儿童</a>
        <a href="#">耳机 音响</a>
    </div>
</body>
</html>

1.7 外边距（margin）

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。

属性作用
margin-left左外边距
margin-right右外边距
margin-top上外边距
margin-bottom下外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            background-color: pink;
            width: 200px;
            height: 200px;
        }
        .one {
            /* margin-bottom: 20px; */
            margin: 20px 30px 20px 50px;
        }

    </style>
</head>
<body>
    <div class="one">1</div>
    <div class="two">2</div>
</body>
</html>

html5盒子模型作业,HTML5盒子模型。
weixin_34526152的博客
06-05 2278
盒子模型。盒子由 margin、border、padding、content 四部分组成。margin ：外边距border：边框padding：内边距 (内容与边框的距离)content：内容* {margin: 0;padding: 0;}div {/*设置背景颜色*/background-color: blue;/*设置宽高*/width: 250px;height: 250px;/*设置外...
CSS盒子模型（08-34课）
weixin_45727991的博客
11-22 416
08课、盒子模型导读 09、看透网页布局本质 1、页面布局的三大核心：盒子模型、浮动、定位 2、网页布局过程 ①先准备好相关的网页元素，网页元素基本都是盒子box ②利用CSS设置好盒子样式，然后摆到相应位置 ③往盒子里面装内容 3、网页布局的核心本质：就是利用CSS摆盒子 10、盒子模型的组成部分（box model） 1、所谓盒子模型，就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个承装内容的容器 2、CSS盒子模型本质上是一个盒子，封装周围的HTML元素，包括 边框（border）、外边
html中怎么让盒子模型居中,通过box盒子模型给元素内容设置居中
weixin_42395426的博客
06-07 2539
老版本语法div{display: -webkit-box;-webkit-box-align:center; //垂直居中-webkit-box-pack:center;//水平居中}新版本语法div{display: -webkit-flex;-webkit-align-items: center;align-items: center;//垂直居中-webkit-justify-conten...
盒子模型
weixin_64588177的博客
10-12 167
导读“网页布局要学习三大核心，盒子模型、浮动、定位、学号盒子模型非常有助于我们布局页面css本质就是一个盒子，封装周围的HTML元素，它包括：边框，外边距。内边距，和实际内容。
理解padding和margin，等于理解了盒子模型
weixin_42833042的博客
12-10 2380
导读 如果你在找有关盒子模型的理解问题，那么花上几分钟来看看，我会用通俗易懂的方法尽可能地把它讲清楚。 可能很多人觉得，前端的难点大概就在于JavaScript和各种框架了，但是真正被CSS支配过的人会明白，CSS从使用上，难度甚至比JS还高。尤其是布局中对盒子模型的理解，直接影响整体效率。 本文目的 最近在开发中遇到了不少CSS的坑，打算记录一下以免再踩； 希望用最浅显易懂的方法把盒子模型...
网页设计与制作实验四CSS盒子模型应用
Annzz123的博客
06-20 2725
只有通过实验才会发现对知识的具体掌握程度，通过本次实验，又一次复习了a标签的各种css样式，复习了float的用法，div的嵌套和背景图像的一些重要设置属性。
CSS基础（盒子模型案例,边框和阴影,浮动）
qq_45585640的博客
12-20 2239
CSS基础（盒子模型案例,边框和阴影,浮动）
CSS——盒子模型（下）
qq_44621880的博客
05-10 350
CSS——盒子模型（下） 导读 目录 外边距典型应用 外边距合并 相邻块元素垂直外边距的合并 嵌套块元素垂直外边距的塌陷 清除内外边距 外边距典型应用 外边距可以让块级盒子水平居中，但是必须满足两个条件： ①盒子必须指定了宽度 ②盒子左右的外边距都设置为auto .header{ width: 960px; margin: 0 auto; } 常见的写法，以下三种都可以： margin-left: auto; margin-right: auto; margin: a.
CSS基础（CSS三大特性,盒子模型原理,边框 border,内边距 padding,外边距 margin）
qq_45585640的博客
12-20 738
CSS基础（三） 1. CSS三大特性 CSS 三大特性是什么？ 层叠性、继承性、优先级 在开发中什么时候会出现样式层叠？ 对一个元素多次设置同一个样式，会使用最后一次设置的属性值 1.1 层叠性 样式层叠的原则是什么？ 样式冲突，就近原则，后定义，后生效 样式不冲突，无论定义先后，始终有效 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta htt
CSS盒模型完全解析：从原理到实战的布局核心技术
读心悦
05-14 1311
内容区（content）：元素实际内容的显示区域，通过width和height定义内边距（padding）：内容区与边框之间的空白区域，透明但继承背景边框（border）：围绕内容区和内边距的线条，由宽度、样式、颜色组成外边距（margin）：元素与相邻元素之间的间隔，完全透明且不影响背景标准化布局基础：所有视觉效果最终都基于盒模型计算响应式设计基石：box-sizing和百分比单位实现跨设备适配复杂效果实现：边框圆角、阴影、多背景等高级特性的底层支撑。
飞思卡尔展出基于双核i.MX 6的“一体化盒子”
01-19
导读：为不断为交付物联网服务构建安全、开放的基础设施，飞思卡尔半导体日前在2014年飞思卡尔技术论坛中展示了此硬件平台，奠定了“一体化盒子（one box）”理念的基础。 　飞思卡尔携手Oracle和ARM,制定这个计划...
机器学习的挑战：黑盒模型正面临这3个问题
大数据
12-22 3699
导读：本文将讲述可解释机器学习的研究背景，介绍黑盒模型存在的问题和风险，通过一些小故事让读者了解问题的严重性。作者：索信达控股 邵平 杨健颖 苏思达 何悦 苏钰来源：大数据DT（ID：hz...
NLP之GPT-3：NLP领域没有最强，只有更强的模型—GPT-3的简介(本质、核心思想、意义、特点、优缺点、数据集、实际价值，模型强弱体现，开源探讨)、安装、使用方法之详细攻略
热门推荐
头部AI社区如有邀博主AI主题演讲请私信—心比天高，仗剑走天涯，保持热爱，奔赴向梦想！低调，专注，谦虚，自律，反思，成长，还算比较正能量的博主，公益免费传播…内心特别想在AI界做出一些可以推进历史进程影响力的技术(兴趣使然，有点小情怀，也有点使命感呀
08-09 2万+
​ NLP之GPT-3：NLP领域没有最强，只有更强的模型—GPT-3的简介(本质、核心思想、意义、特点、优缺点、数据集、实际价值，模型强弱体现，开源探讨)、安装、使用方法之详细攻略 目录 GPT-3的简介 GPT-3的安装 GPT-3的应用—免费体验API服务 推荐文章 NLP之GPT-3：NLP领域没有最强，只有更强的模型—GPT-3的简介(本质、核心思想、意义、特点、优缺点、数据集、实际价值，模型强弱体现，开源探讨，GPT系列对比与总结)、安装、
Vue开发工具使用技巧
2509_93946471的博客
11-24 311
打开DevTools的"Events"标签页，所有组件间传递的事件都会按时间顺序列出来，连事件负载数据都能展开看详情。更绝的是，你还能手动触发事件——比如在父组件里模拟一个事件，直接测试子组件的响应逻辑，省得反复修改代码来调试。如果组件用了作用域插槽，可以在"Scoped Slots"子面板里实时查看slot传递的数据内容，比在模板里写调试代码清爽得多。路由调试经常被忽略。热重载调试时，如果发现修改代码后页面没及时更新，可以到DevTools的"Settings"里勾选"Log reloads"选项。
TypeScript类型推断
2509_93947330的博客
11-23 332
它让我们在享受静态类型检查好处的同时，减少了类型注解的负担，真正体现了TypeScript的设计哲学——在JavaScript的基础上添加静态类型，而不是改变JavaScript的编程模式。例如在DOM事件监听中，写时，虽然我们没有标注event参数的类型，但TypeScript能根据addEventListener的上下文推断出event是MouseEvent类型。当你定义时，TypeScript会推断name为string类型，age为number类型，而不是特定的字面量类型。
Rust高性能Web后端服务开发与Actix-Web实战分享：零成本抽象、高并发处理与内存安全实践
2501_94181083的博客
11-23 741
数据序列化使用bincode替代 JSON：节省 30% CPU对热点代码进行#[inline]展开Netty 式 Reactor 模型减少线程调度开销批量 DB 提交减少 IO 压力缓存热点业务路径到 Redis最终整个平台达成：单机 QPS：18 万P99 延迟 < 30msCPU 占用在可控范围内资源释放完全可预期，无内存泄漏风险高性能，无 GC 停顿编译期保证内存安全，避免线上事故Actix-Web 性能强劲，适合高并发系统适合对性能和稳定性要求极高的互联网生产环境。
Vue 项目实战《尚医通》，路由鉴权完成，笔记71
Rockandrollman的博客
11-23 140
Vue 项目实战《尚医通》，路由鉴权完成，笔记71
MyBatis + PageHelper 分页内幕，PageHelper 是如何动态构建 LIMIT 分页 SQL 的
最新发布
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
11-26 280
若依系统中有很多的表格数据、后端接口实体中并没有看到有接收分页大小和页码的属性，在系统的mapper层面SQL语句中并没有看到对应的分页限制。它是如何实现这个分页效果的呢？是将所有的数据查询出来，然后再分页吗？这样效率岂不是非常低。带着这样的疑问，稍微研究了一下这个系统的分页方法。更多详细文章后端是通过从 HttpServletRequest 对象中获取分页的页码和大小，然后创建Page分页对象，在执行sql查询的时候，动态构建分页限制条件。从而实现分页，并不是在查询到所有数据之后再进行的分页处理。
一文让你了解UI自动化测试
HUACE4600的博客
11-26 553
这些资料，对于做【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴我走过了最艰难的路程，希望也能帮助到你！凡事要趁早，特别是技术行业，一定要提升技术功底。
深入掌握CSS盒子模型：实战应用解析
CSS盒子模型是CSS布局的基础，它定义了元素框处理元素内容（content）、内边距（padding）、边框（border）和外边距（margin）的方式。通过深入理解CSS盒子模型，可以更好地控制页面布局和元素尺寸，实现响应式和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

靳向阳

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值