Day08CSS定位、光标类型、圆角边框、溢出部分、元素隐藏、透明度

一.定位

网页搭建需要用到几种布局方式：标准流，浮动，定位三种
css书写: 1. 定位 / 浮动 / display ; 2. 盒子模型; 3. 文字属性

1. 定位的基本介绍
   

2. 定位的基本使用
   
   

3. 静态定位

4. 相对定位
   

           1. 
   

占有原来的位置，仍然具体标签原有的显示模式特点， 改变位置参照自己原来的位置

如果left和right都有，以left为准；top和bottom都有，以top为准

5.绝对定位
绝对定位:
先找已经定位的父级, 如果有这样的父级就以这个父级为参照物进行定位;
有父级, 但父级没有定位, 以浏览器窗口为参照为进行定位
特点
1. 脱标, 不占位
2. 改变标签的显示模式特点: 具体行内块特点(在一行共存, 宽高生效)

• 子绝父相
  绝对定位查找父级的方式: 就近找定位的父级, 如果逐层查找不到这样的父级, 就以浏览器窗口为参照进行定位
  学成在线标签

.box .content li {
position: relative;
}
.box .content li .hot {
position: absolute;
top: 4px;
right: -4px;
}

效果图

**绝对（absolute）定位的盒子不能使用margin aotu来实现 **
绝对定位的盒子模型具备行内块特点，加宽高生效，如果没有宽度也没有内容，宽度为0；如果子级和父级宽度相同，子级宽度可以写成width:100%

• 固定定位
  
  固定定位特点：1、脱标，不占位置。2.改变位置参考浏览器窗口。3.具备行内块特点（加宽高生效，没有宽高也没有内容则宽度为0）

• 元素的层级关系
  

默认情况下, 定位的盒子 后来者居上 ,
z-index:整数; 取值越大, 显示顺序越靠上, z-index的默认值是0
注意: z-index必须配合定位才生效

二.装饰

浏览器把行内和行内块标签当成文字处理，默认是基线（baseline）对齐

胶囊状: 长方形, border-radius取值是高度的一半

overflow


visibility:hidden:占位显示，display不占位