装饰
元素的层级关系
不同布局方式元素的层级关系
标准流<浮动<定位
不同定位之间的层级关系
- 相对，绝对，固定默认层级相同
- 此时HTML中写在下面的元素层级比较高，会覆盖上面的元素
更改定位元素的层级的话，用z-index属性，数字越大，层级越高
装饰
1.垂直对齐方式
基线：浏览器文字类型元素排版中存在用于对齐的基线
文字对齐问题
场景：解决行内/行内块元素垂直显示问题
问题：当图片和文字在一行中显示的时候，底部是没对齐的
垂直对齐方式：
| 属性值 | 效果 |
|---|---|
| baseline | 默认，基线对齐 |
| top | 顶部对齐 |
| middle | 中部对齐 |
| bottom | 底部对齐 |
光标类型
属性名：cursor
| 属性值 | 效果 |
|---|---|
| default | 默认值，通常是箭头 |
| pointer | 小手效果，提示用户可以点击 |
| text | 工字形，提示用户可以选择文字 |
| move | 十字光标，提示用户可以移动 |
边框圆角
场景：让盒子四个角变得圆润，增加页面细节，提升用户体验
属性名：boarder-radius
常见属性值：数字+px或者百分比,取值的规则和之前的margin和padding规则类似
从左上角开始赋值。然后顺时针赋值，没有赋值的看对角线
应用
画一个正圆：
盒子必须是正方形，设置边框圆角为盒子宽高的一半
胶囊按钮：
盒子必须是长方形，设置->boarder-radius：盒子宽度的一半
Overflow
溢出部分显示效果
溢出部分指的是内容部分超出盒子范围的区域
常见属性值:
| 属性值 | 效果 |
|---|---|
| visible | 默认值，溢出部分可见 |
| hidden | 溢出部分隐藏 |
| scroll | 无论是否溢出都显示滚动条 |
| auto | 根据是否溢出显示滚动条 |
元素本身隐藏
场景：让元素本身在屏幕中不可见
常见属性：
visibility:hidden
display:none
区别：visibility隐藏元素本身，并且在网页中占位置，display不占位置
透明度：opacity
边框合并
让相邻表格边框进行合并，得到细线边框效果
代码：border-collapse：collapse
表格元素：HTML：table
用CSS画三角形
width : 0
height:0
boarder-top: 大小，solid transparent
boarder-right：大小，solid transparent
boarder-bottom：大小 solid 颜色
boarder-left：大小 solid transparent