- 什么是内边距
- 边框和内容之间的距离就是内边距
- 格式
- 非连写
- padding-top: ;
- padding-right: ;
- padding-botton: ;
- padding-left: ;
- 连写
- pdding:上 右 下 左;
- 非连写
- 注意点:
- 给标签设置内边距之后,标签占有的宽度和高度会发生变化
- 给标签设置内边距之后,内边距也会有背景颜色
- 什么是外边距
- 标签和标签之间的距离就是外边距
- 格式
- 非连写
- margin-top: ;
- margin-right: ;
- margin-bottom: ;
- margin-left: ;
- 连写
- margin:上 右 下 左;
- 非连写
- 注意点
- 外边距的那一部分是没有背景颜色的
外边距的合并现象
- 在默认布局的垂直方向上,默认情况下外边距是不会叠加的,会出现合并现象,谁的外边距比较大就听谁的
- 左右浮动时外边距会叠加
盒子模型
- 什么是CSS盒子模型?
- CSS盒子模型仅仅是一个形象的比喻,HTML中所有的标签都是盒子
- 结论
- 在HTML中所有的标签都可以设置
- 宽度/高度 == 指定可以存放内容的区域
- 内边距 == 填充物
- 边框 == 手机盒子自己
- 外边距 == 盒子和盒子之间的距离
- 内容的宽度和高度
- 就是通过width/height属性设置的宽度和高度
- 元素的宽度和高度
- 宽度 = 左边框 + 左内边距 + width +右内边距 +右边框
- 高度 = 上边框 + 上内边距 + height +下内边距 +下边框
- 元素空间的宽度和高度
- 宽度 = 左外边距 + 左边框 + 左内边距 + width +右内边距 +右边框 +右外边距
- 高度 = 上外边距 + 上边框 + 上内边距 + height +下内边距 +下边框 +下外边距
- 控制一个盒子在水平方向居中
- margin: 0 auto; 垂直方向无效
- margin:0 auto;与text-align:center;的区别
- margin:0 auto;是用来设置盒子本身居中的
- text-align:center;是用来设置盒子内部的文字、图片相对于盒子本身居中的
overflow属性
当两个盒子嵌套,内部的盒子尺寸大于外部的盒子尺寸时,用来控制超出外部盒子的部分的显示方式
如下图,红色盒子里嵌套了个绿色盒子,但绿色盒子的尺寸大于红色盒子,此时红色盒子的overflow:visible; 也就是默认属性,不剪裁
在红色盒子里设置属性overflow:hidden;后,超出的部分被裁减掉了