CSS高级样式

  • A+
所属分类:Web前端
摘要

1 元素的显示与隐藏   1.1 display(使用较多,配合js做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单,应用广泛)

1 元素的显示与隐藏

 


 

1.1 display(使用较多,配合js做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单,应用广泛)

  • display:none 隐藏(先隐藏元素,不保留位置)
  • dispaly:block 除了转换成块级元素以外,还可以显示元素。

1.2 visibility

  • visibility:hidden 隐藏(先隐藏元素,保留位置)
  • visibility:visible 显示

1.3 overflow(可以清除浮动,保证盒子里面的内容不会超出盒子范围)

  • overflow:hidden 溢出隐藏,超出盒子大小部分隐藏。
  • overflow:scroll 显示滚动条 不会超出盒子大小,内容可以显示全。总是会显示
  • overflow:auto 如果超出就显示滚动条,如果不超出就不显示滚动条。

2 CSS用户界面样式

 


 

2.1 鼠标样式cursor

  • cursor:default 白色箭头
  • cursor:pointer 小手
  • cursor:move 移动
  • cursor:text 文本
  • cursor:not-allowed 禁止

2.2 轮廓 outline

  • outline:0 outline:none

2.3 防止拖拽文本域 resize

  • resize:none

3 vertical-align 垂直居中(只针对行内元素、行内块元素垂直居中)

 

  • vertical-align:baseline | middle |top | bottom

 


 

3.1 图片、表单和文字对齐

  •  <img src="#" class="img" >对齐居中的文字  .img{vertical-align:middle;}

3.2 去除图片底部空白样式

  • 默认是基线对齐,所以底部有空白缝隙。改为不是基线对齐vertical-align:bottom | top | middle
  • 块级元素对vertical-align无效,所以不会有基线对齐的问题 display:block

4 溢出的文字用省略号显示

 


 

  • 先强制一行内显示文本white-space:nowrap 除遇到<br>  white-space:nomal(文字显示不开时,自动换行)
  • 超出部分进行隐藏 overflow:hidden
  • 文字溢出用省略号替代 text-overflow:ellipsis

5 CSS精灵技术(sprite)为了有效的减少服务器接收和发送请求的次数,提高页面加载的速度。

 


 

  • background-image
  • background-repeat
  • background-position 精确测量每个背景图片的大小和位置 值为负值(x,y)

5.1 制作精灵图

  • 精灵图上放的都是背景图片,插入图片不能往上放。
  • 我们可以横向摆放,也可以纵向摆放,但是需要留有空隙。
  • 在精灵图的最底端,留有空隙,方便再次添加精灵图。

6 滑动门

 


 

为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术。它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部文本内容,可用性更强。最常见用于各种导航栏的滑动门。

  • 经典布局
    • <a href="#">
    • <span>导航栏内容</span>
    • </a>
  • a设置左侧背景 padding撑开合适的宽度
  • span设置右边背景 padding撑开合适的宽度 其余由文字继续撑开宽度
  • 因为整个导航栏都是链接,所以a要包含span。
  • 因为是滑动门,左右推拉,跟文字内容多少有关系,此时需要用到文字撑开盒子,就要用到行内块元素。
    • a{display:inline-block;height}

7 拓展

 


 

 

7.1 margin负值之美

  • 负边距+定位:水平垂直居中 一个绝对定位的盒子,利用父级盒子的50%,然后减去自己宽度的一半,可以实现盒子的水平垂直居中。
  • 突显某个盒子
    • margin-left:-1px   margin-top:-1px
    • div:hover{border:1px solid blue; } 变色后,会压住盒子边缘
    • 保证盒子为定位(相对定位),才会压住浮动和标准流。定位的盒子通过Z-index实现层级关系

7.2 CSS三角形之美

  • width:0;
  • height:0;
  • border-top:10px solid red;
  • border-right:10px solid transparent;
  • border-left:10px solid transparent;
  • border-bottom:10px solid transparent;
  • 简写为:
    • width:0;
    • height:0;
    • border-style:solid;
    • border-width:10px;
    • border-color:red transparent transparent transparent;
    • font-size:0;
    • line-height:0;

 

可以模拟三角形效果,只保留一个边框,其他都改为透明色。font-size ling-height 照顾低版本浏览器兼容性