静态定位，固定定位，相对定位，绝对定位，显示和隐藏，圆角边框属性06

day06

布局核心：盒模型(间距) 浮动（并排） 定位（覆盖+特殊位置）

定位类型position

静态定位

position:static；

相对定位

position:relative;

1. 能使位置发生变化

2. 参考对象：自身初始位置

3. 不脱离标准流（保留原来位置）

4. 不适合布局（压盖，特殊位置）因为会留空白

   作用：1. 微调元素位置（相当于外边距）2. 辅助绝对定位

绝对定位

position:absolude;

1. 能使位置发生变化

2. 参考对象：左上以body做参考，右下以浏览器窗口做参考

3. 脱离标准流和文本流（不保留原来位置）

4. 非常适合布局（压盖）因为它不仅脱离标准流 还脱离文本流

   绝对定位的盒子是以距离（HTML）它最近的拥有定位属性（除了静态都可以）的父级盒子作为参考

   作用：1. 微调元素位置（相当于外边距）2. 辅助绝对定位

固定定位

position:fixed;

1. 能使位置发生变化

2. 参考对象：以浏览器可视窗口做参考，不随滚动条滚动而滚动

3. 脱离标准流

4. 适合布局（压盖） 限制：不随滚动条滚动而滚动

定位实现盒子的水平和垂直居中

方法一：

div{
    position:absolute/fixed;
    //向右走父盒子宽度的一半
    left:50%;
    //向下走父盒子高度的一半
    top:50%;
    //向上走自己盒子高度的一半
    margin-top:-h/2;
    //向左走自己盒子宽度的一半
     margin-left:-w/2;
    
}

方法二：

	position:absolute;
    left:0;
    top:0;
  	right:0;
    bottom:0;
	margin:auto
	width:50px;
	height:50px;

两个方法都要求盒子必须要有宽高

定位坐标值

left:
top:
right:
bottom:

(left,top) or (right,top) or (left,bottom) or (right,bottom)
一个坐标即可确定盒子位置

层级属性

z-index:设置定位盒子的显示顺序 值越大 越向上展示（越在屏幕前的显示）默认值是0
标准流盒子的层级属性 z-index:0;

总结：

定位类型	是否发生位置变化	参考对象	适合布局	是否脱离标准流
static	no	无	不适合	无
relative	yes	自身初始位置	不适合	不脱离（因为保留原来位置）
absolute	yes	初始body，子绝父相	非常适合	脱离（不占据界面位置）
fixed	yes	浏览器窗口	适合	脱离

脱标的定位属性对于元素类型的影响

行内+定位（absolute+fixed）不区分类型私有密闭区域（BFC盒子）什么属性都可以设置

行内块+定位（absolute+fixed）不区分类型私有密闭区域（BFC盒子）什么属性都可以设置

块类型+定位（absolute+fixed）不区分类型私有密闭区域（BFC盒子）什么属性都可以设置

显示和隐藏

第一种：

display:block显示/none隐藏;

不保留原来位置（在HTML结构树直接移除掉）适合于不频繁切换显示和隐藏

第二种：

visibility:visible显示/hidden隐藏

保留原来位置（在HTML结构树上还是有的 透明度为0）适合于频繁切换显示和隐藏

盒子溢出处理

overflow:hidden隐藏/visible显示/scroll滚动

圆角边框属性

border-radius:10px;四个角都是10px弧度
border-radius:10px 20px;左上和右下角是10px弧度，右上和左下角是20px弧度
border-radius:10px 20px 30px;左上是10px弧度，右上和左下角是20px弧度，右下角是30px弧度
border-radius:10px 20px 30px 40px;左上是10px弧度，右上是20px弧度，右下角是30px弧度，左下角是40px弧度

border-radius:50%;  圆   椭圆

border-radius:10px 20px 30px 40px/20px 30px 40px 50px;  // 水平方向弧度/垂直方向弧度