菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 前端-王卓凡-20230417 [打印本页]

作者: 王卓凡 时间: 2023-4-17 23:53
标题: 前端-王卓凡-20230417
今天所学内容：

## 盒子模型

- 盒子模型

  - 什么叫盒子模型
- 就是将HTML页面中的布局元素看做是一个矩形的盒子，盒子的内容包括边框、外边距、内边距和实际内容。

  - 边框

- border属性可以设置边框样式，属性值由三部分组组成：边框的粗细、边框的样式、边框的颜色

- 语法：border: border-width border-style border-color;
   - border-style常用属性：solid（实线、最常用）、dashed（虚线）、dotted（点线）。

  - 表格的细线边框

- 使用border-collapse:collapse；来设置表格的细线边框，collapse是合并的意思!

  - 边框对于盒子大小的影响

- 边框会影响盒子的实际大小，加了边框盒子会变大，我们可以在设置盒子大小的时候将边框的宽度加上，即可。

## 内边距

- padding属性可以控制内边距，就是边框和盒子内容之间的距离

  - padding-left  左内边距

  - padding-right 右内边距

  - padding-top 上内边距

  - padding-bottom 下内边距

  - 复合属性

- padding: 10px;  上下左右内边距都是10px

- padding: 10px 20px; 上下内边距是10px 左右内边距是20px

- padding: 10px 20px 30px; 上内边距是10px 左右是20px 下是30px

- padding: 10px 20px 30px 40px; 上右下左内边距分别是10px 20px 30px和40px ，顺时针方向从上内边距开始

- 例

- 内边距的特殊情况

  - 没有宽度的盒子，padding不会撑开盒子的宽度

## box-sizing(怪异盒模型)

- 属性值

  - content-box（默认值）
- 默认的盒子模型的设置，盒子的整个大小是宽度+padding+border

  - border-box
- 怪异盒模型，盒子宽度和高度设定好之后不会随着padding和border的变化而变化，前提是padding和border的值不要超过盒子的大小。
遇到的问题：无

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)