CSS ---

目录

一，元素的显示与隐藏

1，display显示隐藏（重点！）

2，visibility（可见性）显示隐藏

3，overflow溢出显示隐藏

二，精灵图

三，字体图标：iconfont

四，CSS三角​编辑

五，CSS用户界面样式

1，更改用户的鼠标样式cursor

2，表单轮廓（轮廓线outline)

3，防止表单域拖拽resize

六，vertical-align实现图片或表单（行内块元素）和文字垂直居中对齐​编辑

七，图片底测空白缝隙解决方案

八，单行文字溢出省略号显示

九，多行文字溢出省略号显示

一，元素的显示与隐藏

本质：让一个元素在页面中隐藏或者显示出来

1，display显示隐藏（重点！）

display：none；隐藏对象。

display：block；除了转换为块级元素外，同时还有显示元素的意思。

display隐藏元素后，不再占有原来的位置。

2，visibility（可见性）显示隐藏

visibility：visible；元素可见

visibility：hidden；元素隐藏

visibility隐藏后，继续占有原来的位置

3，overflow溢出显示隐藏

overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么

auto溢出的时候才显示滚动条，不溢出不显示

scroll溢出和不溢出时都显示滚动条

。。如果有定位的盒子，请慎用overflow：hidden；因为它会隐藏多余的部分

二，精灵图

1，为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术

2，核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了

三，字体图标：iconfont

展示的是图标，本质属于字体

字体图标下载网站：icomoon字库  http://icomoon.io

                                 阿里iconfont字库  http://www.iconfont.cn/

字体图标的引入：

@font-face {

  font-family: 'icomoon';

  src:  url('fonts/icomoon.eot?4hsnyu');

  src:  url('fonts/icomoon.eot?4hsnyu#iefix') format('embedded-opentype'),

    url('fonts/icomoon.ttf?4hsnyu') format('truetype'),

    url('fonts/icomoon.woff?4hsnyu') format('woff'),

    url('fonts/icomoon.svg?4hsnyu#icomoon') format('svg');

  font-weight: normal;

  font-style: normal;

  font-display: block;

}

字体图标的追加：

四，CSS三角

五，CSS用户界面样式

1，更改用户的鼠标样式cursor

2，表单轮廓（轮廓线outline)

input ,textarea {

outline :none；

}

3，防止表单域拖拽resize

textarea { resize : none ; }

六，vertical-align实现图片或表单（行内块元素）和文字垂直居中对齐

七，图片底测空白缝隙解决方案

八，单行文字溢出省略号显示

九，多行文字溢出省略号显示（了解）