盒模型详解

Posted wyb666

tags:

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

内容:

1.什么是盒模型

2.padding和margin

3.盒模型实例

4.margin和padding拓展

 

 

1.什么是盒模型

 

 

 

2.padding和margin

padding -> 内边距(内容与边框之间)

margin   -> 外边距(标签与标签之间)

1 margin:         用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的
2 padding:        用于控制内容与边框之间的距离;   
3 Border(边框)    围绕在内边距和内容外的边框。
4 Content(内容)   盒子的内容,显示文本和图像。

注:两个挨着的margin浏览器最后会取其中的最大值

 

 

3.盒模型实例

(1)边框、内容及padding实例

 1 <!--__author__ = "wyb"-->
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>padding和margain</title>
 7     <style>
 8         .div1{
 9             width: 200px; height: 200px;
10             background-color: red;
11             border: 30px solid seagreen;
12             padding: 10px;
13         }
14         .div2{
15             width: 200px; height: 200px;
16             background-color: yellow;
17             border: 10px solid rebeccapurple;
18             padding: 10px;
19         }
20     </style>
21 </head>
22 <body>
23     <div class="div1">hello, div1</div>
24     <div class="div2">hello, div2</div>
25 </body>
26 </html>

效果如下:

技术分享图片

(2)margin实例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>padding和margain2</title>
 6     <style>
 7         body{
 8             margin: 0;
 9         }
10         .div1{
11             background-color: aqua;
12             width: 200px;
13             height: 200px;
14             margin-bottom: 30px;
15         }
16         .div2{
17             background-color: blueviolet;
18             width: 100px;
19             height: 100px;
20         }
21     </style>
22 </head>
23 <body>
24 <div class="div1"></div>
25 <div class="div2"></div>
26 </body>
27 </html>

效果如下:

技术分享图片

 

 

4.margin和padding拓展

(1)body的margin问题

边框在默认情况下会定位于浏览器窗口的左上角,但是并没有紧贴着浏览器的窗口的边框,这是因为body本身也是一个盒子(外层还有html),在默认情况下,   body距离html会有若干像素的margin,具体数值因各个浏览器不尽相同,所以body中的盒子不会紧贴浏览器窗口的边框

解决方法:

1 margain: 0;

 

(2)margin collapse(边界塌陷问题)

外边距的重叠只产生在普通流文档的上下外边距之间,这个看起来有点奇怪的规则,其实有其现实意义。设想,当我们上下排列一系列规则的块级元素时,那么块元素之间因为外边距重叠的存在,段落之间就不会产生双倍的距离

兄弟div: 上面div的margin-bottom和下面div的margin-top会塌陷,也就是会取上下两者margin里最大值作为显示值

父子div: 如果父级div中没有 border,padding,inline content,子级div的margin会一直向上找,直到找到某个标签包括border,padding,inline content           中的其中一个,然后按此div 进行margin

 1 <!DOCTYPE html>
 2 <html lang="en" style="padding: 0px">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         body{
 8             margin: 0;
 9         }
10 
11         .div1{
12             background-color: aqua;
13             width: 300px;
14             height: 300px;
15         }
16         .div2{
17             background-color: blueviolet;
18             width: 100px;
19             height: 100px;
20             margin-top: 20px;
21 
22         }
23     </style>
24 </head>
25 <body>
26 
27 <div class="div1">
28     <div class="div2"></div>
29     <div class="div2"></div>
30 </div>
31 
32 </body>
33 </html>
34 
35 margin collapse示例

效果如下:

技术分享图片

解决方法:以下3局代码任选一句加入父div的样式中即可

1 border:1px solid transparent;
2 padding:1px;
3 over-flow:hidden; 

 

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

2017年总结的前端文章——CSS盒模型详解

css盒模型详解

盒模型详解

盒模型布局详解

CSS 盒子模型详解 IE盒子模型实际应用——把Border设置成不改变宽度高度的内边框

#yyds干货盘点#愚公系列2022年11月 微信小程序-Flex布局详解