定位的应用场景和基本原理
定位的原理
-
在本文流中 , 任何一个标签都被文本流所限制了自身的位置 , 但是通过 CSS 我们依然使得这些标签可以改变 自己的位置 , 我们可以通过 float 来让标签浮动 , 我们也可以通过 margin 来让标签产生位置移动。 CSS 定位属性，允许定义标签框相对于其正常位置应该出现的位置，或者相对于父标签、 另一个标签甚至浏览器窗口本身的位置。标签可以使用顶部、底部、左侧和右侧属性定义具体的位置
position
-
static 默认 静态定位
-
默认的定位位置，不写就是静态定位
-
-
relative 相对定位
-
相对于自己本身移动
-
-
absolute 绝对定位
-
-
相对于父标签（父标签相对定位，子标签绝对定位）
-
-
fixed 固定定位
-
相对于浏览器窗口
-
不会随着滚动条滚动
-
总结一下position
-
定位 是否脱标 参考点 参数 static 否 无 relative 否 自己本身 left,right,top,bottom absolute 是 父标签（子绝父相） left,right,top,bottom fixed 是 浏览器窗口 left,right,top,bottom -
定位的技巧与层级关系
居中技巧
-
1、方案 1 margin 负间距 （1）必需知道该 div 的宽度和高度； （2）然后设置位置为绝对位置； （3）距离页面窗口左边框和上边框的距离设置为 50%，这个 50% 就是指盒子左上角顶点距离页面左、上边 界的 50%； （4）最后将该 div 分别左移和上移，使整个盒子居中，左移和上移的大小就是该 DIV( 包括 border 和 padding) 宽度和高度的一半
-
- 2、方案 2 margin:auto 实现绝对定位元素的居中（该方法兼容 ie8 以上浏览器）。 此方案代码关键点： （1）上下左右均 0 位置定位； （2）margin: auto。
- ```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
300px;
height: 200px;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
定位标签的层级属性 z-index
-
1.默认定位的标签一定在没加定位的标签上方。
-
2.默认是0，可以设置1、2、3、4，也可以是负值-1、-2，数值大的在上方
-
3.z-index属性必须要配合定位使用，否则无效
常见属性
-
vertical-align 属性设置标签的垂直对齐方式。利用这个属性做图文对齐方式
-
baseline 默认。标签放置在父标签的基线上。
-
top 把标签的顶端与行中最高标签的顶端对齐。
-
middle 把此标签放置在父标签的中部。
-
bottom 把标签的底端与行中最低的标签底端对齐。
-
-
图片下间隙解决
-
去除图片下间隙的办法有很多，常用的有 3 种：
-
设置父盒子字号为 0
-
.wrap{
font-size: 0;
}
-
-
改变图片的 display
-
img{
display: block;
}
-
-
给图片设置垂直对齐方式
-
img{
vertical-align: middle;// 设置为任意不为 baseline 的值都可以
}
-
-
-
-
显示与隐藏
-
盒子显示：
-
display:block;
-
-
盒子隐藏：
-
display:none：隐藏该元素并且该元素所占的空间也不存在了。
-
visibility:hidden ：隐藏该元素但是该元素所占的内存空间还存在，即“隐身效果”。
-
-
-
overflow 属性
-
overflow 属性规定当内容溢出标签框时的显示方式，包括水平方向和垂直方向。
-
overflow-x 只包括水平方向。
-
overflow-y 只包括垂直方向。
-
visible 默认值。内容不会被修剪，会呈现在标签框之外。
-
hidden 内容会被修剪，并且其余内容是不可见的。
-
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
-
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
-
-
-
透明度属性 (opacity,rgba())
-
opacity
-
1、兼容性：IE6、7、8 不支持，IE9 及以上版本和标准浏览器都支持。
-
2、使用说明：设置 opacity 元素的所有后代元素会随着一起具有透明性，一般用于调整图片或者模块的整体 不透明度。
-
-
rgba()
-
1、兼容性：IE6、7、8 不支持，IE9 及以上版本和标准浏览器都支持。
-
-