20230214----重返学习-::placeholder与caret-color与position定位与精灵图相关

day-007-seven-20230214

::placeholder提示文字伪类与caret-color光标颜色输入框视觉

::placeholder提示文字伪类

伪元素::placeholder可以选择一个表单元素的占位文本，它允许开发者和设计师自定义占位文本的样式。

caret-color光标颜色

caret-color属性用来定义插入光标caret的颜色，这里说的插入光标，就是那个在网页的可编辑器区域内，用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠|的东西。

position定位

定位的基本思想很简单，就是允许元素相对某些元素随意更改位置。

定位类型

• static 默认值，静态定位
• relative 相对定位
• absolute 绝对定位
• fixed 固定定位

定位关键

• 四个方位值（top/right/bottom/left）
  • bottom和left可以按照xy坐标轴方向去记忆，另外两个则相反
    • top负数往上移动，top正数往下移动。
    • bottom
    • left正数往右移动，left负数往左移动。
    • right
  • 也可以认为方位值就是参照物的边框线，以参照物中心为一线，向中心点移动时，就为正数。
• 是否脱流
• 参照物

定位详解

position: relative;相对定位

• 当前元素没有脱离文档流，位置还在。
• 层级高于普通文档流
• 参照物: 相对自身在移动
• 使用场景: 一般作为绝对定位的参照物

position: absolute;绝对定位

• 当前元素脱离文档流
• 层级高于普通文档流的层级
• 参照物
  • 参照物必须对元素自身是有包含关系的上级元素。参照物包含该元素。
  • 寻找离它最近的开了定位的嵌套元素。
  • 一直找，直到找到body都没有定位元素，参照物就是视口。
• 一般设置参照物时开启的是相对定位position: relative;
• 当前元素宽度不再继承父级，默认是由自身内容决定的。
  • 如果当前元素是行内元素，定位之后，设置宽、高也可以起作用，就类似于设置了display:inline-block。
• 开启绝对定位后，该元素的宽度百分比，是根据参照物来定的。
  • 即开启绝对定位的元素的100%宽度，就是参照物自身的width属性值。
  • 也可以用这个特点看父元素的宽度，或者用来排查参照用。
  • 谷歌浏览器查找参照物，可以从元素自身出发，一级一级往上查找直系元素。
• 绝对定位的参照物: position:relative或者position:absolute、position:fixed ,只要是三者之一即可。

position: fixed;固定定位

• 参照物是视口，即固定定位是相对于整个窗口的。
  • 所以一个弹框可以用这个来做，感觉更好一点。
• 开启固定定位后，该元素的宽度百分比，是根据参照物来定的，即视口的宽度。

元素居中

前提条件: 知道元素自身具体的宽度和高度。

1. 设置容器元素为position: relative;相对定位。
2. 设置元素自身为position: absolute;left: 50%; top: 50%;;
3. 设置元素自身margin-left为负的元素的一半宽度及margin-top为负的元素的一半高度；

例子:

<style>
  .box {
    position: relative;
  }

  .item {
    height: 100px;/* 必须 */
    width: 100px;/* 必须 */

    position: absolute;left: 50%; top: 50%;
    margin-left: 50px;/* 由自身的一半width计算得来 */
    margin-top: 50px;/* 由自身的一半height计算得来 */
  }
</style>
<div class="box">
  父级元素
  <div class="item">元素自身</div>
</div>

精灵图

在做项目的时候，有时候咱们为了优化，减少http请求，会把多张图片合并到一张图片上面，这种图就是精灵图，也称雪碧图/Sprite。

思路

通过background-image引入背景图，之后用background-position移动背景图的设置初始位置。对元素的宽度和长度进行限制，就可以让元素只显示出特定位置的图片局部了。

调节方式

• 有设计稿
  直接对照设计稿上标志出来的尺寸来设置。
• 无设计稿
  1. 先把元素宽高变成背景图的大小
  2. 使用background-position将要用的图标移动到元素的左边和上边。
  3. 把元素的宽高设置成图标的大小。

扩展思路

鼠标hover时，改一下background-position，就看到图标变动了。

替代方法

1. 一个一个请求精灵图上图标。

2. 使用字体图标

   • 阿里巴巴字体图标库
     • 写网站时，一般用在线链接。写好之后，再用本地文件。
     • 可以查看在线链接的css文件，里面可以看到思路。css地址示例
     • 使用步骤
       1. 字体图标库加购物车
       2. 生成在线链接
       3. 在html文件里用link标签引入(补全http:)
       4. 标签类名一定要有一个iconfont
       5. 去字体图标库将要用的图标复制类名到标签身上
       6. 图标的样式当成文字使用
       7. 项目上线时，把字体图标下载下来，将链接改成项目的本地链接

3. 自定义字体

上课时

• 不懂时，一个小节讲完后就要问。别人说明时不要打断。
• 老师讲时认真听，讲完结束告一段落之后，记好笔记。

页面搭建思路

• css样式重置文件reset.css要优先引入。
• 一般页面都放在一个id为app的div中，div里是页面的各种布局。
• 一般容器用wrap结尾。
• 一般做一个居中的类名，用于页面居中。
• css里的类名一般用有意义的单词，尽量写全。如果超过12个字体，可考虑缩写。
• 多个单词一般用驼峰命名法。
  • 也可以用分隔线，其实开源或商业项目里别人好像大多是分隔线-分隔的。