CSS基础六

• 元素的定位

position 静态 static 默认值 标准流 不能通过偏移值移动 （没啥用）

position相对 relative 相对之前的位置移动 在页面中占位置，不脱标 使用偏移值，进行移动

移动了，就会在原来的地方留下空白

position 绝对 absolute 相对于非静态定位的父元素进行定位 先看父元素是否设置定位 ，设置了定位就以其，父元素的位置进行定位

如果父元素没有定位，则看爷爷有没有定位， 爷爷具有定位，则按照爷爷位置进行定位

如果都没有设置父辈定位。则按照浏览器窗口的可视区域进行定位

position固定 fixed   相对于可视区域，固定位置不动   在页面中不占位置，脱标

设置定位时 需要设置垂直和水平两个方位 定位元素可以压住文字

• 位移

transform：translateX（数值） 水平移动

transform：translateY（数值） 垂直移动

数值相当于自己本身大小来定义位置

• z-index

定位层级默认0 下面的定位元素压上面的元素

z-index +数字 数字越大优先级越高

• 元素装饰   

行内块元素默认基线对齐

圆角标签  border-radius：  

            画圆时border-radius：50% 

     borde-radius： 高度的一半  胶囊按钮

overflow溢出

overflow   visible  溢出可见

   overflow     hidden  溢出隐藏

overflow   scroll   有无溢出都显示滚动条

overflow  auto  根据是否溢出，自动显示或隐藏滚动条  

overflow 中除了visible 都可以创建BFC区域

• 元素本身隐藏 

 visibility：hidden  占标准流位置

display：none   不占标准流位置   display  block 显示隐藏

• 透明度

opacity

0-1的透明度

让元素整体一起改变透明度，包含的子元素也会变透明

         border-collapse

合并表格边框线   

用于table，得到细线边框