CSS高级样式

标签：pos   hidden   模拟   class   parent   def   pac   防止   背景图片   

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 照顾低版本浏览器兼容性

CSS高级样式

标签：pos   hidden   模拟   class   parent   def   pac   防止   背景图片   

原文地址：https://www.cnblogs.com/xiaobianer/p/14242434.html