目录
一. 盒子模型
1. 盒子模型的介绍
1. 盒子的概念
- 页面中的每一个标签,都可看做是一个 “盒子”,通过盒子的视角更方便的进行布局
- 浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为 盒子
2. 盒子模型
CSS 中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成,这就是 盒子模型
2. 内容区域的宽度和高度
作用:利用 width 和 height 属性默认设置是盒子 内容区域 的大小
属性:width / height
常见取值:数字+px
3. 边框(border)
作用:给设置边框粗细、边框样式、边框颜色效果
单个属性:
连写形式:
属性名:border
属性值:单个取值的连写,取值之间以空格隔开
• 如:border : 10px solid red;
快捷键:bd + tab
单方向设置:
场景:只给盒子的某个方向单独设置边框
属性名:border - 方位名词
属性值:连写的取值
4. 内边距(padding)
作用:设置 边框 与 内容区域 之间的距离
属性名:padding
常见取值:
单方向设置:
场景:只给盒子的某个方向单独设置内边距
属性名:padding - 方位名词
属性值:数字 + p
CSS3盒模型(自动内减)
给盒子设置border或padding时,盒子会被撑大,如果不想盒子被撑大:
解决方法 ① :手动内减
• 操作:自己计算多余大小,手动在内容中减去
解决方法 ② :自动内减
• 操作:给盒子设置属性 box-sizing : border-box ;
5. 外边距(margin)
作用:设置边框以外,盒子与盒子之间的距离
属性名:margin
常见取值:
单方向设置:
场景:只给盒子的某个方向单独设置外边距
属性名:margin - 方位名词
属性值:数字 + px
外边距折叠现象 – ① 合并现象
场景:垂直布局 的 块级元素,上下的margin会合并
结果:最终两者距离为margin的最大值
解决方法:避免就好
• 只给其中一个盒子设置margin即可
外边距折叠现象 – ② 塌陷现象
场景:互相嵌套 的 块级元素,子元素的 margin-top 会作用在父元素上
结果:导致父元素一起往下移动
解决方法:
1. 给父元素设置border-top 或者 padding-top(分隔父子元素的margin-top)
2. 给父元素设置overflow:hidden
3. 转换成行内块元素
4. 设置浮动