【每日十分钟前端】基础篇6，在HTML页面上展示 ‘＜div＞＜/div＞’字符串、1px边框变粗解决怎么解决，1px边框为什么会变粗、break与continue

1、[HTML]如何在HTML页面上展示 <div></div> 这几个字符？
2、[CSS]1px边框变粗解决怎么解决，1px边框为什么会变粗？
3、[JS]break与continue有什么区别？

---

1、如何在 HTML 页面上展示 <div></div> 这几个字符？

将符号用转义运算符代替<:‘&lt’,>:‘&gt’

2、1px边框变粗怎么解决，1px边框为什么会变粗？

造成变粗的原因：

一般出现在手机端，css中1px不等于移动设备中的1px，移动设备有不同的像素密度。
分辨率不一样，屏幕尺寸一样，1px在移动设备中是1个设备像素，而它由单个或多个像素点组成，会换算分配css1px包含多少个像素点，如果它跨域了中间分割线，剩下的物理像素部分部分会被自动补全，这样看起来就变粗了。

具体解析：

(1)、viewport

浏览器用来显示网页的那部分区域，但在默认情况下，一般来讲，移动设备上的Viewport都要大于浏览器的可视区域（也有比浏览器可视区域小的），所以在显示网页的时候有时会出现横向滚动条。

因为：移动浏览器认为自己要能让所有的网页都显示正常，即使是那种不为移动端设计的网页，而viewport过小的话，会把这类网页内的元素挤在一起，造成排版混乱，所以默认情况下，一般倾向于设置更宽的viewport。

(2)、css中的1px与设备的1px

在css中一般以1px为单位，在PC的浏览器中，1px“往往”等于1个物理像素。实际上css的1px在不同的设备不同的环境下所代表的物理像素不一样，它是一个抽象的单位。

现在的移动设备分辨率越来越高，但屏幕尺寸确没有太大的变化，这就造成一个单位的屏幕尺寸下拥有更多的物理像素。这样才能让css中1px的东西在屏幕大小差不多而分辨率不一样的设备上，显示大小差不多。不然高分辨率的屏幕会因为东西太小而看不清。

设备不同这种密度不同，这就导致css的1px换算不同，如果遇到中间值，会自动补全剩下的物理像素，造成视觉上变宽了。

另外，用户缩放也会引起css中px的变化。

(3)、设备的像素比：

移动端的window对象有一个属性：devicePixelRatio，它表示设备物理像素和css像素的比例。

像素比例定义了物理像素和设备独立像素的对应关系。

设备的像素比=物理像素/逻辑像素（独立像素）（px）

解决方法：

(1)、用meta标签对viewport进行控制

设置一个viewport，使用户不需要缩放，也没有横向滚动条，就能完整的显示网页的所有内容，显示的内容也在大小合适，同时在多种分辨率的屏幕中实现同样的效果。

viewport属性中的with就有一个特殊值width-device，他就是这个理想的viewport值。

<meta name="viewport" content="width=device-width">

但是，在iPhone、iPad中，如论横屏还是竖屏，宽度都为竖屏时候的宽度。

viewport属性中的缩放initial-scale设置为1的时候同样可以达到效果。
设置为1就是100%，这是一个相对值，相对于理想viewport值的缩放，也就是viewport的值为理想值*1。

<meta name="viewport" content="initial-scale=1">

但是，在移动设备的IE上，如论横屏还是竖屏，宽度都为竖屏时候的宽度。

于是我们可以考虑同时使用，这样就解决了单一属性使个别情况横竖不分的问题了。
当两者同时存在的时候，浏览器会取其中较大的值。

<meta name="viewport" content="width=device-width, initial-scale=1">

补充：

如果设置了width是多少，却没有设置initial-scale，initial-scale会默认计算，以达到viewport的宽度就是屏幕的宽度，就是让页面不会出现滚动条。

用户缩放也会引起1px效果，所以我们可以在meta标签中同时禁止缩放：最小缩放值minimum-scale=1.0，最大缩放值maximum-scale=1.0，是否允许用户进行缩放user-scalable='no'

(2)、window.devicePixelRatio&&devicePixelRatio>=2时，设置border宽度为0.5px。

(3)、border-image，制作2像素的背景条1像素为透明，另1像素有颜色，缩放到1px宽的边框中；或者直接制作0.5px的背景条。

border-width: 1px;
border-image: url(**.png) 2 stretch;

(4)、background-image，制作一张符合要求的图片，用它模拟一个边框。

background: url(**.png) repeat-x left bottom;
background-size: 100% 1px;

(5)、linear-gradient，背景渐变，设置1px渐变，一半有颜色，一般没有，注意渐变方向和边框位置。

background:
linear-gradient(180deg, black, black 50%, transparent 50%) top left / 100% 1px no-repeat,
linear-gradient(90deg, black, black 50%, transparent 50%) top right / 1px 100% no-repeat,
linear-gradient(0, black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat,
linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left / 1px 100% no-repeat;

(6)、box-shadow，利用css对阴影处理的方式实现0.5px的效果设置。

box-shadow: inset 0px -1px 1px -1px black;

(7)、伪类+transform，用:before或:after模拟border后，用transform的scale缩小一半，调整元素位置。

注意高像素屏和低像素屏的兼容if(window.devicePixelRatio && devicePixelRatio >= 2)

3、break 与 continue 有什么区别？

break：

跳出循环；
中断，然后执行循环后的代码；
如果有标签指引可用于跳出任意代码块，否则只能跳出一个循环或一个switch。

continue：

跳过循环中的一个迭代；
比如一共有6个for循环，执行到第三次的时候触发了continue，那么无视continue下面的代码进入到第四次循环。
只能跳过一个迭代。