常见前端实现

女德班吊车尾

已于 2024-09-09 08:41:11 修改

阅读量440

点赞数 1

文章标签：前端 css css3 html javascript

于 2022-06-19 19:48:09 首次发布

本文链接：https://blog.youkuaiyun.com/qq_51384850/article/details/125361498

版权

图标库引入

在阿里巴巴图标库，进入到对应的项目；
选择 Font class，点击下载至本地；
将文件解压到项目的资源文件夹下；
引入其中的 iconfont.css，到项目入口（main.js / App.vue）中；
tip：压缩包中默认有使用教程。

背景

透明度

通过 opacity 添加的透明度，将影响所有的子元素，且效果不可逆。

demo {
  background: rgba(81,135,255,.5); 
}

demo {
  background: rgb(81,135,255);
  opacity: 0.5;
}

圆形图片

对于普通的块元素，也可以用同样的方法造圆形。

img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

图像截取

<div class="img-box">
  <img src="../static/demo.png" />
</div>

.img-box {
  position: relative;
  height: 262px;
  width: 380px;
  // 隐藏图像的溢出部分
  overflow: hidden;
  img {
    /* 移动图像到需要展示的部分 */
    position: absolute;
    top: 40px;
  }
}

文本和文字

单词内换行

默认情况下，连续的英文和数字被视作一个单词，会无视容器宽度限制，不进行换行。

<section>       
  <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa1aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</section>

<style>
section {
  width: 200px;
  word-wrap: break-word;
}
</style>

单行溢出隐藏

对于行内元素，还需额外添加 display: inline-block;。

section {
  // 固定宽度
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

多行溢出隐藏

其高度可以是动态的，由内容多少决定。

section {
   // 固定宽度
   width: 150px;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   // 允许的最大行数
   -webkit-line-clamp: 3;
   overflow: hidden;
}

行内元素overflow让其它元素向下偏移

当添加了属性 overflow: hidden 或其它值后，由于行内块的 baseline 与行内元素不一样，会导致附近的行内元素和行内块元素向下移动。

.inline-block {
  vertical-align: bottom;
}

保留空格并自动换行

会在超出宽度时，自动换行。

在将文本原样输出时会用到。

section {
   white-space: pre-wrap;
   width: 100px;
}

调整字体间距

效果： 预 约 时 间

.demo {
  letter-spacing: 6px;
}

🐳 默认值为 normal，相当于 0

表单

文本域-禁止拉伸

<textarea></textarea>

textarea {
  resize: none;
}

更改placeholder的样式

Web

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: red;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: red;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: red;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: red;
}

表单标签的两端对齐

需要将冒号排除在 span 标签外，否则它会一起参与两端对齐，达不到效果。

<div>
  <span>联系电话</span>：
  <input />
</div>
<div>
  <span>学号</span>：
  <input />
</div>
<div>
  <span>目前居住地</span>：
  <input />
</div>

<style>
span {
  display: inline-block;
  width: 80px;
  text-align: justify;
  text-align-last: justify;
}
</style>

定位

设置层级不生效

场景：使用了绝对定位的二级列表，部分区域被其他元素覆盖，且鼠标移动到列表某部分后总是消失。设置 z-index 仿佛也没有效果。

分析：若其非正常流定位的祖先元素 z-index 值本身低，它自身该值再高也没用。

解决：找到其的带有非正常流定位（position、relative、fixed等）的祖先元素，要追朔到最外层，给其添加z-index。

demo {
  position: fixed;  
  z-index: 1;  
  father {
    position: relative;
    son {
      position: absolute; 
    }
  }
}

固定视口导航栏的相对定位

首先添加 position: fixed;，其次只要不给它添加定位属性，它便会靠在父元素的左上角，这样调整窗口也不会发送问题。

布局

固定容器高实现垂直居中

设置了容器高度时，可以通过 height: 100% 继承到内部以方便实现垂直居中。

利用行高垂直居中

父元素存在边界时，行高需要适当减少来配合其变化。

可以把行高设在行内元素上，也可以从父元素处继承。

<div class="father">
  <span>花好月圆</span>
</div>

.father {
  width: 200px;
  height: 50px;
  border: 1px solid skyblue;
  span {
    line-height: 49px;
  }
}

.father {
  width: 200px;
  height: 50px;
  line-height: 50px;
  span {}
}

利用行高垂直居中多个行内元素

行内元素的字体大小不一样，那就先把它变成行内块。

