CSS笔记-下篇

2020-07-21  本文已影响0人  Scincyc

22. CSS高级技巧

目标

22.1 元素的显示与隐藏

22.1.1 display 显示（重点）

👉实际开发场景：

配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛

22.1.2 visibility 可见性 (了解)

22.1.3 overflow 溢出(重点)

| 属性值 | 描述 |

| ----------- | ------------------------------------------ |

| visible | 不剪切内容也不添加滚动条 |

| hidden | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |

| scroll | 不管超出内容否，总是显示滚动条 |

| auto | 超出自动显示滚动条，不超出不显示滚动条 |

👉实际开发场景：

  1. 清除浮动

  2. 隐藏超出内容，隐藏掉, 不允许内容超过父盒子。

22.1.4 显示与隐藏总结

| 属性 | 区别 | 用途 |

| -------------- | ---------------------- | ------------------------------------------------------------ |

| display | 隐藏对象，不保留位置 | 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛 |

| visibility | 隐藏对象，保留位置 | 使用较少 |

| overflow | 只是隐藏超出大小的部分 | 1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围 |

22.2 CSS用户界面样式

22.2.1 鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

| 属性值 | 描述 |

| --------------- | ----------------------------- |

| default | 小白 默认 |

| pointer | 小手（轮播点、搜索图标） |

| move | 移动（商品放大镜） |

| text | 文本（商品数量） |

| not-allowed | 禁止（商品数量为1时不能减少） |

鼠标放我身上查看效果哦：


<ul>

  <li style="cursor:default">我是小白</li>

  <li style="cursor:pointer">我是小手</li>

  <li style="cursor:move">我是移动</li>

  <li style="cursor:text">我是文本</li>

  <li style="cursor:not-allowed">我是文本</li>

</ul>

22.2.2 轮廓线 outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。


outline : outline-color ||outline-style || outline-width

👉一般outline去掉（同li list-style) ：


outline: 0;  或者  outline: none;



<input  type="text"  style="outline: 0;"/>

22.2.3 防止拖拽文本域resize

实际开发中，我们文本域右下角是不可以拖拽：


<textarea  style="resize: none;"></textarea>

2.4 用户界面样式总结

| 属性 | 用途 | 用途 |

| ------------ | -------------------- | ------------------------------------------------------------ |

| 鼠标样式 | 更改鼠标样式cursor | 样式很多，重点记住 pointer |

| 轮廓线 | 表单默认outline | outline 轮廓线，我们一般直接去掉，border是边框，我们会经常用 |

| 防止拖拽 | 主要针对文本域resize | 防止用户随意拖拽文本域，造成页面布局混乱，我们resize:none |

22.3 vertical-align 垂直对齐

👉vertical-align 垂直对齐，它只针对于行内元素或行内块元素，


vertical-align : baseline |top |middle |bottom

22.3.1 图片、表单和文字对齐

👉默认的图片会和文字基线对齐

22.3.2 去除图片底侧空白缝隙

22.4 溢出的文字省略号显示

22.4.1 white-space


white-space:normal ；默认处理方式

white-space:nowrap ；　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

22.4.2 text-overflow 文字溢出


text-overflow : clip ；不显示省略标记（...），而是简单的裁切

text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）

👉注意：一定要先强制一行内显示，再和overflow属性 搭配使用

4.3 总结三步曲


  /*1. 先强制一行内显示文本*/

      white-space: nowrap;

  /*2. 超出的部分隐藏*/

      overflow: hidden;

  /*3. 文字用省略号替代超出的部分*/

      text-overflow: ellipsis;

22.5 CSS精灵技术（sprite) 重点

22.5.1 为什么需要精灵技术

当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。

然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。

👉为什么需要精灵技术（记住）

为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。

出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。

22.5.2 精灵技术讲解

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。

这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。

我们需要使用CSS的

22.5.3 精灵技术使用的核心总结

css精灵技术针对于背景图片，插入的图片img 不需要这个技术

  1. 精确测量，每个小背景图片的大小和 位置。

  2. 给盒子指定小背景图片时， 背景定位基本都是 负值。

22.5.4 制作精灵图(了解)

就是把一些背景小图拼合成一张大图（分辨率72）

大部分下，精灵图都是网页美工做。


我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。

我们可以横向摆放也可以纵向摆放，但是每个图片之间留有适当的空隙

在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。

结束语： 小公司，背景图片很少的情况，没有必要使用精灵技术，维护成本太高。 如果是背景图片比较多，可以建议使用精灵技术。

22.6 滑动门

感受下，现实中的滑动门或者做推拉门是怎么样的

22.6.1 为什么用滑动门

使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容。 最常见于各种导航栏的滑动门。

http://weixin.qq.com/

22.6.2 如何实现

核心技术就是利用CSS精灵（主要是背景位置）和 盒子padding撑开宽度, 以便能适应不同字数的导航栏。

一般的经典布局都是这样的：


<li>

  <a href="#">

    <span>导航栏内容</span>

  </a>

</li>

css样式


* {

      padding:0;

      margin:0;

    }

    body{

      background: url(images/wx.jpg) repeat-x;

        /*水平平铺*/

    }

    .father {

      padding-top:20px;

    }

    li {

      padding-left: 16px;

      height: 33px;

      float: left;

      line-height: 33px;

      margin:0  10px;

      background: url(./images/to.png) no-repeat left ;

    }

    a {

      padding-right: 16px;

      height: 33px;

      display: inline-block;

      color:#fff;

      background: url(./images/to.png) no-repeat right ;

      text-decoration: none;

    }

    li:hover,

    li:hover a {

      background-image:url(./images/ao.png);

    }

👌总结：

  1. a 设置 背景左侧，padding撑开合适宽度。

  2. span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。

  3. 之所以a包含span就是因为 整个导航都是可以点击的。

22.7 拓展@

22.7.1 margin负值之美

1). 负边距+定位：水平垂直居中

一个绝对定位的盒子， 利用 父级盒子的 50%， 然后 往左(上) 走 自己宽度的一半 ，可以实现盒子水平垂直居中。

2). 压住盒子相邻边框

改变层叠上下，可以用定位，定位就会压住 标准流和浮动盒子（如果都是定位可以通过z-index）

22.7.2 CSS三角形之美


div {

width: 0;

    height: 0;

    line-height:0；

    font-size: 0;

border-top: 10px solid red;

border-right: 10px solid green;

border-bottom: 10px solid blue;

border-left: 10px solid #000;

}

css 三角是怎么来的了, 做法如下：

  1. 我们用css 边框可以模拟三角效果

  2. 宽度高度为0

  3. 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了

  4. 为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;

上一篇 下一篇

猜你喜欢

热点阅读