首页 > 其他分享> 文章详细

盒模型

2021-11-13 20:34:37 阅读：116 来源： 互联网

标签：50px margin 模型元素边框 border top

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

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

margin 清除周围的元素区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

当元素的 padding 内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <title></title>
 7     <style type="text/css">
 8         #div1{
 9             width: 500px;
10             height: 500px;
11             background: lightblue;
12             overflow: hidden;
13             /*border-top-width: 5px;
14             border-top-color: red;
15             border-top-style: solid;*/
16             border: 5px solid; red ;
17             /*solid实线
18             double双实线
19             dotted点虚线
20             dashed 线段虚线*/
21             border-radius: 50%;
22 
23         }
24         #div2{
25             width: 100px;
26             height: 100px;
27             background: lightgreen;
28             /*margin-left: 50px;
29             margin-top: 50px;*/
30             /*margin: 50px 0 0 50px;*/
31             /*margin后可接多个元素 四个值的方向是上右下左*/
32             /*margin: 10px 20px 30px;*/
33             /*上，左右，下*/
34             /*margin: 10px 20px;*/
35             /*上下，左右*/
36             /*margin: 10px;*/
37             /*四个方向*/
38             margin: 50px auto 0;
39             /*使模型居中*/
40         }
41     </style>
42 </head>
43 <body>
44 <div id="div1">
45     <div id="div2"></div>
46 </div>
47 </body>
48 </html>
49 <!-- boder是边框，margin是外边距，padding是内边距 -->

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

标签：50px,margin,模型,元素,边框,border,top
来源： https://www.cnblogs.com/Wang12138/p/15549659.html

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

ICode9

盒模型