☀️前端基础—【CSS高级技巧⭐⭐⭐】

一、元素的显示与隐藏

1.1 display：显示

• 说明

  • 用来转换元素及如何显示与隐藏元素
  • 隐藏元素之后不再保留位置

  /* 隐藏对象 */
  display: none; 
  
  /* 显示对象，并把元素转换为块级元素，还可以转换为行内元素，行内块元素 */
  display: block;
  

• 应用

  • 
    
    
        
    "c1">1
        
    "c2">2
        
    "c3">3
    
    

  • 效果如下

    

1.2 visibility：可见性

• 说明

  • 用来指定一个元素是否是可见的
  • 隐藏之后，保留位置

  /* 默认值，元素可见 */
  visibility: visible;
  
  /* 元素不可见 */
  visibility: hidden;
  

• 应用

  • 
    
    
        
    "c1">1
        
    "c2">2
        
    "c3">3
    
    

  • 效果如下

    

1.3 opacity：不透明

• 说明

  • 用来设置元素的不透明级别
  • 属性值是从 0.0（完全透明）到 1.0（完全不透明）
  • 完全透明之后，保留位置

• 应用

  • 
    
    
        
    "c1">1
        
    "c2">2
        
    "c3">3
    
    

  • 效果如下

    

1.4 overflow：溢出

• 说明

  • 用来设置当内容溢出元素框时的一些属性样式

    属性值	描述
    visible	默认值，内容不会被修剪，会呈现在元素框之外
    hidden	超出的内容会被修剪，隐藏掉
    scroll	不管内容有没有超出，总是显示滚动条
    auto	内容超出显示滚动条，不超出不显示

• 应用

  • 效果如下
    

二、CSS 用户界面样式

2.1 cursor：鼠标样式

• 说明

  • 用于设置光标显示的形状

    属性值	描述
    default	默认光标（通常是一个箭头）
    pointer	光标呈现为指示链接的指针（小手）
    move	光标呈现为可被移动的样式（移动）
    text	光标呈现为指示文本的样式（文本）
    not-allowed	光标呈现为禁止的样式（禁止）url
    url	自定义光标

• 举例

  •   
      
      
          
    "c1">1
      
    

  • 效果如下

    

2.2 outline：轮廓线

• 说明

  • 它是绘制于元素周围的一条线，位于边框边缘的外围，起到突出元素的作用

    属性值	描述
    outline-color	规定边框的颜色
    outline-style	规定边框的样式
    outline-width	规定边框的宽度

• 格式

  • /* 写法顺序 */
    outline: outline-color outline-style outline-width;
    

  • /* 举例 */
    
    
    
    
        "text">
    
    

  • 效果如下

    

2.3 resize：防止拖拽文本域

• 说明

  • 用于设置用户可否调整文本域的尺寸

    属性值	描述
    none	用户无法调整元素的尺寸
    both	默认值，用户可调整元素的高度和宽度
    horizontal	用户可调整元素的宽度
    vertical	用户可调整元素的高度

• 应用

  • 
    
    
        ""</span> id=<span class="token string">""</span> cols=<span class="token string">"30"</span> rows=<span class="token string">"10"</span>>
    
    

    

三、vertical-align：垂直对齐

• 说明

  • vertical-align 用于设置元素的垂直对齐方式，它只针对于行内元素和行内块元素

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

  

• 补充知识

  • margin: 0 auto; 是设置有宽度的块级元素水平居中对齐
  • text-align: center; 是设置元素中的文字居中对齐

3.1 如何去除图片底侧空白缝隙

• 分析原因

  • img 图片是行内块元素，它的底线会和父级盒子的基线对齐，所以导致图片底侧会有一个空白缝隙

• 解决方法

  • 给 img 添加 vertical-align 属性，属性值设置为middle，top，bottom，让图片不要和基线对齐
  • 给 img 添加 display: block，转换为块级元素也可以解决

  

四、溢出的文字用省略号显示

4.1 white-space：换行处理

• 说明

  • 主要用于设置段落中的文本不进行换行，因为默认情况下，文字会自动换行展示

    属性值	描述
    normal	默认值，空白会被浏览器忽略
    nowrap	设置文本不会换行，直到遇到 标签为止

4.2 text-overflow： 文字溢出

• 说明

  • 用于设置当文本溢出时的样式

    属性值	描述
    clip	修剪文本
    ellipsis	被修剪的文本用省略号来代表显示
    string	被修剪的文本使用自定义的字符串来代表显示

4.3 实现溢出的文字用省略号显示

• 
  
  "desc">
          鸿蒙OS是华为公司开发的一款基于微内核、 [23]  耗时10年、4000多名研发人员投入开发、 [28]  面向5G物联网 [23]  、面向全场景的分布式操作系统。鸿蒙的英文名是HarmonyOS，意为和谐 
  
  

  

五、CSS精灵技术（sprite）

5.1 为什么需要精灵技术

• 分析原因

• 上图为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。
• 当网页中的图像过多时，服务器就会频繁的接受和发送请求，这将大大降低页面的加载速度。
• 所以，为了有效的减少服务器的压力，提高页面的加载速度，我们需要用到精灵技术（也称CSS Sprite、CSS 雪碧）。

