CSS高级技巧

CSS高级技巧  注释快捷键ctrl+/

1.精灵图: 为了有效减少服务器接收和发送请求的次数，提高页面

的加载速度。

 使用精灵图核心：

1. 主要针对背景图片使用，把多个小背景图片整合到一张大图片中。
2. 这个大图片也叫sprites 精灵图 或者 雪碧图。
3. 移动背景图片位置，此时可以使用background-position.
4. 移动的距离就是目标图片的x和y坐标，注意网页中的坐标有所不同。
5. 图片往上往左走都是负值。
6. 使用精灵图时需要精确测量，每个背景图片的大小和位置。

background-position: x y;  例如： background-position: -182px 0;

或者 background: url() no-repeat x y;

1. 字体图标：iconfont 展示的是图标，本质是文字

   优点：轻量级，灵活性，兼容性。

1. 字体图标的下载

 图标下载网站：

   icomoon字库 http://icomoon.io免费外国网站

   阿里Iconfont字库 http://www.iconfont.cn/ 免费

从已下载的图标压缩包中选择fonts文件夹，并将文件夹放入页面根目录下，即与images文件夹并列。

 

1. 字体图标的引入（引入到我们html页面中）

  一定注意字体文件路径的问题。将下面这段代码粘贴到css中，或者html文件的<style></style>中

@font-face{

font-family: ‘icomoon’;

src: url(‘fonts/icomoon.eot?7kkyc2’);

src:url(‘fonts/icomoon.eot?7kkyc2#iefix’) format (‘embedded-opentype’),

url(‘fonts/icomoon.ttf?7kkyc2’) format(‘truetype’),

url(‘fonts/icomoon.woff?7kkyc2’) format(‘woff’),

url(‘fonts/icomoon.svg?7kkyc2#icomoon’) format(‘svg’);

font-weight: normal;

font-style: normal;

font-display: block;

}

然后在下载的文件夹中看到demo.html这个文件，双击该文件后，在需要的图标的搜索框右端有个小框，复制粘贴到html需要加入图标的位置文本中。

<span>复制粘贴的小框</span>

1. 字体图标的追加（以后添加新的小图标）

  打开网址，选择“icomoon app”，点击 “import icons”, 选择icommon文件中的selection.json文件。Yes，然后直接在下面选择所需的图标就行

1. CSS三角：

   width：0；

   height：0；

 /为了照顾兼容性

   Line-height: 0;

   Font-size: 0;/

Border: 5px solid transparent;（透明）

Border-bottom-color: pink;

1. CSS用户界面样式：

1. 更改用户的鼠标样式： 鼠标样式cursor

     Li { cursor: pointer; }

常见的鼠标样式：  def ault  小白 默认

                  pointer   小手

                  move   移动

                  text    文本

                  not-allowed    禁止

1. 轮廓线outline

  取消搜索框中的轮廓线： 给表单添加outline: 0;或者outline: none;就可以去掉蓝色轮廓线。

 

1. 防止拖拽文本域  resize

   textarea { resize: none;}

1. vertical-align: 用于设置图片或者表单（行内块元素）和文字垂直对齐。只针对行内元素或者行内块元素。

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

baseline 默认。元素放置在父元素的基线上。

top 把元素的顶端与行中最高元素的顶端对齐。

middle 把此元素放置在父元素的中部。

bottom 把元素的顶端与行中最低的元素的顶端对齐。

使图片和文字同时垂直居中：

   在图片的属性中加入vertical-align: middle；

1. 解决图片底部默认空白缝隙问题

1. 给图片添加vertical-align: middle | top | bottom等（推荐方法）
2. 将图片转换为块级元素： display：block;

1. 溢出的文字省略号显示

1. 单行文本溢出显示省略号。

   必须满足三个条件：

1. 先强制一行内显示文本white-space: nowrap; （默认normal自动换行）

2. 超出部分隐藏：overflow:hidden;

3. 文字用省略号替代超出的部分:text-overflow: ellipsis;

  2. 多行文本溢出显示省略号

      有较大兼容性问题，适合webKit浏览器或移动端（移动端大部分是webKit内核）

       overflow: hidden;

       Text-overflow: ellipsis;

     /*弹性伸缩盒子模型显示*/

       display:-webkit-box;

    /*限制在一个块元素显示的文本的行数*/

       -webkit-line-clamp:2;

    /*设置或检索伸缩盒对象的子元素的排列方式*/

       -webkit-box-orient:vertical;

常见的布局技巧：

1. margin负值的运用

1. 盒子边框border:1px; 则让每个盒子margin往左侧移动-1px,正好压住相邻盒子边框。
2. 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位position:relative;  border：1px solid blue;（保留位置），如果有定位，则加z-index: 1;）

（设置一排盒子，当鼠标移动时出现边框）

方法一：ul li{ float: left;  list-style: none;  width: 150px;  height: 200px;  border: 1px solid red;l  margin-left: -1px;}

ul li: hover{ position: relative; border: 1px solid blue;}

方法二：

ul li{ position: relative;  float: left;  list-style: none;  width: 150px;  height: 200px;  border: 1px solid red;l  margin-left: -1px;}

ul li: hover{z-index: 1; border: 1px solid blue;}

1. 文字围绕浮动元素

例如设置一个照片和文字一行水平居中，将照片的盒子设置浮动即可。

.pic{ float:left; width: 120px; height: 60px; margin-right: 5px;}

.pic img{width: 100%}

<div class=”pic”><img></div>

<p>文本</p>

 

1. 行内块的巧妙运用  不需要设置ul,li，margin等，直接转换为行内块元素（页脚就可以运用此功能）

.box {

.box {

       1. CSS三角强化

             非等边直角三角形的制作：

               将左边和下边的边框宽度设置为0，把上边框宽度调大，把上边框颜色调为透明色。

               border-top: 100px solid transparent;

               border-right: 50xp sokid skyblue;

               border-bottom: 0 solid blue;

               border-left: 0 solid green;

               也可以这样写：

               border-color: transparent red transparent transparent;

border-style: solid;

                border-width:  100px  50px  0  0;

1. CSS初始化

  css初始化是指重设浏览器的样式。也称CSS reset。

   css初始化代码：

 {

;

    padding: 0;

}

 

倾斜 */

,

i {

Unicode编码字体：

黑体： \9ED1\4F53

宋体: \5B8B\4F53

微软雅黑: \5FAE\8F6F\96C5\9ED1

    font-style: normal;

}

/* 去掉li的小圆点 */

li {

    list-style: normal;

}

img {

    /* border: 0; 照顾低版本浏览器，如果图片外面包含了链接会有边框的问题 */

    border: 0;

    vertical-align: middle;

    /*取消图片底侧有空白缝隙的问题 */

}

/* 当我们鼠标经过button按钮时，鼠标变成小手 */

button {

    cursor: pointer;

}

/* 默认链接颜色，取消下划线 */

a {

    color: #666;

    text-decoration: none;

}

/* 鼠标经过变成红色  */

a:hover {

    color: red;

}

/* 指定字体 */

button,

input {

    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53"，sans-serif;

    /* 微软雅黑                                                     宋体 */

}

body {

    /* 抗锯齿形，让文字更清晰 */

    -webkit-font-smoothing: antialiased;

    background-color: #fff;

    /* 所有body的文字大小为12px,为1.5倍行高 */

    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;

    color: #666;

}

/* 隐藏元素 */

.hide,

.none {

    display: none;

}

/* 清除浮动 */

.clearfix:after {

    visibility: hidden;