本文主要是介绍每日一学（前端知识），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
2020.07.13
[html]p标签里面嵌套img标签会出现向上高3像素是什么原因？如何处理？
现象：在div/p标签中包含img标签，父元素的高度比img的高度多出3px
<div class="parent">
<img class="image" src="./proxy.jpg">
<div>
.parent{background-color:red;border:1px solid blue;
}
.image{width:100%;
}
原因： img是类似于text的标签元素，在结束的时候，会在尾部添加一个空白符（匿名文本），文本外有一个匿名行级盒子，它默认的vertical-align：baseline，由于上下文line-height的影响，它会存在一个line-height,所以它就有高度，因为baseline是基于基线对齐，匿名盒子会下沉，撑开一些高度。
解决： 1）消除匿名盒子的高度，给父级元素设置line-height:0 或font-size:0;
2)给两者设置vertical-align:top
3) 设置img为display:block,让img和匿名行级盒子不在一个布局上下文中，也就不存在对齐问题-----推荐
[css]请说说css的三大特性是什么？
1）层叠性
样式冲突就近原则和按照权重确定最终样式，像是一层一层叠起来，已最后的样式为准
2）继承性
子承父业---子标签继承父标签的某些样式
文本类属性（字体、字号、颜色、行距）具有继承性，此时只需要将此类样式写在父元素/body上，可简化代码，降低css样式复杂性
与块级元素相关的属性（边框、边距、背景、定位、高度）不具有继承性
3）优先级
!important>行内样式> ID 选择器>类(伪元素、伪类、属性)选择器>元素选择器>通用选择器
[js]客户端与服务端时间为什么会不对称？不对称将会出现哪些问题？
如何让https和http切换时能共用cookie和localStorage？
web服务器配置入手杜绝，比如nginx配置http到https重定向。
2020.07.14
[html]如何使用H5唤起原生地图APP（百度、高德、腾讯地图等）
以高德地图为例，参考文档：https://lbs.amap.com/api/uri-api/summary/
<div id="mapBg"><div class="mapTab"><a href="" class="mapBtn_gd"><span>高德地图</span></a><a href="" class="mapBtn_tx"><span>腾讯地图</span></a><a href="" class="mapBtn_bd"><span>百度地图</span></a></div>
</div>若想标记一家公司或商铺，已知其经纬度（例如：116.473195,39.993253），则只需要将url补齐
https://uri.amap.com/marker?position=116.473195,39.993253/*高德*/
var mapUrl_gd ="http://uri.amap.com/marker?position=108.958486,34.271454&name="+inform.orgName+"&src=yellowpage&coordinate=gaode&callnative=1";$("#mapBg .mapTab .mapBtn_g").attr("href",mapUrl_gd);/*腾讯*/
var mapUrl_tx = "http://apis.map.qq.com/uri/v1/marker?marker=coord:34.271454,108.958486;title:"+inform.orgName+";addr:"+inform.orgAddress+"&referer=yellowpage"$("#mapBg .mapTab .mapBtn_t").attr("href",mapUrl_tx);/*百度*/
var mapUrl_bd ="http://api.map.baidu.com/marker?location=34.271454,108.958486&title="+inform.orgName+"&content="+inform.orgAddress+"&output=html&src=yellowpage";
[css]css variable的使用方法和好处有哪些？
与LESS、SASS等预处理器变量相比，css变量的优点是：
1）css变量的动态性，能在页面运行时更改，传统预处理器编译后无法修改
2）css变量能够继承，能够组合使用，具有作用域
3）可以配合js使用，方便从JS中读、写
[js]前端如何保持与服务器时间同步（如何解决客户端与服务端时间不对称的问题）？
[软技能]代码里为什么换行要使用`\r\n`？
在计算机还没有出现之前，有一种叫做电传打字机（Teletype Model 33）的玩意，每秒钟可以打10个字符。但是它有一个问题，就是打完一行换行的时候，要用去0.2秒，正好可以打两个字符。要是在这0.2秒里面，又有新的字符传过来，那么这个字符将丢失。
于是，研制人员想了个办法解决这个问题，就是在每行后面加两个表示结束的字符。一个叫做"回车"，告诉打字机把打印头定位在左边界；另一个叫做"换行"，告诉打字机把纸向下移一行。
这就是"换行"和"回车"的来历，从它们的英语名字上也可以看出一二。
后来，计算机发明了，这两个概念也就被般到了计算机上。那时，存储器很贵，一些科学家认为在每行结尾加两个字符太浪费了，加一个就可以。于是，就出现了分歧。
Unix系统里，每行结尾只有"<换行>"，即"\n"；
Windows系统里面，每行结尾是"<回车><换行>"，即"\r\n"；
Mac系统里，每行结尾是"<回车>"。
一个直接后果是，Unix/Mac系统下的文件在Windows里打开的话，所有文字会变成一行；而Windows里的文件在Unix/Mac下打开的话，在每行的结尾可能会多出一个^M符号
2020.07.15
[css]有使用过css的images-set吗？它能解决什么问题？
images-set是CSS4草案中的一个属性，目的就是保证图片在屏幕上的自适应。目前image-set只能使用webkit浏览器的私有属性“-webkit”。由于移动端浏览器的内核基本是webkit，所以此方法在webApp端的使用效果较好。
可以根据用户设备的分辨率匹配合适的图像。仅支持background-image属性
img{/*兼容不支持image-set的webview*/background-image:url('../imgs/@2x/photo@2x.png')background-image:image-set(url('../imgs/@2x/photo@2x.png') 2x,url('../imgs/@3x/photo@3x.png') 3x)
}[js]当用户打开一个网页时，想一直停留在当前打开的页面，如何禁止页面前进和后退
[软技能]说说你对代码可移植性的理解
理解为代码修改较少的部分就可以适用于新的环境，符合以下标准的写法，依赖关系明确，便于理解和修改，相同的功能尽可能使用简单的方法实现，方便后续的维护和理解。
[html]你有使用过HTML5 Boilerplate吗？说说你对它的理解
html的模板，平时新建一个项目时通常需要创建一个新的html，为使html更规范，HTML5 Boilerplate提供了一个十分完善的HTML模版，完善到所有的页面似乎都应该遵守这个规则。
源码如下：
<!DOCTYPE html><!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--><!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><meta name="description" content=""><meta name="viewport" content="width=device-width, initial-scale=1"><!-- Place favicon.ico and apple-touch-icon.png in the root directory --><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/main.css"><script src="js/vendor/modernizr-2.6.2.min.js"></script></head><body><!--[if lt IE 7]><p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience.</p><![endif]--><!-- Add your site or application content here --><p>Hello world! This is HTML5 Boilerplate.</p><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script><script src="js/plugins.js"></script><script src="js/main.js"></script><!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --><script>(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;e=o.createElement(i);r=o.getElementsByTagName(i)[0];e.src='//www.google-analytics.com/analytics.js';r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));ga('create','UA-XXXXX-X');ga('send','pageview');</script></body></html>
这篇关于每日一学（前端知识）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
