盒模型大小取决于它的padding,margin,border数值

盒模型规定了元素框处理元素内容width与height值、内边距padding、边框border 和 外边距margin 的数值大小。边框内的空白是内边距padding,边框外的空白是外边距margin,如下所示,这个盒模型元...

盒模型规定了元素框处理元素内容width与height值、内边距padding、边框border 和 外边距margin 的数值大小。边框内的空白是内边距padding,边框外的空白是外边距margin,如下所示,这个盒模型元素框的宽度值=内容区域的宽度+2(内边距+外边距+边框),也就是该示例中的元素宽度为170px,需要注意的是在 css 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。(浏览器查看的时候记得打开控制台F12,点击对应的元素查看)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>盒模型大小取决于它的padding,margin,border数值</title>
 7     <style type="text/css">
 8         div{
 9         padding: 10px;/*内边距*/
10         margin: 20px;/*外边距*/
11         margin: 10px 20px 30px 40px;/*上10px 右20px 下30px 左40px*/
12         margin: 10px 20px;/*上下 左右*/
13         margin: 10px 20px ;/*上 上下不一样,左右一样*/
14         margin: 10px 20px 30px;/*外边距*/
15         border: 5px solid red;/*边框*/
16         width: 100px;/*内容区域宽度100*/
17         height: 100px;/*内容区域高度100*/
18     }
19     /*盒子大小值=2(内边距+边框+外边距)*//*该div大小*/
20     </style>
21 </head>
22 <body>
23     <div>看再多的书是学不全脚本的,要多实践。</div>
24 </body>
25 </html>

不论是margin还是padding,它们都是按照顺时针排列的,上右下左定义数值的;比方说这个margin:10px 10px 10px 10px是讲这个盒子上下左右都增加了10px的外边距,简写margin:10px;marigin:10px  10px;上下 左右外边距10px

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>margin所谓bug居然是重叠,咋解决</title>
 7     <style type="text/css">
 8     .box1,.box2{
 9         width: 200px;
10         height: 200px;
11         margin: 10px 20px;
12         background-color: red;
13     }
14     </style>
15 </head>
16 <body>
17     <div class="box1">功能说明书里不存在可操作性</div>
18     <div class="box2">软件在能够复用前必须先能用。</div>
19 </body>
20 </html>

按照正常思维来讲,上面的代码里面的2个盒子的上下间距应该是20px缝隙,但是实际我们在控制台查看的时候确只有10px,另外10px显然被重叠了,如果我们调整2个盒子的margin值大小,会发现上下间距取最大值20px(margin平级元素取最大值 );解决办法:1.float2改变元素结构display:inline-block此外如果margin嵌套关系,也就是父子关系的时候你会发现他们是重合的,没有缝隙,那么如何解决margin带来的这些问题了,解决办法:盒子是没有盖子的,想办法给2端填充内容,可以使用border、padding、overflow:hidden;盒子模型对于我们后面的网站布局很重要,利于网站的精确定位。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>解决margin产生的bug方法</title>
 7     <style type="text/css">
 8     /* .box1,.box2{
 9         width: 200px;
10         height: 200px;
11         background-color: red;
12     } */
13     /* .box1{
14         margin: 10px 20px;
15     }
16     .box2{
17         margin: 20px 10px;
18     }
19     .box3{
20         margin: 20px 10px;
21     }
22     .box4{
23         margin: 10px 20px;
24     } */
25 
26     /* 盒子模型平级带来的问题解决办法:1.float 2.display:inline-block 3.直接写一个最大值,平级取最大值的margin*/
27     div{
28         /* float: left; */
29         display: inline-block;
30         width: 1200px;
31     }
32    .box1{
33         margin: 10px 20px;
34     }
35     .box2{
36         margin: 80px 10px;
37     }
38 
39     /* 盒子模型平级嵌套带来的问题解决办法:盒子是没有盖子的,想办法给2端填充内容,可以使用border、padding、overflow:hidden;上下填充文字*/
40     p{
41         width: 800px;
42     }
43     .box3,.box4{
44         margin: 30px;
45     }
46     .box3{
47         background-color: green;
48         /* border:1px solid red*//*给父元素加border*/
49         padding: 10px; /*给父元素加padding*/
50         /*overflow: hidden;*//*添加overflow:hidden 超出部分隐藏,带来效果是所有超出全部裁剪掉*/
51     }
52     .box4{
53         display: block;
54         background-color: greenyellow;
55     }
56     </style>
57 </head>
58 <body>
59     <div class="box1">功能说明书里不存在可操作性</div>
60     <div class="box2">软件在能够复用前必须先能用。</div>
61     <p class="box3">
62         <!-- 简单不先于复杂,而是在复杂之后。 -->
63         <span class="box4">过去的代码都是未经测试的代码。</span>
64         <!-- 要么做第一个,要么做最好的一个 -->
65     </p>
66 </body>
67 </html>
  • 发表于 2020-02-16 01:00
  • 阅读 ( 158 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除