定位与装饰
定位
静态定位
相对定位
绝对定位
父子关系
居中
装饰
垂直对齐
相关信息
基线：浏览器文字类型元素排版中存在用于对齐的基线
| 属性值 | 效果 |
|---|---|
| baseline | 默认，基线对齐 |
| top | 顶部对齐 |
| middle | 中部对齐 |
| bottom | 底部对齐 |
光标类型
提示
使用属性cursor
| 属性值 | 效果 |
|---|---|
| default | 默认值，通常是箭头 |
| pointer | 小手效果，提示用户可点击 |
| text | 工字形，提示用户可选择文字 |
| move | 十字光标，提示用户可以移动 |
| url | 自定义图片 |
圆角边框
提示
使用属性border-radius
一个值：表示四个角是相同的
三个值：左上、右上（对角左下）、右下
四个值：左上、右上、右下、左下
圆
步骤1
盒子必须是正方形
步骤2
取值50%，超过50%无效果
胶囊按钮
步骤1
盒子要求是矩形
步骤2
值是盒子高度的一半
溢出效果
相关信息
指的是盒子内容部分超出盒子范围
| 属性值 | 效果 |
|---|---|
| visible | 默认值 |
| hidden | 溢出部分隐藏 |
| scroll | 无论是否溢出，显示滚动条 |
| auto | 根据内容自动显示滚动条 |
元素隐藏
警告
visibility:hidden浏览器正常渲染元素，display:none浏览器不渲染元素
透明属性
提示
使用属性opacity
三角形
步骤1
画一个盒子
步骤2
设置四周不同颜色边框，方便区分
步骤3
盒子高度改为0，仅保留边框