20210523—张晨曦
日志
一. 知识总结
1. 外边距
| 设置四周外边距 | margin |
|---|---|
| 让块元素横向居中显示 | margin: value auto; |
| 外边距折叠 | margin-bottom |
2. 内边距(填充）
设置四周填充 padding
3. 盒子模型
3.1 盒模型的各个部分
| Content box | 显示内容 | 通过width 和 height设置 |
|---|---|---|
| Padding box | 区域外部的空白区域 | 通过 padding 相关属性设置 |
| Border box | 边框盒包裹内容和内边距 | 通过 border 相关属性设置 |
| Margin box | 外面的区域 | 通过 margin 相关属性设置 |
3.2 标准盒模型
设置的是width 和 height
3.3替代盒模型（IE盒模型）
通过为其设置 box-sizing: border-box 来实现。
3.4 盒子模型和内联盒子
4.display：用inline-block值
5. 背景样式
| 名称 | 属性 | 属性值 |
|---|---|---|
| 背景颜色 | background-color | |
| 背景图片 | background-image | |
| 控制背景平铺 | background-repeat | no-repeat — 不重复repeat-x —水平重复等 |
| 调整背景图像的大小 | background-size | cover /contain |
| 背景图像定位 | background-position | top/right |
| 渐变背景 | background-image | |
| 多个背景图像 | background-image | |
| 背景附加 | background-attachment | scroll /fixed/local |
| background-clip | background-clip | border-box/padding-box/content-box/text |
| 使用background | background | background-clip/background-color/ background-image /等 |
6.处理不同方向的文本
6.1 书写模式
horizontal-tb : 块流向从上至下。横向
vertical-rl : 块流向从右向左。纵向
vertical-lr : 块流向从左向右。纵向
7.溢出的内容
overflow属性:
| visible | 内容不会被修剪 | 呈现在元素框外 |
|---|---|---|
| hidden | 隐藏掉溢出 | 内容是不可见 |
| scroll | 显示滚动条 | |
| auto | 以便查看其余的内容 |
8.CSS 的值
8.1 修饰字体文字
8.2 阴影
用box-shadow 修饰：
| h-shadow | 水平阴影的位置（允许负值） |
|---|---|
| v-shadow | 垂直阴影的位置（允许负值） |
| blur | 模糊距离 |
| spread | 阴影大小 |
| color | 阴影颜色 |
| inset | 改变阴影内侧阴影 |
近期评论