盒模型

2021-11-13 21:02:55 阅读：122 来源： 互联网

css盒子模型指“box model”，其本质上是一个盒子，封装周围的HTML元素，它包括边距、边框、填充和实际内容；所有HTML元素可以看作盒子，并且盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模式都具备这些属性。

"box model"这一术语是用来设计和布局时使用。

这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

原理

盒模型的属性:内容(content)、内边距(padding)、边框(border)、外边距(margin)。

这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。

特点

想象一个盒子，它有：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性；

让我们俯视这个盒子，它有上下左右四条边，所以每个属性除了内容（content），都包括四个部分：上下左右；这四部分可同时设置，也可分别设置；内边距可以理解为盒子里装的东西和边框的距离，而边框有厚薄和颜色之分，内容就是盒子中间装的东西，外边距就是边框外面自动留出的一段空白。

结构

内容（CONTENT）就是盒子里装的东西；

而填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；

边框(BORDER)就是盒子本身了；至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。

填充只有宽度属性，每个HTML标记都可看作一个盒子。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        #div1{width: 500px;height: 500px;background: lightblue;overflow: hidden;/*border-top-width: 5px;border-top-color: red;border-top-style: solid*/;
            border: 5px solid red;
            /*solid实线
            double双实线
            dotted点实线
            dashed线段虚线*/
            border-radius: 50%;}
        #div2{width: 100px;height: 100px;background: lightgreen;
            /*margin-left: 50px;
            margin-top: 50px;*/
            /*margin: 50px 0 0 50px;
            上，右，下，左
            margin: 10px 20px 30px;
            上，左右，下
            margin: 10px 20px;
            上下，左右
            margin: 10px;
            四个方向*/
            margin: 50px auto 0;
        }
    </style>
</head>
<body>
<div id="div1">
    <div id="div2"></div>
        <span>123456</span>
</div>
</body>
</html>

标签：盒子,border,模型,50px,边框,margin,属性
来源： https://www.cnblogs.com/wuxinqing/p/15549714.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

盒模型