持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第15天，点击查看活动详情
认识盒子模型的组成，掌握盒子模型边框、内边距、外边距的设置方法
盒子模型
- 页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
- 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子
- CSS 中规定每个盒子分别由：
内容区域（content）
边框区域（border）
内边距区域（padding）
外边距区域（margin）
内容的宽度和高度
利用width和height属性默认设置是盒子内容区域的大小
属性：width / height
常见取值：数字+px
边框（border）- 单个属性
给设置边框粗细、边框样式、边框颜色效果
边框粗细 border-width: 数字+px
边框样式 border-style: solid(实线)、dashed(虚线)、dotted(点线)
边框颜色 border-color: 颜色表示 可以连写 border: 5px dashed red;
边框 border-方位名词 只给盒子的某个方向单独设置边框
border-bottom: 5px dashed red;
盒子实际大小
盒子宽度 = 左边框 + 内容宽度 + 右边框
盒子高度 = 上边框 + 内容高度 + 下边框
设置width和height是内容的宽高！
设置border会撑大盒子！
操作：
布局顺序： 从外往内，从上往下
内边距padding
设置边框与内容区域之间的距离padding
取值： 顺时针顺序 一个值 apx 上右下左都设置为apx
两个值 apx bpx 上下设置为apx 左右设置为bpx
三个值 apx bpx cpx 上设置为apx 左右设置为bpx 下设置为cpx
四个值 apx bpx cpx dpx 上设置为apx 右设置为bpx 下设置为cpx 左设置为dpx
内边距 padding-单方向设置 只给盒子的某个方向单独设置内边距
padding-left : 30px ;
盒子实际大小终极计算公式
盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
设置width和height是内容的宽高！
设置border会撑大盒子
设置padding会撑大盒子不会撑大盒子的特殊情况（块级元素）
- 如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
- 此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子
内减操作 不想盒子被撑大：
① ：手动内减
操作：自己计算多余大小，手动在内容中减去
缺点：项目中计算量太大，很麻烦
② ：自动内减
操作：给盒子设置属性 box-sizing : border-box ; 即可
优点：浏览器会自动计算多余大小，自动在内容中减去
外边距margin
设置边框以外，盒子与盒子之间的距离margin
取值： 顺时针顺序 一个值 apx 上右下左都设置为apx
两个值 apx bpx 上下设置为apx 左右设置为bpx
三个值 apx bpx cpx 上设置为apx 左右设置为bpx 下设置为cpx
四个值 apx bpx cpx dpx 上设置为apx 右设置为bpx 下设置为cpx 左设置为dpx
外边距 margin-单方向设置 只给盒子的某个方向单独设置内边距
margin-left: 30px ; margin-left: 盒子向左移动
margin-right: 盒子向右移动
margin-top: 盒子向上移动
margin-bottom: 盒子向下移动
小总结
-
浏览器会默认给部分标签设置默认的margin和padding
清除默认内外边距：padding: 0; margin: 0; -
水平布局的盒子，左右的margin正常，互不影响
-
垂直布局的块级元素，上下的margin会合并
解决方法：只给其中一个盒子设置margin即可 -
互相嵌套的块级元素，子元素的 margin-top 会作用在父元素上,导致父元素一起往下移动
解决方法：
1. 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
2. 给父元素设置overflow：hidden
3. 转换成行内块元素
4. 设置浮动 -
给行内元素设置margin和padding时margin和padding无效情况
解决方法：
1. 水平方向的margin和padding布局中有效！
2. 垂直方向的margin和padding布局中无效！