属性索引:定位position,位移transform,z-index(调整定位的盒子层级关系),垂直对齐方式vertical-align,鼠标类型cursor,边框圆角border-radius,溢出显示效果overflow,可见性visibility(占位),显示模式display,元素整体透明度opacity,
一、定位
1.网页常见的布局方式
- 标准流:块标签独占一行->垂直布局;行内元素/行内块元素一行显示多个->水平布局。
- 浮动:可以让原本垂直布局的块级元素变成水平布局。
- 定位:可以让元素自由的摆放在网页的任何位置;一般用于盒子之间的层叠情况。
2. 定位的常见应用场景:置顶栏等
3.定位的使用步骤
1.设置定位方式
属性名:position
属性值 | 定位方式 |
---|---|
static | 静态定位(无区别,不介绍) |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
2.设置偏移量
偏移值设置两个方向,水平和垂直各选一个使用即可
选取原则为就近原则(离哪边近就用哪个)
方向 | 属性名:数值+px | 含义 |
---|---|---|
水平 | left | 距离左边的距离 |
水平 | right | 距离右边的距离 |
垂直 | top | 距离顶部的距离 |
垂直 | bottom | 距离底部的距离 |
如果都有,以left,top为准 |
4.相对定位relative:相对于自己之前的位置进行移动
特点:占有原来的位置(没有脱标);仍然是标签原有的显示模式:
position:relative;
left:100ox;
top:200px;
5. 绝对定位absolute:先找已经定位的父级,如果有这样的父级就以这个父级为参照物进行定位;如果父级没有定位,则以浏览器窗口为参照进行定位
模式:position:absolute
特点:脱标,不占位;改变标签的显示模式特点,具备行内块的特点(在一行共存,宽高生效,不写宽高则尺寸由内容撑开,宽高内容都没有则盒子尺寸为0,即不显示)
- 父级定位
属于绝对定位,可用于嵌套块级,当父级有定位(有position属性)时,可以使用绝对定位absolute,以(有定位的)父级为参照物进行定位,**在工作中一般父级采用相对定位模式&#x