盒子模型
长度
| 单位 | 名称 |
|---|---|
| px | 像素 |
| em | 相对元素 font-size 的倍数 |
| rem | 相对根字体大小，html标签就是根 |
| % | 相对父元素计算 |
显示模式
| 名称 | 属性 | 举例 |
|---|---|---|
| 块元素 | block | <html> 、 <body> <h1> ~ <h6> 、 <hr> 、 <p> 、 <pre> 、 <div> <ul> 、 <ol> 、 <li> 、 <dl> 、 <dt> 、 <dd> <table> 、 <tbody> 、 <thead> 、 <tfoot> 、 <tr> 、<caption> <form>、<option> |
| 行内元素 | inline | <br> 、 <em> 、 <strong> 、 <sup> 、 <sub> 、 <del> 、 <ins>、<a> 、 <label> |
| 行内块元素 | inline-block | <img> 、<td> 、 <th> 、<input> 、 <textarea> 、 <select> 、 <button>、<iframe> |
行内元素无法设置宽高 行内块可以
盒子组成
| 名称 | 属性 | 解释 | 默认值 |
|---|---|---|---|
| 外边距 | margin | 盒子与外界的距离 | |
| 边框 | border | 盒子的边框 | none ： 默认值 solid ： 实线 dashed ： 虚线 dotted ： 点线 double ： 双实线 |
| 内边距 | padding | 紧贴内容的补白区域 | |
| 内容 | content | 元素中的文本或后代元素都是它的内容 |
上右下左
padding不负
margin可负
行内margin无上下
文本溢出
plain
// 超出部分隐藏
overflow: hidden;
// 超出部分显示省略号
text-overflow: ellipsis;
// 文本不换行
white-space: nowrap;overflow
| 属性 | 解释 | 默认值 |
|---|---|---|
| overflow | 溢出内容的处理方式 | visible ：显示，默认值 hidden ：隐藏 scroll ：显示滚动条，不论内容是否溢出 auto ：自动显示滚动条，内容不溢出不显示 |
| overflow-x | 水平方向溢出内容的处理方式 | |
| overflow-y | 垂直方向溢出内容给的处理方式 |
新增属性
| 属性 | 名称 | 解释 |
|---|---|---|
| rem | rem | 根元素字体大小的倍数，通常用于响应式设计，使页面元素大小随根元素字体大小变化而变化。 |
| vw | vw | 视口宽度的百分比，1vw 等于视口宽度的 1%。 |
| vh | vh | 视口高度的百分比，1vh 等于视口高度的 1%。 |
| vmax | vmax | 视口的较大值（宽度或高度）的百分比，1vmax 等于视口的较大值的 1%。 |
| vmin | vmin | 视口的较小值（宽度或高度）的百分比，1vmin 等于视口的较小值的 1%。 |
| opacity | 透明度 |
resize
| 属性 | 名称 | 解释 |
|---|---|---|
| none | 不允许调整大小 | 用户不能调整元素的尺寸。 |
| both | 水平和垂直方向都可以调整 | 用户可以同时在水平和垂直方向上调整元素的尺寸。 |
| horizontal | 仅水平方向调整 | 用户只能在水平方向上调整元素的尺寸。 |
| vertical | 仅垂直方向调整 | 用户只能在垂直方向上调整元素的尺寸。 |
box-shadow
| 属性 | 名称 | 解释 |
|---|---|---|
| h-shadow | 水平阴影偏移量 | 阴影在水平方向上的偏移量，正值向右，负值向左。 |
| v-shadow | 垂直阴影偏移量 | 阴影在垂直方向上的偏移量，正值向下，负值向上。 |
| blur-radius | 模糊半径 | 阴影的模糊程度，值越大越模糊。 |
| spread-radius | 扩展半径 | 阴影的扩展或收缩，正值扩大阴影，负值缩小阴影。 |
| color | 阴影颜色 | 阴影的颜色，可以使用任何有效的 CSS 颜色值。 |
background-origin
| 属性 | 名称 | 解释 |
|---|---|---|
| padding-box | 填充区 | 背景图像从填充区开始绘制。这是默认值。 |
| border-box | 边框区 | 背景图像从边框区开始绘制。 |
| content-box | 内容区 | 背景图像从内容区开始绘制。 |
background-clip
| 属性 | 名称 | 解释 |
|---|---|---|
| border-box | 边框区 | 背景被裁剪到边框区。这是默认值。 |
| padding-box | 填充区 | 背景被裁剪到填充区。 |
| content-box | 内容区 | 背景被裁剪到内容区。 |
background-size
| 属性 | 名称 | 解释 |
|---|---|---|
| auto | 自动 | 背景图像按其原始尺寸显示。这是默认值。 |
| length | 固定大小 | 通过指定宽度和高度来设置背景图像的大小。 |
| percentage | 百分比 | 通过指定相对于容器宽度和高度的百分比来设置背景图像的大小。 |
| cover | 覆盖 | 背景图像将被缩放以完全覆盖背景区域，可能会裁剪部分图像。 |
| contain | 包含 | 背景图像将被缩放以适应背景区域，不会裁剪图像。 |