<div class="father">
  <span>花好月圆</span>
  <span class="span2">妙妙妙</span>
  <span class="span3">哇哈哈</span>
</div>

.father {
  width: 200px;
  height: 50px;
  border: 1px solid skyblue;
  line-height: 45px;
  /* 存在多个子元素时，需要下面这段代码 */
  span {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
  }
  .span2 {
    font-size: 10px;
  }
  .span3 {
    font-size: 28px;
  }
}

利用行高垂直居中行内元素与图片

要给这些相邻元素都加上 vertical-align: middle;。

<div class="father">
  <span>花好月圆</span>
  <img/>
  <span class="span3">哇哈哈</span>
</div>

.father {
  width: 200px;
  height: 50px;
  border: 1px solid skyblue;
  line-height: 45px;
  span {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
  }
  img {
    width: 40px;
    height: 40px;
    background: slategrey;
    border-radius: 50%;
    // 添加这行代码  
    vertical-align: middle;
  }
  .span3 {
    font-size: 28px;
  }
}

调整元素的行高

实现设计稿时，涉及边距时，很多时候给元素保留相应行高能更好的对照设计稿进行设计。

块级元素中的（块级）内容置右

footer {
    display: flex;
    justify-content: flex-end;
}

整体居中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oLHELjDJ-1655639111298)(./img/整体居中)]

page {
  text-align: center;
}
// 容器固定宽度
.div-box1 {
  display: inline-block;
  width: 400rpx;
}
// 容器无固定宽度
.div-box2 {
  display: inline-block;
  padding: 20rpx;
  .content {
    width: 400rpx;
  }
}
// 采用flex布局的特殊容器
.div-box3 {
  display: flex;
  margin: 36rpx auto;
  width: 500rpx;
}

伪类和伪元素

排除选择器

可以通过选择器，排除特定元素。

<div class="father">
  <span class="item">a</span>
  <span class="item special">b</span>
  <span class="item">c</span>
  <span class="item">d</span>
</div>

.father {
  width: 200px;
  height: 50px;
  border: 1px solid skyblue;
  line-height: 45px;
  .item:not(:last-child) {
    margin-left: 10px;
  }
  .item:not(.special) {
    color: pink;
  }
}

伪元素的定位

伪元素是可以相对它的“源”元素进行定位布局的，“源”元素若在正常流，则会去找它的非正常流祖先元素。

<div class="father">
  <div class="son"></div>
</div>

.father {
  width: 400px;
  height: 200px;
  border: 1px solid skyblue;
  .son {
    position: relative;
    width: 200px;
    height: 100px;
    border: 1px solid gold;
  }
  .son::after {
    position: absolute;
    right: 0;
    bottom: 0;
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid red;
  }
}

多重条件下添加样式

<p class="type1 type2">按钮</p>

p.type1.type2 {
  color: red;
}

选择同胞元素中的特定项

span {
	&:nth-child(1) {
		margin-right: 20px;
	}
	&:nth-child(2) {
		margin-right: 20px;
	}
}

其他

计算属性不生效

注意运算符号与数值间需要有空格。

demo {
  calc(100vh - 20px - 10px);
}

无跳转功能的a标签

适合于想获取a标签的相关样式，但不需要a标签所带的跳转功能的情况。

<a href="javascript:;" @click="handleClick">示例一</a>
<a href="javascript:void(0)" @click="handleClick">示例二</a>

深度样式

// 需要使用 less 或 sass  
@deep: ~'>>>';

.el-select {   
  width: 120px;
  @{deep} .el-input__inner {
    border: none; 
    // 更改文字区域到下拉图标的可显示距离，与图标宽一致
    padding-right: 25px;
  }
}

普通 css 可以使用 >>>，但 scss 也只能识别它的别名 /deep/ 。

.main /deep/ .img-wrap {
  width: 20px;
  img {
    vertical-align: center;
  }
}

渐变色背景效果

#demo {
  height: 100px;
  width: 100px;
  /* 从上到下，从A色渐变到B色 */
  background-image: linear-gradient(#ff8600, #ffecb0);
}

调试

切换颜色格式

F12 - 选中元素后 - 在带有颜色属性的色区 - Shift+点击 - 可以切换颜色格式。

在元素上添加样式

选择元素后的样式栏顶部，有专门的区域用于给元素添加样式。

类命名

xx-area

xx-wrap

xx-row

xx-content

xx-box

xx-item

xx-left、xx-right

xx-first-row

xx-top、xx-middle、xx-bottom