CSS3重点标签属性总结

标签	解释
a:link	没有访问过的浏览器
a:visited	访问过的浏览器
a:hover	鼠标经过链接时
a:active	鼠标按下链接时

• position定位

值	解释
static	静态定位
relative	相对定位，根据自己原来的位置来移动，继续保留原来的位置（一般是绝对定位的工具人，给父级的定位）
absolute	绝对定位：1、如果没有祖先元素或者祖先元素没有定位则以浏览器为准定位。2、如果祖先元素有定位（相对、绝对、固定定位都可以），则以最近一级的有定位的祖先元素为参照点移动位置.3绝对定位不在占有原来的位置
fixed	固定定位

• 子绝父相的由来
  子绝父相：子级是绝对定位的话，父级要用相对定位
  1、子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
  2、父盒子需要加定位限制盒子在父盒子内显示。
  3、父盒子布局时，需要占有位置，因此父亲只能是相对定位
  这就是子绝父相的由来，所以相对定位经常来定位父级
  总结：因为父级要占有位置，因此是相对定位，子级不需要占位置，则是绝对定位
  注意：加了绝对定位的盒子不能通过margin：0 auto来实现水平居中，通过一下方便实现
  a、left：50% 让盒子在左侧移动到父级元素的水平中心位置
  b、margin-left：-100px; 让盒子左移动到自身宽带的一半
  c、margin-top:100px; 让盒子移动到距离上边距100pxd 位置

• 固定定位
  1、以浏览器的可视化窗口为参照点移动元素
  a、跟父级元素没有任何关系
  b、不能滚动条滚动
  2、固定定位不占有原来的位置
  固定定位是脱标的，其实固定定位也是一种特殊的绝对定位
  固定定位小算法：
  1、让固定定位的盒子 left:50%走到浏览器的可视区（也可以看做是版心）的一半距离
  2、让固定定位的盒子: margin-left版心宽度的一半距离。多走版心宽带的一半距离就可以让固定定位的盒子贴着版心右侧对齐了。
  注意：浮动元素不会压住下面标准来的文字但是固定定位和绝对定位会压住下面标准流的所有内容

• 定位叠放次序 z-index
  1、数值越大约靠上，数值可以是正整数，负数或者是0,默认是auto
  2、如果为定义那个-在最前面，则采用书写顺序叠放，后来者居上
  3、数字后面不能加单位
  4、只有定位的盒子才有z-index属性

{
   z-index:1;} 默认是auto,1比auto大，会排在最上面

- display属性
display:none; 隐藏对象,隐藏后不占有位置
display:block;除了转换为块级元素之外，同时还显示元素的意思

• visibility属性
  visibility 属性用于指定一个元素可见还是隐藏
  a、visibility：visible；元素可见
  b、visibility：hidden；元素隐藏
  visibility 隐藏元素后，继续占有原来的位置

• overflow 溢出

属性值	描述
visible	不剪切内容不添加滚动条
hidden	不显示超出对象的尺寸内容，超出的部分隐藏掉
scroll	不管超出的内容，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

一般情况下，我们都不想让溢出的内容显示出来，因为内容溢出会影响布局，但是如果有定位的盒子，请慎用overflow：hidden 因为它会隐藏多余的部分

Css高级技巧

• 精灵图

css部分：
 span{
   
            display: inline-block;
        
        }
       .p{
   
        width: 100px;
       height: 112px;
       background: url(image/abcd.jpg) no-repeat -493px -276px;

       }
       .i{
   
        width: 60px;
       height: 108px;
       background: url(image/abcd.jpg) no-repeat -327px -142px;

       }
       .n{
   
        width: 108px ;
       height: 109px;
       background: url(image/abcd.jpg) no-repeat -