H5C3--盒子模型

Posted QinXiao.Shou

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5C3--盒子模型相关的知识,希望对你有一定的参考价值。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         *{
 8             padding: 0;
 9             margin: 0;
10         }
11         .items{
12             width:100%;
13             text-align: center;
14             margin-top: 100px;
15         }
16         .item{
17             width: 316px;
18             height: 170px;
19             display: inline-block;
20             margin:0 10px;
21             overflow: hidden;
22             /*添加盒模型*/
23             box-sizing: border-box;
24         }
25         .b1{
26             background-image: url("../images/1.jpg");
27             background-origin: border-box;
28         }
29         .b2{
30             background-image: url("../images/2.jpg");
31         }
32         .b3{
33             background-image: url("../images/3.jpg");
34         }
35 
36         /*鼠标上 移时添加边框*/
37         .item:hover{
38             border: 10px solid red;
39         }
40         .box{
41             width: 400px;
42             height: 200px;
43             background-color: #ccc;
44         }
45         .left{
46             width: 199px;
47             height: 200px;
48             background-color: red;
49             float: left;
50             /*一个元素所真正占据空间是:width + padding + border + margin*/
51             border-right:1px solid orange;
52             padding: 10px;
53             /*
54             box-sizing:设置盒模型
55                  content-box:默认值,说明当前元素的总宽度 = width + padding + border
56                  border-box:说明当前元素的总宽度 = width. 意味着如果添加border或padding会造成真正放置内容的区域变小。但是它的优点是能够提供更稳固的结构
57             */
58             box-sizing: border-box;
59         }
60         .right{
61             width: 200px;
62             height: 200px;
63             background-color: blue;
64             float: left;
65         }
66     </style>
67 </head>
68 <body>
69 <div class="box">
70     <div class="left">asdfaasdf</div>
71     <div class="right"></div>
72 </div>
73 <div class="items">
74     <div class="item b1"></div>
75     <div class="item b2"></div>
76     <div class="item b3"></div>
77 </div>
78 </body>
79 </html>

 从下图 可以看出这个盒子的稳固程度:

 

以上是关于H5C3--盒子模型的主要内容,如果未能解决你的问题,请参考以下文章

H5C3--边框图片

H5C3--文本阴影

H5C3--圆角

H5C3--过渡transition

移动web开发_H5C3

H5C3--transform实现任何元素居中对齐