外边距margin的合并现象:在垂直方向上,如果有两个相邻的外边距,就会发生外边距合并现象。
在默认布局的水平方向,margin会累加左右两边标签的外边距宽度。在垂直方向上,margin会合并上下两边标签的外边距高度,谁大就显示谁的外边距高度,只选择一个,不累加。
CSS盒子模型:HTML中所有的标签,都是一个盒子。
在HTML中所有的标签都可以设置:宽度/高度、边框、内/外边距
宽度/高度:指定可以存放内容的区域
-内容宽高:width/height
就是通过标签的width/height属性设置的宽度和高度。
-元素宽高:2border+2padding+width/height
宽度 = 左边框+左内边距+内容宽度+右内边距+右边框
高度同理。
-元素空间宽高:2margin+2border+2*padding+width/height
宽度 = 左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距
高度同理。
盒子的 box-sizing 属性:CSS3中新增的属性。
box-sizing属性可以保证给盒子新增了border和padding之后,元素的宽高不变,保证了内部元素不溢出。
在开发中,如果有需求到嵌套(父子)关系盒子之间的距离的时候,应该使用内边距padding属性来控制,不要使用外边距margin属性,margin属性一般用于控制同级(兄弟)关系的盒子
.b {margin:0 auto;} 可以设置嵌套关系盒子的水平居中,不能控制垂直居中。
div中 text-align:center; 和 margin:0 auto; 的区别:
- text-align:center 只是用于 div 中文字和图片的水平居中
- margin:0 auto 只是让盒子自己水平居中