5.2 讲解精灵技术

​

• 说明

  • 如上图所示就是一个精灵图
  • 其实就是将网页中的一些背景图整合到一张大图中（精灵图），然后，各个网页元素只需要精确定位到精灵图中的某个小图。
  • 这样，当用户访问该页面时，只需向服务器发送一次请求，网页中的背景图像即可全部展示出来。

• 注意

  • CSS 精灵技术主要针对于背景图片，插入的图片 img 是不需要这个技术的。

• 应用

  
  
  
      
  "c1">
  
  

  • 效果如下
    ​

六、CSS 的美

6.1 margin 负值之美

6.1.1 负边距 + 定位：水平垂直居中

• 说明

  • 绝对定位/固定定位的盒子不能通过设置 margin: auto 实现居中。

• 分析

  • 第一步，设置 left: 50%; top:50%; 让盒子的左侧移动到父级元素的水平垂直中心位置
  • 第二步，设置 margin-left: 负值; margin-top: 负值; 让盒子向左向上移动自身宽度的一半

• 应用

  
  
  
      
  "box">
  
  

  • 效果如下

  

6.1.2 压住盒子相邻边框

• 相邻盒子，边框相加变粗

• 分析

  • 如果盒子都在一行，让每个盒子外边距向左 1 像素，即 margin-left: 1px;
  • 如果盒子存在多行，让每个盒子外边距向左向上 1 像素，即 margin-left: -1px; margin-top: -1px;

• 应用

  • 效果如下

    

6.2 CSS 三角形之美

• 说明

  • 用 CSS 边框模拟出一个上三角形效果
  • 宽度和高度设置为0
  • 我们 4 个边框都要写，只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
  • 为了照顾兼容性，加上 font-size: 0; line-height: 0;

• 应用

•  
   
   
       
  "c1">
   
  

• 效果如下

  

七、静态页面编写流程

7.1 介绍

​ 所谓静态页面（又称静态网页）是指通过 HTML 和 CSS 等纯静态建站语言编写的网页，相对而言，浏览器访问的其他人的制作的网站叫做动态网站，静态网页与动态网站的区别在于静态页面没有后台，不能实现用户交互功能，如：注册、登录、搜索等等。

​ 制作静态网页的作用是为了制作动态网站打下基础，制作网站前首先制作静态网页，然后再将静态网页转化成动态网站。

7.2 流程

1. 创建项目，创建相应的目录，存储不同的文件

   ​ 1）meishimeike(文件夹)：管理当前网站中所有的文件

   ​ 2）index.html/default.html(文件)：当前网站的入口文件

   ​ 3）css(文件夹)：管理当前网站中所有的 css 文件

   ​ 4）js(文件夹)：管理当前网站中所有的 js 文件

   ​ 5）images(文件夹)：管理当前网站中所有的小图片，如：logo 等等

   ​ 6）upload(文件夹)：管理当前网站中所有的大图片，如：产品图片 等等

2. 准备 静态网页效果图（用于转换为 html 页面的设计图）

   ​ 1）ps(附言)：一般设计部门都已经设计好了，拿来用即可。

3. 确定一种开发方式

   ​ 1）从上到下的方式（比较适合新手）

   ​ 2）先确定结构再在结构中填充内容（比较适合老司机）

4. css 初始化（清除浏览器标签的一些默认样式）

   ​ 1）去掉标签的默认margin外边距和padding内边距属性

   ​ 2）去除超链接的下划线，并设置统一的颜色

   ​ 3）统一的去除ul、ol列表标签前面的符号

   ​ 4）统一的将 h1~h6 标题标签的加粗去除，字号统一等等

   ​ 5）设置版心，一般设置宽度 1000px、1200px

5. 开始网页代码的书写

   ​ 1）网页布局应遵从 “先大后小，先外后里” 的原则

   ​ 2）搭建完之后优化网页代码，删除冗余(重复/啰嗦)的文件

八、CSS 最小宽度 min-width 最小高度 min-height

8.1 为什么要设置最小宽度和最小高度？

答：虽然现在全屏 100% 宽度构造越来越多，但手机浏览器或电脑阅读器比较小，为了防止浏览器窗口改变大小之后页面内容也发生改变，我们给页面设置最小宽度和最小高度。

8.2 应用

咱们只要对最外层 div盒子 或对 body 标签 设置最小宽度和最小高度即可

1. 最外层 div 盒子设置

   div {
       min-width: 980px;
       min-height: 600px;
   }
   

2. body设置

   body {
       min-width: 980px;
       min-height: 600px;
   }
   

   那么当浏览器窗口改变大小时，此网页宽度最小是 980px，最小高度是 600px。

九、 iconfont-阿里巴巴矢量图标库

如何用伪元素选择器 content 属性使用 iconfont 图标？？？

9.1 Unicode 写法

• 
  
  
      
  "iconfont">热搜
  
  

• 效果如下

  

9.2 Font class 写法

• 
  
  
  
      
  "iconfont">热搜
  
  

• 效果如下