web前端几个小知识点笔记
2018-01-17 16:35
453 查看
1、css实现宽度是百分比的盒子为正方形
<div style="width:50%;padding-bottom:50%;height:0px;background:#ccc;"></div>
只需要保证width的百分比值和padding-bottom的百分比值一样即可
2、手机端判断是横屏还是竖屏
function checkOrient() { if (window.orientation == 0 || window.orientation == 180){ alert('竖屏'); }else if (window.orientation == 90 || window.orientation == -90){ alert('横屏'); } } // 添加事件监听 addEventListener('load', function(){ checkOrient(); });
3、不固定行数的文字垂直居中
需求:一个盒子div中有一段文字,文字行数不确定,如何实现该段文字在盒子内垂直居中方法1:
在div盒子上使用两个css属性:display:table-cell;vertical-align:middle;
方法2:
在div盒子内部放置另外一个盒子p元素,把文字放置到p元素中,
然后div盒子设置:position:relative;
p元素设置:position:absolute;top:50%;transform:translate(-50%);
4、动态正则校验
function dynamicReg(text) { eval("var reg = /^" + text + "$/;"); console.log(reg); console.log(reg.test('123456')); } dynamicReg('34'); //false dynamicReg('123456'); //true
5、不固定宽高的盒子水平垂直居中
.parent { width: 60%; height: 500px; position: relative; border: 1px solid #000; } .box{ width: 30%; height: 20%; position: absolute; top:0; right:0; bottom:0; left:0; margin: auto; background-color: blue; } <div class="parent"> <div class="box"></div> </div>
6、移动设备上实现滚动回弹效果
-webkit-overflow-scrolling: touch; //手指离开屏幕后,还会滚动一段距离 -webkit-overflow-scrolling: auto; //手指离开屏幕后,立即停止滚动
7、盒子四周阴影效果
div { box-shadow: 0px 0px 15px #000; }
8、正则验证是否是汉字或全角
/[^\x00-\xff]/g.test('abc') //false /[^\x00-\xff]/g.test('表达') //true /[^\x00-\xff]/g.test('.') //false /[^\x00-\xff]/g.test('。') //true
9、获取浏览器相关信息
/**获得屏幕宽度**/ function getScreenWidth () { return window.screen.width; } /**获得屏幕高度**/ function getScreenHeight() { return window.screen.height; } /**获得浏览器***/ function getBrowse() { var browser = {}; var userAgent = navigator.userAgent.toLowerCase(); var s; (s = userAgent.match(/msie ([\d.]+)/)) ? browser.ie = s[1] : (s = userAgent.match(/firefox\/([\d.]+)/)) ? browser.firefox = s[1] : (s = userAgent.match(/chrome\/([\d.]+)/)) ? browser.chrome = s[1] : (s = userAgent.match(/opera.([\d.]+)/)) ? browser.opera = s[1] : (s = userAgent.match(/version\/([\d.]+).*safari/)) ? browser.safari = s[1] : 0; var version = ""; if (browser.ie) { version = 'IE ' + browser.ie; } else { if (browser.firefox) { version = 'firefox ' + browser.firefox; } else { if (browser.chrome) { version = 'chrome ' + browser.chrome; } else { if (browser.opera) { version = 'opera ' + browser.opera; } else { if (browser.safari) { version = 'safari ' + browser.safari; } else { version = '未知浏览器'; } } } } } return version; } /**获得操作系统***/ function getClientOs() { var sUserAgent = navigator.userAgent; var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows"); var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh") || (navigator.platform == "MacIntel"); if (isMac) return "Mac"; var isUnix = (navigator.platform == "X11") && !isWin && !isMac; if (isUnix) return "Unix"; var isLinux = (String(navigator.platform).indexOf("Linux") > -1); if (isLinux) return "Linux"; if (isWin) { var isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1 || sUserAgent.indexOf("Windows 2000") > -1; if (isWin2K) return "Win2000"; var isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1 || sUserAgent.indexOf("Windows XP") > -1; if (isWinXP) return "WinXP"; var isWin2003 = sUserAgent.indexOf("Windows NT 5.2") > -1 || sUserAgent.indexOf("Windows 2003") > -1; if (isWin2003) return "Win2003"; var isWinVista = sUserAgent.indexOf("Windows NT 6.0") > -1 || sUserAgent.indexOf("Windows Vista") > -1; if (isWinVista) return "WinVista"; var isWin7 = sUserAgent.indexOf("Windows NT 6.1") > -1 || sUserAgent.indexOf("Windows 7") > -1; if (isWin7) return "Win7"; } return "other"; }
10、字体
宋体 SimSun黑体 SimHei
微软雅黑 Microsoft YaHei
微软正黑体 Microsoft JhengHei
新宋体 NSimSun
新细明体 PMingLiU
细明体 MingLiU
标楷体 DFKai-SB
仿宋 FangSong
楷体 KaiTi
仿宋_GB2312 FangSong_GB2312
楷体_GB2312 KaiTi_GB2312
宋体:SimSuncss中中文字体(font-family)的英文名称
Mac OS的一些:
华文细黑:STHeiti Light [STXihei]
华文黑体:STHeiti
华文楷体:STKaiti
华文宋体:STSong
华文仿宋:STFangsong
儷黑 Pro:LiHei Pro Medium
儷宋 Pro:LiSong Pro Light
標楷體:BiauKai
蘋果儷中黑:Apple LiGothic Medium
蘋果儷細宋:Apple LiSung Light
Windows的一些:
新細明體:PMingLiU
細明體:MingLiU
標楷體:DFKai-SB
黑体:SimHei
新宋体:NSimSun
仿宋:FangSong
楷体:KaiTi
仿宋_GB2312:FangSong_GB2312
楷体_GB2312:KaiTi_GB2312
微軟正黑體:Microsoft JhengHei
微软雅黑体:Microsoft YaHei
装Office会生出来的一些:
隶书:LiSu
幼圆:YouYuan
华文细黑:STXihei
华文楷体:STKaiti
华文宋体:STSong
华文中宋:STZhongsong
华文仿宋:STFangsong
方正舒体:FZShuTi
方正姚体:FZYaoti
华文彩云:STCaiyun
华文琥珀:STHupo
华文隶书:STLiti
华文行楷:STXingkai
华文新魏:STXinwei
Windows 中的中文字体。
在默认情况下,也就是未自行安装新字体或者 Office 等文字处理软件的情况下,Windows 默认提供下列字体:
Windows 95/98/98SE 宋体、黑体、楷体_GB2312、仿宋_GB2312
Windows XP/2000/2003/ME/NT 宋体/新宋体、黑体、楷体_GB2312、仿宋_GB2312 (Windows XP SP3 宋体-PUA)
Windows Vista/7/2008 宋体/新宋体、黑体、楷体、仿宋、微软雅黑、SimSun-ExtB
那么每种字体能显示那些汉字呢?
Vista 之前的 Windows 中宋体/新宋体、黑体支持 GBK 1.0 字符集,
楷体_GB2312、仿宋_GB2312 支持 GB2312-80 字符集。
(注:Windows 3.X 只能支持 GB2312-80 字符集)
Vista 及之后的 Windows 中宋体/新宋体、黑体、楷体、仿宋、微软雅黑支持 GB18030-2000 字符集,
SimSun-ExtB 只支持 GB18030-2005 字符集扩展 B 部分。
下面对字符集进行简单的介绍:
GB2312-80 < GBK 1.0 < GB18030-2000 < GB18030-2005
GB2312-80 中的字符数量最少,GB18030-2005 字符数量最多。
GB2312-80 是最早的版本,字符数比较少;
GBK 1.0 中的汉字大致与 Unicode 1.1 中的汉字数量相同;
GB18030-2000 中的汉字大致与 Unicode 3.0 中的汉字数量相同,主要增加了扩展 A 部分;
GB18030-2005 中的汉字大致与 Unicode 4.1 中的汉字数量相同,主要增加了扩展 B 部分;
由于 Unicode 5.2 的发布,估计 GB18030 会在近期发布新版本,增加扩展 C 部分。
需要说明的是在 GB18030 中扩展 B 部分并不是强制标准。
如果想查看 GB18030 的标准文本,请访问 http://www.gb168.cn 中的强标阅读。
如果想了解 Unicode 的内容,请访问 http://www.unicode.org。
现在纠正网上普遍的一个错误:
GB18030-2000 和 GB18030-2005 都不支持单字节的欧元符号
与简体中文有关的代吗页如下:
936 gb2312 简体中文(GB2312)————其实是GBK
10008 x-mac-chinesesimp 简体中文(Mac)
20936 x-cp20936 简体中文(GB2312-80)
50227 x-cp50227 简体中文(ISO-2022)
51936 EUC-CN 简体中文(EUC)
52936 hz-gb-2312 简体中文(HZ)
54936 GB18030 简体中文(GB18030)
补充:
使用楷体_GB2312、仿宋_GB2312后,在 Windows 7/Vista/2008 中可能不再显示为对应的字体。
这是因为 Windows 7/Vista/2008 中有楷体、仿宋,默认情况下没有楷体_GB2312、仿宋_GB2312,字体名称相差“_GB2312”。
相关文章推荐
- web前端开发几个知识点
- web前端--知识点,笔记叠加(javascript,jquery,html5+css3.0,ajax)
- 前端知识点笔记
- web前端——html基础笔记 NO.9
- Web前端学习笔记:Bootstrap框架
- web前端开发常用又好用的几个软件
- web前端学习笔记(CSS固定宽度布局)
- 前端笔记----jquery入门知识点总结
- [置顶] web前端常用的知识点整理
- web前端学习笔记-瀑布流的算法分析与代码实现
- Web前端(列表)基础知识笔记(2)
- web前端学习中……写个笔记。
- IT职场经纬 |阿里web前端面试考题,你能答出来几个?
- Web 前端学习笔记之 HTML 入门(2)
- Web前端开发求职笔记(第一天)
- Web前端——jsp页面参数显示的几个小问题
- Web前端学习笔记:Bootstrap框架
- web前端学习笔记(CSS变化宽度布局)
- 前端笔记----jquery入门知识点总结 (转)
- web前端入门知识笔记——html基础(传智播客)