CSS进阶班笔记(四)，前端开发从零开始

3.1、鼠标样式cursor🔥

---

鼠标样式cursor

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

li {

cursor: pointer;

}

| 属性值 | 描述 |

| — | — |

| default | 小白，默认 |

| pointer | 小手 |

| move | 移动 |

| text | 文本 |

| not-allowed | 禁止 |

3.2、轮廓线outline🔥

---

轮廓线outline：

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

input {

outline: none;

}

3.3、防止拖拽文本域

---

防止拖拽文本域resize

textarea {

resize: none;

}

4、vertical-align🔥

====================================================================================

vertical-align:

• 使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。

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

vertical-align: baseline | top | middle | bottom

| 值 | 描述 |

| — | — |

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

| top | 把元素的顶端与行中最高元素的顶端对齐（顶线对齐） |

| middle | 把此元素放置在父元素的中部（中线对齐） |

| bottom | 把元素的顶端与行中最低的元素的顶端对齐（底线对齐） |

4.1、图片、表单和文字对齐🔥

---

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

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

4.2、 图片底侧空白缝隙解决🔥

---

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

主要解决办法有两种：

1. 给图片添加 vertical-align : middle | top |bottom 等

2. 把图片转换为块级元素 display:block;，因为块级元素不会有vertical-align 属性

5、溢出文字省略显示🔥

==============================================================================

5.1、单行文本溢出省略号显示🔥

---

必须满足三个条件：

/* 1.先强制一行内显示文本 */

white-space: nowrap; /默认 normal 是自动换行，nowrap是强制一行显示文本/

/* 2.超出的部分隐藏 */

overflow: hidden;

/* 3.文字用省略号替代超出的部分*/

text-overflow: ellipsis;

/ellipsis:省略号/

5.2、多行文本溢出显示省略号显示

---

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

overflow: hidden;

text-overflow: ellopsis;

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

display: -webkit-box;

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

-webkit-line-clamp: 2;

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

-webkit-box-orient : vertical;

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

6、常见布局技巧🔥

============================================================================

6.1、margin负值的运用🔥

---

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

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

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

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

1. 让每个盒子 margin 往左侧移动 -1px 正好压住相邻盒子边框

2. 鼠标经过某个盒子的时候，提高当前盒子的层级即可

• 如果没有定位，则加相对定位(保留位置)

• 如果有定位，则加 z-index

• 

  6.2、文字围绕浮动元素🔥

  ---

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

  

  6.3、行内块巧妙运用🔥

  ---

  

  页码在页面中间显示：

  1. 把这些链接盒子转换为行内块，之后给父级指定 text-align: center

  2. 利用行内块元素中间有缝隙，并且给父级添加 text-aligun: center ，行内块元素会水平居中

  小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
  因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  
  
  
  

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

  如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
  

  基础学习：

  前端最基础的就是 HTML , CSS 和 JavaScript 。

  网页设计：HTML和CSS基础知识的学习

  HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

  CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

  

  动态交互：JavaScript基础的学习

  JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

  基础知识的学习

  HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  [外链图片转存中…(img-NB274I4c-1710765585607)]

  CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

  [外链图片转存中…(img-fXizKX6z-1710765585607)]

  动态交互：JavaScript基础的学习

  JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。