05_CSS进阶技巧

Bertha 。 2023-10-16 12:59 32阅读 0赞

### 1 CSS 规范 ###

遵循以下顺序

*  布局定位属性：display/position/float/clear/visibility/overflow（建议 display 第一个写）
 *  自身属性：width/height/margin/padding/border/background
 *  文本属性：color/font/text-decoraction/text-align/vertial-align/white-space/break-word
 *  其他属性（CSS3）：content/cursor/border-radius/box-shadow/text-shadow/

### 2 页面布局整体思路 ###

*  必须确定页面的可视区
 *  分析页面中行模块，以及每个行模块中的列模块
 *  一行中的列模板经常浮动布局，先确定每个列的大小，之后确定列的位置
 *  遵循先写结构，后写样式的原则
 *  先理清楚布局结构，然后再开始编写代码

### 3 字体图标 ###

#### 3.1 字体图标的来由 ####

字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。

精灵图是有诸多优点的，但是缺点比较明显。

*  图片文件比较大
 *  图片本身放大缩小会失真
 *  一旦图片制作完毕想要更换，比较复杂

此时，有一种技术的出现，很好的解决了以上问题，就是**字体图标 iconfont**

**字体图标**可以为前端工程师提供一种方便高效的图标使用方式，**展示的是图标，本质属于字体**。

#### 3.2 字体图标的优点 ####

*  轻量级：一个图标字体比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器的请求
 *  灵活性：本质其实是文字，可以很随意的改变颜色，产生阴影，透明效果，旋转等
 *  兼容性：几乎支持所有的浏览器

注意：字体图标不能代替精灵图，只是对图标部分进行了优化。

总结：

*  如果遇到一些结构和样式比较简单的小图标，就用字体图标
 *  如果遇到一些结构和样式较复杂的小图标，仍然选用精灵图

#### 3.3 字体图标使用 ####

字体图标是一些网页常见的小图标，我们直接网上下载即可。因此使用步骤可以分为：

*  字体图标的下载
 *  字体图标的引入（引入到我们html页面中）
 *  字体图标的追加（以后添加新的小图标）

##### 3.3.1 字体图标的下载 #####

**推荐下载网站：**

*  [icomoon 字库][icomoon] 比较全面，国外服务器，打开速度你懂的。
    
    点击 IcoMoon App->选择需要的图标->点击Generate Font->点击下载
 *  [阿里 iconfont 字库][iconfont] 免费图标库。但是需要登录 http://www.iconfont.cn/

##### 3.3.2 字体图标的引入 #####

下载完成后，原文件不要删除，后面会用的到。

我们以 icomoon 字库网为例，将下载包解压，解压之后的文件如图：

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

![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传][20230724024159.png_origin_url_https_3A_2F_2Fgitee.com_2Frawait_2Frwpicgo_2Fraw_2Fmaster_2Fteaching_2F2021-12_2F202112092248750.png_pos_id_img-M5BayUDA-1695376546342]

*  **在CSS样式中全局声明字体：简单理解把这些字体通过css引入到我们页面中**
    
    **一定要注意字体文件路径问题**

@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;
    }

*  **html 标签内添加小图标**
    
    ![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传][20230724024159.png_origin_url_https_3A_2F_2Fgitee.com_2Frawait_2Frwpicgo_2Fraw_2Fmaster_2Fteaching_2F2021-12_2F202112092258698.png_pos_id_img-h2hi34Qr-1695376546345]
    
    我们打开解压文件中的 demo.html ，复制想要的图标，粘贴进我们的 `<span></span>` 标签中。
    
    给标签定义字体

/* span使用字体图标 */
    span {
        
        font-family: "icomoon";
    }

注意：标签中的 font-family 的值和我们之前引入字体图标的font-family 必须一样，这里均为 icomoon。

##### 3.3.3 字体图标的追加 #####

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。

以 icomoon字库 网为例，点击网站内import icons

把压缩包里面的 selection.json 重新上传，然后选中自己想要新的图标，重新下载压缩包，并替换原来的文件即可。

##### 3.3.4 字体文件格式 #####

不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。

.ttf 格式、.woff 格式、.eot 格式、.svg 格式，不同浏览器支持不同的格式。

