HTML学习
解决span迷之间距方法：
1、div.no_jj_span{ letter-spacing: -0.5em;}
div.no_jj_span span{ letter-spacing: normal;}
2、可以设置父元素的fong-size:0,再设置span的字体大小，也不会出现间距
，但是会对出现...的情况产生影响！
html的img标签设置大小的问题：
1.不设置width和height的大小，默认显示图片的真实大小；
2.img只设置width或height其中的一个，另一个会按比例自动缩放；
3.设置width和height，指定图片的大小。
html5 canvas和webgl和three.js的区别 ：
其实三者是有联系的
canvas是html5新定义的一个标签
webgl要依赖canvas运行
而three.js是webgl的一个库
select标签里面的option标签可以嵌套其它标签吗，比如i,span标签等？
答案是：可以嵌套其它标签，但是审查元素会发现标签被剔除了，只显示了标签里面的文本。
不能的原因，网上找到一个解释：
option标签在网页中并没有直接显示，而是作为下拉框的选项内容之一，其样式是由当前浏览器决定的，所以option标签之间只会有文本内容。
移动端开发<meta>：
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
content属性值 :
width:可视区域的宽度，值可为数字或关键词device-width。
height:同width。
intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放。
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放，no 禁止缩放。
解决使用letter-spacing以后文本不居中问题：
1、letter-spacing:6px;
text-indent:6px;
2、使用适当的padding-left值；
3、可以在字符中间加上空格，“ ” 或者
H5 VIDEO标签的使用：
<video
id="video"
src="video.mp4"
controls = "true"
poster="images.jpg" /*视频封面*/
preload="auto"
webkit-playsinline="true" /*这个属性是ios 10中设置可以 让视频在小窗内播放，也就是不是全屏播放*/
playsinline="true" /*IOS微信浏览器支持小窗内播放*/
x-webkit-airplay="allow" /*这个属性应该是使此视频支持ios的AirPlay功能。使用AirPlay可以直接从使用iOS的设备上的不同位置播放视频、音乐还有照片文件，也就是说通过AirPlay功能可以实现影音文件的无线播放，当然前提是播放的终端设备也要支持相应的功能*/
x5-video-player-type="h5" /*启用H5播放器,是wechat安卓版特性*/
x5-video-player-fullscreen="true" /*全屏设置，设置为 true 是防止横屏*/
x5-video-orientation="portraint" //播放器支付的方向， landscape横屏，portraint竖屏，默认值为竖屏 style="object-fit:fill">
</video>
关于元素高度百分比：
元素高度百分比需要向上遍历父标签要找到一个定值高度才能起作用，如果中途有个height为auto或是没有设置height属性，则高度百分比不起作用。
解决video标签的poster不适配，且有黑边的情况：
video标签的poster属性指代视频未播放前放置的一张图片
如果video容器宽高小于等于poster图的宽高，则图片能充满容器，反之容器左右就会预留黑色栏
除了手动更换一张大图之外，可以结合CSS来控制，实现铺满。
想要video能自动填充慢父div的大小，只要给video标签加上style="width= 100%; height=100%; object-fit: fill"即可。
object-fit语法
object-fit属性的语法非常的简单：
object-fit:fill | contain | cover | none | scale-down
object-fit取值说明：
object-fit主要适合于替换元素，比如：<video>、<object>、<img>、<input type="image">、<svg>、<svg:image>和<svg:video>等。其默认值为fill。object-fill取值的说明如下：
fill:此值为oboject-fit的默认值，替换内容的大小被设置为填充元素的内容框，也就是说，元素的内容扩大到完全填充容器的外形尺寸，即使这打破其内在的宽高比。 contain：替换元素内容大小保持长宽比例填充元素内容容器，其具体对象大小被解析为一个包含元素的宽度和高度。也就是说，如果你在替换元素上设置一个明确的高度和宽度，此值将导致内容大小，完全在固定的比例显示，但仍在元素尺寸内显示。 cover：替换元素内容大小保持长宽比例填充元素内容容器，其具体对象大小被解析为覆盖整个元素的宽度和高度。也就是说，替换元素内容大小保持长宽比，但改变宽度和高度，以便完全覆盖内容元素。 none：替换元素内容不调整大小以适应内部元素的容器，内容完全忽略设置在元素上的任何高度和权重，并且仍在元素尺寸内显示。 scale-down：当内容大小设置了none或contain，将导致具体对象变得更小。
转载请注明原文地址: https://www.6miu.com/read-2625085.html
