前端面试宝典每日一题（6）如何实现0.5px 的边框，并兼容移动端？_前端1.5px_跟小猿学前端的博客-程序员秘密

‍写在前面的话：
这个系列文章可能开始，有人会觉得很low，我是打算从H5先开始整理，最后到常见的前端框架、以及一些前端常见的算法、leetcode的一些算法解析，感兴趣的小伙伴可以持续关注，每天分享一个前端知识点，希望大家一起进步。

‍今天关于这个问题实在是过于基础，所以我临时决定今天整理出常见的三道问题，来进行分析。

1.常见的行内元素和块级元素都有那些？

这个问题是我们前端一道最基础的问题，在这里就不做过多的解释
块级元素就是会单独占一行，行内元素就是一行可以放置多个元素，不出现换行。

1常见的块元素有h1~h6、p、div、ul、ol、li等，其中

标签是最典型的块元素。
2、常见的行内元素有a、strong、b、em、i、del、span等，其中span>标签最典型的行内元素。有的地方也成内联元素
3、在行内元素中有几个特殊的标签——img 、input 、td，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

我认为这些基础的知识虽然看起来，十分的简单、容易，但是在前端日常的工作中我们是离不开对这些问题的处理，所以还是希望大家能够有一个牢固的基础，这样，才能争取日后更大的进步。

2.1px，1rem，1vh，1em各自代表的含义？

这个问题是我们前端面试过程中出现频率比较高的一道题目，下面是我对这道题目的一些解析，希望对你有所帮助。

1rem
页面所有使用rem单位的长度都是相对于根元素元素的font-size大小。即1rem等于根元素元素的font-size大小。

1em
子元素字体大小的em是相对于父元素字体大小。
元素的width/height/padding/margin用em的话是相对于该元素的font-size。
1vh（Viewport Height）、vw（Viewport Width）
视口的宽度和高度，1vh相当于视口高度的 1%。
1px
px像素（Pixel），相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

3.如何实现0.5px 的边框，并兼容移动端？

这个问题是我们前端面试过程中出现频率比较高的一道题目，下面是我对这道题目的一些解析，希望对你有所帮助。

border+border-image+linear-gradient的方式

<div class="border"></div>
.border{
    
    width:200px;
    height: 200px;
    background-color: red;
    margin: 0 auto ;
    border-bottom:  1px solid blue;
    border-image: linear-gradient( to bottom,transparent  50%,Green 50%) 0 0 100% 0 ;
}

伪元素+background-image的方式

.border {
    
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 0 auto;
    position: relative;
}

.border:before {
    
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100px;
    height: 1px;
    background-color: blue;
    background-image: linear-gradient(to bottom transparent 50%, blue 50%);
}

定位+伪元素+transfrom缩放(scale)的方式

 <div class="border"></div>

 .border {
    
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 0 auto;
    position: relative;
}

这就是今天分享的前端相关知识点，希望能够对刚入门前端，或者对前端有兴趣的小伙伴，有所帮助。

本文链接：https://blog.csdn.net/weixin_43742274/article/details/123601384

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

网表仿真基础知识_pr网表_Num One的博客-程序员秘密

一、意义网表是逻辑/电路设计转化为物理实现的工作产品。按照芯片后端流程，主要分为综合网表，DFT网表，PR网表，其中PR网表是包含SDF的最终版网表。网表验证一般有三种形式，分别是仿真验证、形式验证和静态时序分析STA。其中网表仿真，尤其是PR网表仿真，时间紧，资源消耗大，debug困难，因此费时费力，且验证不全面。网表仿真的目的有以下几点：第一、功能仿真不包含的信息，如DFT插入的扫描链，或者基于工艺单元的功耗评估以及时序信息等。第二、其它方法无法处理的内容，如跨时钟域cdc接口或多周期multi-

0-1背包问题（动态规划空间优化）完全背包背包贪心_一位美女的博客-程序员秘密

0-1背包问题给定n种物品和一背包。物品重量wi，价值vi，背包容量c。如何选择物品使得装入背包中的价值最大？状态表示：m(i,j),1<=i<=n,0<=j<=c,表示背包可用容量j，待考虑装包的物品集{i,i+1,…n}时的最大装入物品价值。转态转移方程：边界：m(n,j)=0 第n个物品不放进去(因为容量不够)，j<wi;=Vn 第n个物品放进去，...

hdu 1240 Asteroids!_slege的博客-程序员秘密

点击打开链接因为没令str[d][e][f]='O'，导致wrong了无数次。。。而且郁闷了好几天。。#include"stdio.h"#include"string.h"#include"queue"#include"ctype.h"using namespace std;int map[15][15][15];int flag,a,b,c,d,e,f,n;char str

清理Xcode占用的Mac硬盘空间_星辰和夕月的博客-程序员秘密

如果有一天，你因Mac硬盘空间变得很小很莫名，而你又经常使用Xcode时，不妨试试下面的步骤看看是否有收获。 我经常遇到磁盘不足的警告，一是我经常使用Xcode，二是我在电脑上积累的其它资料。资料不好删除，因此每次都从Xcode下手，整理了一份方便自己以后操作的指南。也希望对你能有所帮助。 已在 Xcode 11.1 验证，此前在Xcode 9, Xcode 10也...

【 C 】在双链表中插入一个新值的简明程序_在已经升序排列的双向链表中插入一个新的值_李锐博恩的博客-程序员秘密

上两篇博文讲了如何在单链表中插入一个值：【 C 】在单链表中插入一个新节点的尝试（一）【 C 】在单链表中插入一个新节点的尝试（二）这篇博文讲解如何在双链表中插入一个值。单链表的替代方案就是双链表。在一个双链表中，每个节点都包含两个指针——指向前一个节点的指针和指向后一个节点的指针。这可以使我们以任何方向遍历双链表，甚至可以忽前忽后地在双链表中访问。下图展示了一个双链表： ...

i5-10210U和锐龙R7 4800U 哪个好_i5第10代和锐龙_m0_49808040的博客-程序员秘密

i5-10210U采用14纳米工艺，4核心8线程，频率1.6-4.2GHz，6MB三级缓存，采用UHD核显（24 EU），TDP 15W，内存频率由DDR4-2666。选i5-10210U还是锐龙R7 4800U 哪个好看完你就知道了https://list.jd.com/list.html?AMD R7 4800U为zen 2架构，8核16线程，主频1.8GHz，加速频率可达4.2GHz，核显为8组核心，TDP为15W。性能方面，AMD表示R7 4800U的单核性能超过i7-1065G7 4%，多