定位

• css的定义机制：标准流、浮动、定位

1.定位原理

• float属性让元素水平移动
• margin属让元素相对与本身位置移动
• css中定位属性允许元素相对于本身的位置，相对与父元素、浏览器窗口位置调整
• 网页中出现覆盖关系。优先考虑使用定位技术
• 定位偏移属性
  * top属性
  * bottom属性
  * left属性
  * right属性
  属性值：auto|inherit|length|百分比
  注意：定位偏移属性不能单独使用，必须与定位属性配合使用才会有效

2.定位属性

• 1）position:static:默认值
  • 静态定位，相当于没有定位：元素出现在正常文档流中
  • 不会受到top|bottom、left|right属性影响
• 2）position:relative;相对定位
  * 相对于元素本身的位置调整；占位依然在原位置
  * 使用
  元素微调：做绝对定位元素的参照元素
  * 特性
  > 不影响元素本身的特性
  > 不会使元素脱离正常文档流——占位
  > 如果没有设置定位偏移属性，对元素本身没有影响。如果有定位偏移属性，相对于元素原来的位置偏移；
  > 提升层级
  - 3）position：absolute;绝对定位
  * 相对于最近的定位父元素（定位父级）定位
  * 特性
  > 1.元素脱离正常文档流，不占位
  > 2. 有定位父级，相对于定位父级发生位移偏移；如果没有定位父级，相对于整个文档发生偏移
  > 3.使没有设置宽高的块级元素宽度自适应，使行级元素支持宽、高
  > 4. 提升层级
  * 绝对定位使用步骤
  > 1.为要做特殊定位的盒子（定位盒），添加：position:absolute;绝对定位，设置定位偏移属性
  top:0|bottom：0；
  left:0;|right:0;
  > 2.定位盒的父级盒（定位父级）,添加
  position:relative:相对定位
  > 回到定位盒，通过top|bottom、left|right属性进行精确位置的调整
  • 4） position:fixed；固定定位
    *相对于浏览器窗口的四个角的位置定位
    * 特性
    > 1.元素脱离正常文档流，不占位
    > 2.始终相对于浏览器窗口的四个角为原点进行定位；不会随页面的滚动而滚动
    >3.使没有设置宽度的块级元素高度自适应；使行级元素支持宽高
    > 4.提升层级
    • 使用 ：固定定位的绝对居中

      width:;
      height:;
      position:fixed;
      top：0；
      bottom:0;
      left:0;
      right:0;
      marign：auto;

• relative相对定位占位；absolute绝对定位：fixed固定定位不占位

3定位技巧——绝对居中（水平，垂直居中）

• 使用margin:auto;实现有width属性和hieght属性的绝对定位元素的居中

.wrap1 div{
width:100px;
height：100px;
position：absolute；
top：0；
bottom：0；
left:0;
right:0;
margin:auto;
}

• 使用margin负间距实现具有width属性和height属性的绝对定位元素的居中

  .wrap2 div{
  width；200px;
  height:100px;
  position:absolute;
  left:50%; 定位父元素宽度的一半
  top:50% 定位父元素高度的一半
  margin-left:100px; 元素本身宽度的一半
  margin-top:50px;元素本身高度的一半

• margin:auto:实现盒子的绝对居中有兼容问题

4.定位中存在的问题——层级问题

• 元素添加了定位属性（相对定位，绝对定位，固定定位）之后，可以覆盖在页面的其他元素上
• 后面加载的定位元素会覆盖先加载的定位元素
• z-index属性：设置定位元素的叠放次序
  • 属性值没有单位，取值可以使正整数，负整数，0
  • 属性值越大叠放次序越高
  • 属性值相同按照结构中书写顺序，后来者居上
  • 正值向上调整层级；负值向下调整层级

1.z-index属性需要与positon:relative|absolute|fixed:配合使用才会有效
2.如果同时有margin:0 auto；float:left|right;position:absolute|fixed:则:position属性有效
3.如果同时有margin:0 auto；float:left|right:；position:relative属性；则float属性有效

浮动和定位对比

css2中能够脱离正常文档流的属性

• float:left|right
  • 脱离正常文档流，但不脱离文本流
• position：absolute|fixed;
  • 脱离正常文档流，又脱离文本流

 > 注意：所有元素都能使用以上的属性
 > 元素脱离正常文档流之后，不再区分块级元素和行级元素，都具有相同的属性；没有设置宽度，宽度由内容撑开；可以设置盒模型属性

透明度

1、rgba(r,g,b,a)颜色模式——颜色透明

• 兼容性：IE6,7,8下不兼容，IE9+支持
• 使用
  • background-color属性，color属性，border-color属性等设置颜色透明
  • 语法

    rgba(r,g,b,a)
    r-red 红色 取值范围0-255
    g-green 绿色 取值范围0-255
    b-blue 蓝色 取值范围0-255
    a-alpha 透明度 取值范围0~1之间表示半透明，0表示完全透明，1表示完全不透明
    超出范围的值将被截止最近的极限值

2.opacity属性 透明度 ——元素透明

• 兼容性：IE6,7,8下不兼容，IE9+支持
• 使用
  • 将内容（及所有的后代）、背景一起透明
• 取值
  • 范围0~1之间表示半透明，0表示完全透明，1表示完全不透明

3.filter属性——元素透明

• 兼容性：仅仅支持IE6,7,8,9,IE10及以上被废除
• 使用
  • IE浏览器专属
• 语法

  filter:Alpha(opacity=n);
  n的取值范围0~100之间表示半透明，0表示完全透明，100表示完全不透明

显示和隐藏的方法

• 1.display属性

  • display:none;元素隐藏，不占物理空间
  • display:bloack;元素显示

• 2.opacity属性

  • opacity：0；元素透明，占位空间仍然存在
  • opacity：1；元素不透明

• 3.visibility属性

  • visibility：hidden;元素隐藏，占位空间仍然存在
  • visibility: visible;元素显示

• 5.设置元素位置让其.消失

  • 使用position属性，用z-index属性遮盖

  例如:
  .box{
  width:100px;
  height:100px;
  position:absolute;
  z-index:-1; 此时其父元素的z-index值要比这个大
  }

• 6.overflow:hidden;属性，将要隐藏的元素移动到父元素之外

父元素
.box{
width:100px;
height:100px;
overflow:hidden;
}
子元素
.son{
  margin-top:100px;
}
这样元素就会超出父元素，父元素设置了溢出隐藏就会隐藏超出的子元素

• 7.将元素的font-size,line-height,width,height属性的属性值都设置为0

border-radius属性

• border-radius:npx; 四个角都有npx的圆角
• border-radius:npx mpx; 左上角和右下角，左上角和左下角
• border-radius:npx mpx xpx;左上角， 右上角和左下角，右下角
• border-radius:npx mpx xpx ypx;左上角，右上角，右下角 ，左下角
• border-radius:border-top-left-radius,border-top-right-radius,border-bottom-right-radius,border-bottom-left-radius;
  左上角，右上角，右下角 ，左下角