#### 3.4 阿里 iconfont 字体图标 ####

##### 3.4.1 新建项目 #####

*  在顶部菜单栏找到->资源管理->我的项目->新建项目
 *  右边点击新建项目，用于保存自己常用的图标

##### 3.4.2 添加购物车 #####

*  项目新建完成后，需要往项目里添加我们要想使用的图标
 *  顶部菜单找到图标库，搜索⼀个想要的图标，然后添加到购物⻋

##### 3.4.3 添加图标到项目中 #####

*  添加到购物车完成后，点击右上角的购物车图标，选择添加至项目
 *  选择我们刚刚创建的项目->点击确定
 *  之后自动跳转到对应的项目里了

##### 3.4.4 引入文件 #####

*  点击项目中下载至本地按钮，将解压的文件夹整体放入项目中，在项目中引用文件中的 iconfont.css 文件
 *  或者点击查看在线链接，生成一个在线地址直接在项目中引用

##### 3.4.5 使用图标 #####

*  首先标签添加一个 iconfont 类名
 *  再给标签添加一个图标对应的类名
 *  图标大小通过 font-size 来调整

### 4 CSS 用户界面样式 ###

#### 4.1 什么是界面样式 ####

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

*  更改用户的鼠标样式
 *  表单轮廓
 *  防止表单域拖拽

#### 4.2 鼠标样式 cursor ####

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

li {
        
        cursor: pointer; 
    }

<table> 
 <thead> 
  <tr> 
   <th align="left">属性值</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">default</td> 
   <td align="left">小白，默认</td> 
  </tr> 
  <tr> 
   <td align="left">pointer</td> 
   <td align="left">小手</td> 
  </tr> 
  <tr> 
   <td align="left">move</td> 
   <td align="left">移动</td> 
  </tr> 
  <tr> 
   <td align="left">text</td> 
   <td align="left">文本</td> 
  </tr> 
  <tr> 
   <td align="left">not-allowed</td> 
   <td align="left">禁止</td> 
  </tr> 
 </tbody> 
</table>

#### 4.3 轮廓线 outline ####

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

input {
        
        outline: none;
    }

#### 4.4 防止拖拽文本域 resize ####

实际页面中，文本域右下角不可拖拽。

textarea {
        
        resize: none;
    }

### 5 vertical-align 属性应用 ###

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

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

vertical-align: baseline | top | middle | bottom

<table> 
 <thead> 
  <tr> 
   <th align="left">值</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">baseline</td> 
   <td align="left">默认，元素放置在父元素的基线上</td> 
  </tr> 
  <tr> 
   <td align="left">top</td> 
   <td align="left">把元素的顶端与行中最高元素的顶端对齐（顶线对齐）</td> 
  </tr> 
  <tr> 
   <td align="left">middle</td> 
   <td align="left">把此元素放置在父元素的中部（中线对齐）</td> 
  </tr> 
  <tr> 
   <td align="left">bottom</td> 
   <td align="left">把元素的顶端与行中最低的元素的顶端对齐（底线对齐）</td> 
  </tr> 
 </tbody> 
</table>

![image-20211209231227334][]

#### 5.1 图片、表单和文字对齐 ####

图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。

此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。

#### 5.2 图片底侧空白缝隙解决 ####

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐（给图片加边框就可以看见）

主要解决办法有两种：

*  给图片添加 `vertical-align : middle | top |bottom` 等（常用方式）
 *  把图片转换为块级元素 `display:block;`，因为块级元素不会有vertical-align 属性

### 6 溢出文字省略显示 ###

#### 6.1 单行文本溢出省略号显示 ####

必须满足三个条件：

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

#### 6.2 多行文本溢出显示省略号显示（了解） ####

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

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

更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。

### 7 常见布局技巧 ###

#### 7.1 margin 负值的运用 ####

两个盒子加边框1px，浮动，贴紧会出现 1 + 1 = 2px

给右边盒子添加margin-left: -1px

正数向右边走，负数向左边走

当我们有多个盒子时的解决办法：

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

#### 7.2 文字围绕浮动元素 ####

巧妙运用浮动元素不会压住文字的特性

#### 7.3 行内块巧妙运用 ####

