CSS学习笔记

Posted 2021-06-29 coderkey

十二，CSS高级技巧

1，精灵图的使用

1.1，使用精灵图核心总结

（1）方法：

精灵图主要针对于小的背景图片来使用。
主要借助于背景位置来实现：background-position。
一般情况下精灵图都是负值。

（2）注意：

注意网页中的坐标：X轴右边走是正值，左边走是负值；Y轴上边是负值，下边是正值。

2，字体图标

2.1，字体下载

（1）icomoon字库

http://icomoon.io

（2）阿里icofont字库

http://www.icofont.cn/

2.2，字体图标的引用

（1）方法：

把下载包里面的fonts文件夹放入页面根目录下。

（2）声明字体：

   //  把这些字体文件通过CSS引入到我们页面中。
  @font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?op2o9v');
  src:  url('fonts/icomoon.eot?op2o9v#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?op2o9v') format('truetype'),
    url('fonts/icomoon.woff?op2o9v') format('woff'),
    url('fonts/icomoon.svg?op2o9v#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

2.3，字体图标的追加

（1）方法：

打开下载完成的字体图标的里面文件文件，有个selection.json重新上传，然后选中自己想要的新图标，重新下载并替换原来的文件即可。

3，网站 fvicon 图标

3.1，图标

（1）含义：

favicon.ico一般用于作为缩略的网站标志，它显示在浏览器的地址或者标签上。

（2）方法：

1，制作favicon图标
把图标切成PNG图片，然后把PNG图片转换为ico，这需要借助于第三方网站
例如：比特虫http://www.bitbug.net/
2，favicon图标放到网站根目录下 <link rel="shortcut icon" href=" favicon.ico" />
3，html页面引入favicon图标

4，CSS三角做法

4.1，CSS三角

（1）含义：

网页中常见的一些三角形，使用CSS直接画出来就可以了，不必做成图片或者字体图标。

（2）方法：

  div  {
          width:  0;
           height:  0;
   /* 下面两个照顾兼容性 */
           line-height:  0;
           font-size:  0;
    /*  左三角为粉色，其他三角为透明  */
           border: 50px  solid   transparent;
           border-left-color:  pink;    
    }

5，用户界面样式

5.1，什么是界面样式

（1）含义：

所谓界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。

5.2，鼠标样式cursor

（1）含义：

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

（2）语法：

选择器 { cursor: pointer; }

（3）属性值：

属性值	描述
default	小白箭头（默认形状）
pointer	小手
move	移动
text	文本
not-allowed	禁止

5.3，轮廓线outline

（1）问题：

如何取消表单轮廓

（2）方法：

给表单添加outline: 0; 或者 outline: none;样式之后，就可以去掉默认的蓝色边框。

（3）语法：

  input {  outline: none; }

5.4，取消拖拽文本域 resize

（1）问题：

如何取消拖拽文本域，设置文本实际开发中，我们文本域右下角是不可以拖拽的。

（2）语法：

   textarea { resize:  none; }

6，vertical-align 属性应用

6.1，实现行内块和文字垂直居中

（1）含义：

CSS的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。

（2）语法：

vertical-align: baseline | top | middle | bottom

（3）属性值：

值	描述
baseline	默认，元素放置在父元素的基线上
top	把元素的顶端与行中最高的元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐

（4）注意：

用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者块级元素有效。

6.2，解决图片底部默认空白缝隙问题

（1）问题：

图片底侧会有一个空白缝隙，原因是行内块元素和文字是基线对齐的。

（2）方法：

1，给图片添加vertical-align: bottom|middle|top等
2，把图片转换为块级元素display:block;

7，溢出的文字省略号显示

7.1，单行文本溢出显示省略号

（1）语法：

   /*   1，先强制一行内显示文本（不换行）   */
        white-space:  nowrap;     (默认normal 自动换行)
   /*    2，超出的部分隐藏     */
        overflow: hidden;
   /*    3，文字用省略号代替超出的部分   */
        text-overflow:  ellipsis;

7.2，多行文本溢出显示省略号

（1）语法：

  overflow: hidden;
  text-overflow:  ellipsis;
  /*弹性伸缩盒子模型显示*/
  display:  -webkit-box;
  /*限制在一个块元素显示的文本的行数*/
  -webkit-line-clamp:  2;
  /*设置或检索伸缩盒对象的子元素的排列方式*/
  -webkit-box-orient:  vertical;

（2）注意：

多行文本溢出显示省略号，有较大兼容性问题，适合于webkit浏览器或者移动端（移动端大部分是webkit的内核。

8，常见布局技巧

8.1，margin负值的运用

（1）问题：

1，多个盒子边框有的会重合的问题。
2，鼠标经过某个盒子时，边框会变色，但是右边框会被后面盒子的左边框压住。

（2）方法

1，让每个盒子margin往左侧移动 -1px 正好压住相邻盒子边框。
2，提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置），如果有定位，则加z-index）

8.2，文字围绕浮动元素的运用

（1）问题：

如何实现一个盒子装有图片和文字，并且图片在左边，文字在右边。

（2）方法：

只需给图片的盒子加左浮动就是行了，文字自然在右边环绕它。

8.3，CSS三角的运用

（1）问题：

做一个直角三角形，定位在某个盒子上。

（2）方法：

  .box {
        width:  0;
        height:  0;
   /*  把上边框宽度调大  */
        border-top:  100px  solid  transparent;
        border-right:  50px solid pink;
   /*  左边和下边的边框宽度设置为0  */
        border-bottom:  0  solid  blue;
        border-left:  0  solid  green;
    }

   // 简写：
    width:  0;
    height:  0;
    border-color:  transparent   pink   transparent   transparent;
    border-style:  solid;
    border-width:  100px   50px   0   0;

9，CSS初始化

（1）含义：

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化。每个网页都必须首先进行CSS初始化。
简单理解：CSS初始化是指重设浏览器的样式。（也称为CSS reset）。

（2）语法：

/* 把我们所有标签的内外边距清零 */
* {
margin: 0;
padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
font-style: normal
}
/* 去掉li 的小圆点 */
li {
list-style: none
}
img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle
}
button {
/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
cursor: pointer
}
a {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
button,
input {
/* "\\5B8B\\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\\5B8B\\4F53", sans-serif
}
body {
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
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;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}

---