9-1 CSS高级技巧

元素的显示和隐藏 CSS用户界面样式 vertical-align 溢出的文字隐藏 CSS精灵技术滑动门

20.1 元素的显示和隐藏

20.1.1 display来控制显示和隐藏（重点）

display: none;     隐藏对象，并且不保留位置
display: block;    除了转换为块级元素外，同时还有显示元素的意思

20.1.2 visibility显示和隐藏

visibility: visible;    对象可视
visibility: hidden;    对象隐藏，保留位置

20.1.3 overflow 溢出（重点）

overflow: visible;    不剪切内容也不添加滚动条
overflow: hidden;   不显示超出对象尺寸的内容，超出隐藏     
overflow: scroll;     不管内容是否超出对象尺寸，总是显示滚动条（傻瓜）
overflow: auto;      超出显示滚动条，不超出不显示滚动条（智能）

显示和隐藏小结：

属性	区别	用途
display	隐藏对象，不保留位置	配合js做特效，比如下拉菜单，原先没有，鼠标经过，显示出来。应用极为广泛
visibility	隐藏对象，保留位置	使用较少
overflow	只是隐藏超出的部分	1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

**a里面可以放块级元素。**

20.2 CSS用户界面样式

20.2.1 鼠标样式cursor

cursor: default;       小白，默认
cursor: pointer;       小手
cursor: move;          移动
cursor: text;          文本
cursor: not-allowed;   禁止

更多鼠标样式

20.2.2 轮廓线outline

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

样式写法和border同理，顺序没有要求。

　　实际开发中一般直接统一把表单设置为无轮廓线：（如果有文本域也要设置）

input { outline: none; }
input { outline: 0; }
两者选一个。

20.2.3 防止用户拖拽文本域resize

resize: none;

用户界面样式小结：

属性	作用	用途
鼠标样式	更改鼠标样式cursor	样式很多，重点记住pointer
轮廓线	表单默认outline	outline 轮廓线，我们一般直接去掉，border边框，我们倒是经常使用
防止拖拽	主要针对文本域resize	防止用户随意拖拽文本域，造成页面布局混乱，我们用resize: none;

20.3 垂直居中vertical-align

　　vertical-align 只针对行内元素或者行内块！

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

　　再复习一下：

　　一行文字有四条线组成：

　　顶线、中线、基线、顶线。

注意：vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，

特别是行内块元素，经常用来控制图片/表单与文字的对齐。属性设置到图片上。

20.3.1 【vertical-aign 控制图片/表单与文字的对齐】

例子（这个太可爱了，一定要截过来。AWSL~）

20.3.2 【去除图片底侧空白缝隙】

　　原理：因为图片或者表单等元素，它的底线默认是和父级盒子的基线对齐的。所以图片底侧会产生一个空白缝隙。

　　解决方法一：让图片不要和基线对齐。

vertical-align: middle | top | bottom    只要不写基线baseline就好。

　　解决方法二：将img行内块转化为块元素。行内元素才会有默认基线对齐的设定。

display: block;　　将行内块转换为块级元素。

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

20.4.1（三步缺一不可）white

white-space: nowrap;　　它的默认属性是white-space: normal;

原理：如果white-space不写no-wrap,那么就能换行了，换行了肯定能显示全内容，那还怎么实现溢出文字用省略号显示？

20.4.2（三步缺一不可）

overflow: hidden;

原理：超出隐藏。

20.4.3 （三步缺一不可）

text-overflow: ellipsis;    省略号~

原理：文字用省略号替代超出的部分。

20.5 CSS精灵技术（sprite）（重点）

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

然而，一个网页中往往会用到很多小的背景图像作为装饰，当网页中图像过多时，服务器就会频繁地接受和发送请求，

会大大降低页面的加载速度。

这时，精灵技术就应运而生，就是为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。

　　用法：

background-image
background-repeat
background-position属性进行背景定位
其中最关键的还是使用background-position 属性精确地定位。
第二关键的是给盒子指定小背景图片时，背景定位基本都是负值。（因为盒子和背景图片一开始是左对齐，然后背景图片的位置要相对于盒子要向上移动，向左移动。）

制作精灵图（了解）（装饰背景图片很多张才用，没几张就不要用，增加维护成本。）

知道了CSS精灵技术其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一章大图。

建议：

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

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

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

流程：PS ----> 新建 ----> 设置宽高（像素），分辨率设置为72像素/英寸（这样代表图上的1像素就是网页里面的1px），然后背景色啥的... ----> 拖拽图层到空白背景剪贴板上，原则参照上面的黄色背景建议， 做完后， ---->存储为,选择PNG格式保存，选中默认选项，确定。

20.6 滑动门

基本代码如下，明白原理就好。

<a href="#">
    <span>首页</span>           html样式
</a>


a {
    display: inline-block;
    height: 33px;
    background: url(images/to.png) no-repeat;
    padding-left: 15px;
}
a span {                                                        css样式
    display: inline-block;
    height: 33px;
    background:url(images/to.png) no-repeat right top
    padding-right: 15px;
}

解析：

a设置背景左侧， padding撑开合适宽度（这里用padding-left）。
span设置背景右侧，padding撑开合适宽度（这里用padding-right），剩下由文字继续撑开宽度。
之所以a包含span 则是因为整个导航都是可以点击的。

posted @ 2021-01-01 10:32 Nelson-Yen 阅读(171) 评论(0) 收藏举报

刷新页面返回顶部

9-1 CSS高级技巧

公告