五大定位方式:
1.静态定位:
通过margin和padding来定位,元素以左上为基准,块元素从上往下,行内元素从左往右,无法层叠效果.
用于页面规划
为默认样式
.d1{
position: static;(默认也是这样)
margin: 200px;
padding: 200px;
}
2.相对定位
用left/top/right/buttom来控制位置,可以实现元素层叠,元素不脱离文档流.
当需要移动某个元素而其他元素不受影响时使用(元素位置微调)
原位置还是会被占用
.d1{
position: relative;
left: 200px;
right: 200px;
}
3.绝对定位
用left/top/right/buttom来控制位置
实现层叠效果,元素脱离文档流(不占用原来位置),默认以body为参照物,若要以上级元素为参照物则在上级元素添加position:relativ;(子绝父相)
当需要往页面中添加某个元素,又不影响原本样式的情况下使用.
.d1{
position: absolute;
left: 0px;
right: 0px;
}
4.固定定位
固定定位left/top/right/buttom来控制位置
将元素固定在窗口的某个位置,元素脱离文档流(不占用原位置)
当需要将元素固定在某个窗口时使用
.d1{
position: fixed;
left: 0px;
right: 0px;
}
5.浮动定位
用margin来定位 元素会脱离文档流,会从当前所在行向左向右浮动,当撞到上级元素或其他浮动元素时停止,若一行装不下会自动换行
6.显示层级
z-index:数字
修改元素定位方式时,会出现元素层叠的问题,通过z-index可以控制元素谁显示上方
必须修改定位方式后,z-index才会生效,z-index越大则显示层级越靠前
对静态层和浮动层不生效 1.元素沾粘问题用overflow:hidden;
.d1{
width: 200px;
height: 200px;
background-color: yellow;
overflow: hidden;
}
.d2{
width: 50px;
height: 50px;
background-color: red;
margin: 75px;
}
<div class="d1">
<div class="d2">
2.超出元素
overflow:hidden 对超出的部分进行隐藏
overflow:scroll 会滑动显示
3. 对着图片居中:(调整基准线)
设置垂直居中:vertical-align:middle;
bottom:下方对齐 baseline:等线
4. transform:
Transform:scale() 缩放
Transition-duration: s 变化所需要的时间
