盒模型

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(内容) - 盒子的内容，显示文本和图像。
posted @ 2021-11-13 20:27  小王12138  阅读(47)  评论(0)  编辑  收藏  举报