页码在页面中间显示

*  把这些链接盒子转换为行内块，之后给父级指定 text-align: center
 *  利用行内块元素中间有缝隙，并且给父级添加 text-align: center ，行内块元素会水平居中

### 8 CSS 初始化 ###

*  黑体 \\9ED1\\4F53
 *  宋体 \\5B8B\\4F53
 *  楷体 \\6977\\4F53
 *  微软雅黑 \\5FAE\\8F6F\\96C5\\9ED1

浏览器样式初始化

*  [normalize][] Normalize.css 使浏览器呈现所有 HTML 元素更加一致，并且符合现代 web 标准。Normalize.css 只作用于需要规范化的样式。
 *  样式初始化
    
        * {
              
            margin: 0;
            padding: 0
        }
        
        em,
        i {
              
            font-style: normal
        }
        
        li {
              
            list-style: none
        }
        
        img {
              
            border: 0;
            vertical-align: middle
        }
        
        button {
              
            cursor: pointer
        }
        
        a {
              
            color: #666;
            text-decoration: none
        }
        
        a:hover {
              
            color: #c81623
        }
        
        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;
            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
        }

### 9 练习作业 ###

1、使用字体图标给小米侧边栏加上箭头

2、菜单内容超出部分，用文本超出省略解决

ckground-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  
\}

## 9 练习作业
    
    1、使用字体图标给小米侧边栏加上箭头
    
    2、菜单内容超出部分，用文本超出省略解决

[icomoon]: http://icomoon.io
[iconfont]: http://www.iconfont.cn/
[20230724024159.png_origin_url_https_3A_2F_2Fgitee.com_2Frawait_2Frwpicgo_2Fraw_2Fmaster_2Fteaching_2F2021-12_2F202112092248750.png_pos_id_img-M5BayUDA-1695376546342]: https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fgitee.com%2Frawait%2Frwpicgo%2Fraw%2Fmaster%2Fteaching%2F2021-12%2F202112092248750.png&pos_id=img-M5BayUDA-1695376546342
[20230724024159.png_origin_url_https_3A_2F_2Fgitee.com_2Frawait_2Frwpicgo_2Fraw_2Fmaster_2Fteaching_2F2021-12_2F202112092258698.png_pos_id_img-h2hi34Qr-1695376546345]: https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fgitee.com%2Frawait%2Frwpicgo%2Fraw%2Fmaster%2Fteaching%2F2021-12%2F202112092258698.png&pos_id=img-h2hi34Qr-1695376546345
[20230724024159.png_origin_url_https_3A_2F_2Fgitee.com_2Frawait_2Frwpicgo_2Fraw_2Fmaster_2Fteaching_2F2021-12_2F202112092252903.png_pos_id_img-cYJLiWe5-1695376546347]: https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fgitee.com%2Frawait%2Frwpicgo%2Fraw%2Fmaster%2Fteaching%2F2021-12%2F202112092252903.png&pos_id=img-cYJLiWe5-1695376546347
[image-20211209231227334]: https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fgitee.com%2Frawait%2Frwpicgo%2Fraw%2Fmaster%2Fteaching%2F2021-12%2F202112092312465.png&pos_id=img-YkOo18GD-1695376559662%29
[20230724024159.png_origin_url_https_3A_2F_2Fgitee.com_2Frawait_2Frwpicgo_2Fraw_2Fmaster_2Fteaching_2F2021-12_2F202112092316815.png_pos_id_img-1mL2HpHK-1695376546348]: https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fgitee.com%2Frawait%2Frwpicgo%2Fraw%2Fmaster%2Fteaching%2F2021-12%2F202112092316815.png&pos_id=img-1mL2HpHK-1695376546348
[20230724024159.png_origin_url_https_3A_2F_2Fgitee.com_2Frawait_2Frwpicgo_2Fraw_2Fmaster_2Fteaching_2F2021-12_2F202112092339822.png_pos_id_img-Yt28FWkB-1695376546348]: https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fgitee.com%2Frawait%2Frwpicgo%2Fraw%2Fmaster%2Fteaching%2F2021-12%2F202112092339822.png&pos_id=img-Yt28FWkB-1695376546348
[normalize]: https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css