盒子模型简单理解

最新推荐文章于 2024-05-26 14:33:41 发布

罗彬桦

最新推荐文章于 2024-05-26 14:33:41 发布

阅读量1.8k

点赞数

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

本文链接：https://blog.csdn.net/weixin_45647118/article/details/112855265

版权

前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

盒子模型

盒子模型的概念

盒子模型：用这种思想来 “盛放” 网页中的各种元素。
在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套）。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小、线型和颜色之分，外面又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其他盒子要保留多大距离。

在这里插入图片描述
在css中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边框不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

假设框的每个边上有10个像素的外边框和5个像素的内边距。如果希望这个元素框在页面内只占100个像素，就需要将内容的宽度设置为 70 像素，请看下图：
在这里插入图片描述

.box1 {
   // 高度宽度
   width:100px;
   height:120px;
   
   // 边框
   border:1px solid #F00;
   
   // 外边距
   margin-bottom:10px;
   
   // 内边距
   padding-left:10px;
}

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link href="box.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="box1">这是盒子1的内容</div>
</body>

罗彬桦

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
盒子模型简单理解

盒子模型盒子模型的概念盒子模型：用这种思想来 “盛放” 网页中的各种元素。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套）。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小、线型和颜色之分，外面又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其他盒子要保留多大距离。在css中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边框不会影响内容区域的尺寸，但是会增加元素框的总尺寸。假设框的每
复制链接

扫一扫