标签：box sizing padding 盒子 content margin 属性

盒子模型：

盒子模型包括content（内容区域）->padding（内边距）->border（边框）->margin（外边距）。

注：

1、背景颜色会填充到margin以内的区域。

2、文字会在content区域。

3、padding不能出现负值，margin可以出现负值。

标准盒子模型：

标准盒子模型的width和height设置的宽度和高度指的是content区域的大小。

box-sizing属性：

box-sizing属性翻译就是盒尺存属性。即改变盒子模型的显示形态。

默认值：content-box，即标准盒子模型，width和height属性表示content区域的大小；

border-box值，使得width和height属性表示content+padding+border区域的大小，使用场景：解决一些宽度100%的问题。

margin的叠加问题：

相邻两个元素margin同时存在时，会取margin值较大的作为叠加的值。

解决办法：

1、BFC规范；

2、只给一个元素添加间距。

margin的传递问题：

当是嵌套结构时，有且只有margin-top会出现传递的问题，其他三个方向是没有传递问题的。

解决方案：

1、BFC规范。

2、给父容器添加边框。

3、将子容器的margin属性去掉，在父容器中添加padding属性。

margin的自适应问题：

margin可以左右自适应，但是不能上下自适应。

左右自适应可以实现容器的水平居中。

如：

.box{
margin:0 auto;
}

 

标签：box,sizing,padding,盒子,content,margin,属性
来源： https://blog.csdn.net/BeWorriedJava/article/details/114649628

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。