盒子模型--万物皆盒子

最新推荐文章于 2022-07-26 21:47:02 发布

闲鱼!!!

最新推荐文章于 2022-07-26 21:47:02 发布

阅读量259

点赞数

本文链接：https://blog.csdn.net/weixin_43158056/article/details/90242469

版权

盒子模型

使用盒子时最好先清除默认值

*{
margin: 0;
padiing: 0;
}

内边距

padding-top:
padding-right:
padding-bottom:
padding-left

内边距取值

遵循上右下左的顺时针原则和后来居上原则

1>.分开写

padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:40px;

2>.复合写

padding:10px; 			    上下左右都是10px
padding:10px 20px;   		上下是10px 左右是20px
padding:10px 20px 30px; 	上10px 右20px 下30px 左10px
padding:10px 20px 30px 40px 上10px 右20px 下30px 左10px

外边距

margin top:
margin right:
margin bottom:
margin left:

外边距取值

遵循上右下左的顺时针原则和后来居上原则

1>.分开写

margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;

2>.复合写

margin:10px; 			    上下左右都是10px
margin:10px 20px;   		上下是10px 左右是20px
margin:10px 20px 30px; 		上10px 右20px 下30px 左10px
margin:10px 20px 30px 40px; 上10px 右20px 下30px 左10px

占位尺寸/盒子尺寸

占位尺寸

盒子的占位:margin+border+padding+width/height

盒子尺寸

 盒子的高度:border(上下)+padding(上下)+height
 盒子的宽度:border(左右)+padding(左右)+width

版心居中

div{
	width:500px;
	height: 200px;
	background: pink
	margin: 0 auto
}		  上下  左右

重点:
版心居中:水平居中
1.盒子必须有宽度
2.盒子的显示模式必须是块
3.盒子的显示模式如果是行内块,则不生效(可通过display:line-block进行模式转换)

外边距重合问题

当两个含有外边距(**margin**)的盒子相邻时,两个盒子的外边距(**margin**)默认会重合,并且两者的距离是外边距(**margin**)大的那个

解决方案:
常用方案
1.超出隐藏 overflow: hidden(隐藏)**

       div{
              width: 300px;
              height: 100px;  
          }
        .father{
	        background: red;
            overflow: hidden;     
            bo
            }
        .son{
            width: 50px;
            height: 50px;
            background: pink;
        }
    </style>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

其他方案:
2.添加描边
border:1px width solid; ( 位置与第一种一样)
3.添加空表格
.clearfix:before{
/在子级的开头位置添加一个盒子/
content:’’;
display:table;
}

外边距塌陷问题

处理方案:冷处理

padding被撑大的问题

采用内减模式: **box-sizing:border-box;**使盒子占位不变.

<style type="text/css">
        div{
            width: 500px;
            height: 200px;  
            background: red;
            padding: 50px;
            box-sizing: border-box;     
        }
    </style>