CSS-12-盒子模型

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             .boxmodel{
 8                 /*盒子模型*/
 9                 /*盒子在页面中显示成一个方块,类似一个盒子,CSS盒子模型就是使用现实中的盒子来做比喻*/
10                 /*把元素叫做盒子,设置对应的样式分别为:
11                  *               盒子的边框(border),
12                                                   盒子内的内容和边框之间的间距(padding),
13                                                   盒子与盒子之间的间距(margin)*/
14                 /*盒子真实尺寸
15                 盒子宽度 = width + padding左右 + border左右;
16                 盒子高度 = height + padding上下 + border上下;*/
17                 
18                 /*在布局中,如果只想增大内容和边框的距离,又不想改变盒子显示的尺寸*/
19                 /*box-sizing:content-box|border-box*/
20                 
21                width: 50px;
22                height: 50px;
23                 padding: 100px;
24                border: 100px;
25                color: skyblue;
26                background: yellow;
27                margin: auto;
28                border-style: solid;
29                border-color: yellowgreen;
30                
31             }
32             .boxmodel1{
33                width: 50px;
34                height: 50px;
35                padding: 100px;
36                border: 100px;
37                color: skyblue;
38                background: yellow;
39                margin: auto;
40                border-style: solid;
41                border-color: yellowgreen;
42                box-sizing: border-box;
43             }
44         </style>
45     </head>
46     <body>
47         <div class="boxmodel"></div>
48         <div class="boxmodel1">
49             
50         </div>
51     </body>
52 </html>

 

posted @ 2019-07-27 14:58  我只是一个码农  阅读(151)  评论(0编辑  收藏  举报