css盒子模型margin的粘连性个叠加性笔记

最新推荐文章于 2023-02-14 11:00:34 发布

我叫托马斯

最新推荐文章于 2023-02-14 11:00:34 发布

阅读量632

点赞数

本文链接：https://blog.csdn.net/sj379024856/article/details/108479583

版权

今天学了盒子模型，发现粘连性只要把display设置为inline-block行内块，就可以避免粘连性和叠加性，代码如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           #d1{
               /* display: inline-block; */
               width: 18.75rem;
               height: 18.75rem;
               margin: 20px 40px 60px 80px;
               background-color: #00FFFF;
               border: 1px solid #000000;
           }
           /* 上下相邻的两个div，d1的下边距margin-bottom与d2的上边距margin-top有重叠性，不会累加，只会取两者最大值
           如果其中一个div设置display: inline-block以后可以取消叠加性，上下div的margin会累加*/
           #d2{
               display: inline-block;
               width: 18.75rem;
               height: 18.75rem;
               margin: 50px;
               /* padding-top: 20px; */
               background-color: #00FFFF;
               /* border: 1px solid #000000; */
               /* overflow: hidden; */
           }
           /* 子元素设置margin的时候发现，左右不会有粘连性，上下会与父级元素有粘连性，margin不会生效，此时
           1.父级上添加overflow：hidden
               2.父级上添加一个边框
               3.父或子任意一个把display设置inline-block
               三种方法可以取消粘连性
           */
           #d3{

               width: 30%;
               height: 30%;
               background-color: #FF0000;
               margin: 20px;
           }
       </style>
   </head>
   <body>
       <div id="d1">

       </div>
       <div id="d2">
           <div id="d3">

           </div>
       </div>
   </body>
</html>

总之只要设置inline-block，就可以解决粘连性和叠加性

我叫托马斯

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css盒子模型margin的粘连性个叠加性笔记

今天学了盒子模型，发现粘连性只要把display设置为inline-block行内块，就可以避免粘连性和叠加性，代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #d1{ ...
复制链接

扫一扫