Honey的个人信息站
Honey的个人信息站

随笔

文章

记录

其它

Linux

CSS

HTML

PHP

小程序

JS

内容列表
本地快速开发html，动态刷新页面
基于 browser-sync，的本地开发辅助工具，实现动态更新页面内容，快速开发html
2025-02-17
自适应页面
//css body { -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #fff; } .page_loading_box{ position: fixed; width: 100vw; height: 100vh; background: #fff; z-index: 9999999; left: 0; top: 0; text-align: center; } .page_loading { position: absolute; left: 0; top: 30vh; right: 0; margin: auto; width: 8vw; height: 8vw; border-top: 4px solid #C9151E; border-right: 4px solid transparent; border-radius: 50%; -webkit-animation: 1s spin linear infinite; animation: 1s spin linear infinite; } -webkit-@keyframes spin { -webkit-from { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } -webkit-to { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }//js var curr_rem = 0;//用于存储全局参数 function w_load() { (function(designWidth, designHeight , maxWidth) { let doc = document, win = window, docEl = doc.documentElement, remStyle = document.createElement("style"), tid; function refreshRem() { let wind_width = docEl.getBoundingClientRect().width; let wind_height = docEl.getBoundingClientRect().height; let width = wind_width; if(designHeight){ let hd = wind_width / (designWidth / designHeight) if( hd > wind_height ) maxWidth = (designWidth / designHeight) * wind_height } wind_width>=maxWidth && (width=maxWidth); console.log( width ) //var rem = width * 10 / designWidth; curr_rem = width * 10 / designWidth;//10=设计图宽度/rem宽度 remStyle.innerHTML = 'html{font-size:' + curr_rem+ 'px;}'; } if (docEl.firstElementChild) { docEl.firstElementChild.appendChild(remStyle); } else { var wrap = doc.createElement("div"); wrap.appendChild(remStyle); doc.write(wrap.innerHTML); wrap = null; } //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次； refreshRem(); win.addEventListener("resize", function() { clearTimeout(tid); //防止执行两次 tid = setTimeout(refreshRem, 300); }, false); win.addEventListener("pageshow", function(e) { if (e.persisted) { // 浏览器后退的时候重新计算 clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); win.addEventListener('orientationchange',function () { clearTimeout(tid); tid = setTimeout(refreshRem, 300); }, true); })(2048, 1536,2048); //$('.page_loading_box').hide() } //页面不能配置默认字体大小 w_load(); //获得rem对应px值 需要等页面计算完成后生效 function rem2px(res) { return curr_rem * res ; } //html <!--页面加载start--> <div class="page_loading_box" > <div class="page_loading"></div> </div> <!--页面加载end-->  
2023-09-30
网页copy内容到剪切板
<a href="#" class="copy" data-txt="xxxxxxxxxx">复制内容</a> <script src="/jquery.min.js"></script> <script> //复制 $(function () { $('.copy').click(function () { const textarea= document.createElement('textarea'); textarea.setAttribute('readonly', 'readonly'); textarea.value = $(this).data('txt'); document.body.appendChild(textarea); textarea.select(); if (document.execCommand('copy')) { alert('复制成功'); } document.body.removeChild(textarea); }) }) </script>
2023-09-27
富文本编辑器
//ueditor <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script> <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>//此处注意顺序不能变 <textarea id="editor" ></textarea> <script> var ue = UE.getEditor('editor'); </script> 1)获取编辑器里面的内容(html代码)： ue.getContent(); 2)设置编辑器里面的内容(支持html代码)： ue.setContent("李啸天", boolean是否追加); 3)获取编辑器里面的纯文本：ue.getContentTxt(); 4)获取编辑器带格式的纯文本(也就是包含一些<img>等标签的文本，但是不包含文本的格式，上一个方法不包含<ima>等标签):ue.getPlainTxt(); 5)判断编辑器是否有内容返回true或者false ue.hasContents(); 6)使编辑器获取焦点： ue.focus(); 7)判断编辑器是否获取焦点 ：ue.isFocus(); 8)使编辑器失去焦点：ue.blur(); 10)使编辑器不可编辑：ue.setDisabled();里面可以设置参数string或者Array[string]设置除此之外为disable 11)是编辑器可以编辑：ue.setEnabled(); 12)显示隐藏编辑器方法为：setShow(), setHide() 13)设置编辑器高度：setHeight(Number heigth);
2023-09-25
Vue配置代理访问
devServer: { proxy: { '/rt': { target: 'http://xxxxxxxx', pathRewrite:{'^/rt':''}, ws: true, changeOrigin: true } } }, //vite.config.ts server: { port: 3003, host: '0.0.0.0', proxy: { '/api': { target: 'https://test6.honeyclover.xyz', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } },
2023-07-01
npm相关命令
切换镜像：npm config set registry http://registry.npmmirror.comnpm config set registry https://registry.npmjs.org查看：npm config get registry安装cnpm：npm install -g cnpm --registry=https://registry.npmmirror.com清除缓存：npm cache clean --forcenpm cache verify设置全局文件npm config set prefix "D:\NODE_PATH" 设置缓存路径npm config set cache "D:\NODE_CACHE" 设置系统环境变量path："D:\NODE_PATH" git去除https验证：git config --global http.sslVerify "false"git去除替换ssh或者git连接：git config --global url."https://".insteadOf git://查看配置：git config --global --list
2023-05-16
mimeTypes
[("ez", "application/andrew-inset"), ("anx", "application/annodex"), ("atom", "application/atom+xml"), ("atomcat", "application/atomcat+xml"), ("atomsrv", "application/atomserv+xml"), ("lin", "application/bbolin"), ("cap", "application/cap"), ("pcap", "application/cap"), ("cu", "application/cu-seeme"), ("davmount", "application/davmount+xml"), ("tsp", "application/dsptype"), ("es", "application/ecmascript"), ("spl", "application/futuresplash"), ("hta", "application/hta"), ("jar", "application/java-archive"), ("ser", "application/java-serialized-object"), ("class", "application/java-vm"), ("js", "application/javascript"), ("m3g", "application/m3g"), ("hqx", "application/mac-binhex40"), ("cpt", "application/mac-compactpro"), ("nb", "application/mathematica"), ("nbp", "application/mathematica"), ("mdb", "application/msaccess"), ("doc", "application/msword"), ("dot", "application/msword"), ("mxf", "application/mxf"), ("bin", "application/octet-stream"), ("oda", "application/oda"), ("ogx", "application/ogg"), ("pdf", "application/pdf"), ("key", "application/pgp-keys"), ("pgp", "application/pgp-signature"), ("prf", "application/pics-rules"), ("ps", "application/postscript"), ("ai", "application/postscript"), ("eps", "application/postscript"), ("epsi", "application/postscript"), ("epsf", "application/postscript"), ("eps2", "application/postscript"), ("eps3", "application/postscript"), ("rar", "application/rar"), ("rdf", "application/rdf+xml"), ("rss", "application/rss+xml"), ("rtf", "application/rtf"), ("smi", "application/smil"), ("smil", "application/smil"), ("xhtml", "application/xhtml+xml"), ("xht", "application/xhtml+xml"), ("xml", "application/xml"), ("xsl", "application/xml"), ("xsd", "application/xml"), ("xspf", "application/xspf+xml"), ("zip", "application/zip"), ("apk", "application/vnd.android.package-archive"), ("cdy", "application/vnd.cinderella"), ("kml", "application/vnd.google-earth.kml+xml"), ("kmz", "application/vnd.google-earth.kmz"), ("xul", "application/vnd.mozilla.xul+xml"), ("xls", "application/vnd.ms-excel"), ("xlb", "application/vnd.ms-excel"), ("xlt", "application/vnd.ms-excel"), ("cat", "application/vnd.ms-pki.seccat"), ("stl", "application/vnd.ms-pki.stl"), ("ppt", "application/vnd.ms-powerpoint"), ("pps", "application/vnd.ms-powerpoint"), ("xlsx", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"), ("xltx", "application/vnd.openxmlformats-officedocument.spreadsheetml.template"), ("pptx", "application/vnd.openxmlformats-officedocument.presentationml.presentation"), ("ppsx", "application/vnd.openxmlformats-officedocument.presentationml.slideshow"), ("potx", "application/vnd.openxmlformats-officedocument.presentationml.template"), ("docx","application/vnd.openxmlformats-officedocument.wordprocessingml.document"), ("dotx", "application/vnd.openxmlformats-officedocument.wordprocessingml.template"), ("cod", "application/vnd.rim.cod"), ("mmf", "application/vnd.smaf"), ("sis", "application/vnd.symbian.install"), ("vsd", "application/vnd.visio"), ("wbxml", "application/vnd.wap.wbxml"), ("wmlc", "application/vnd.wap.wmlc"), ("wmlsc", "application/vnd.wap.wmlscriptc"), ("wpd", "application/vnd.wordperfect"), ("wp5", "application/vnd.wordperfect5.1"), ("wk", "application/x-123"), ("7z", "application/x-7z-compressed"), ("abw", "application/x-abiword"), ("dmg", "application/x-apple-diskimage"), ("bcpio", "application/x-bcpio"), ("torrent", "application/x-bittorrent"), ("cab", "application/x-cab"), ("cbr", "application/x-cbr"), ("cbz", "application/x-cbz"), ("cdf", "application/x-cdf"), ("cda", "application/x-cdf"), ("vcd", "application/x-cdlink"), ("pgn", "application/x-chess-pgn"), ("cpio", "application/x-cpio"), ("csh", "application/x-csh"), ("deb", "application/x-debian-package"), ("udeb", "application/x-debian-package"), ("dcr", "application/x-director"), ("dir", "application/x-director"), ("dxr", "application/x-director"), ("dms", "application/x-dms"), ("wad", "application/x-doom"), ("dvi", "application/x-dvi"), ("rhtml", "application/x-httpd-eruby"), ("pfa", "application/x-font"), ("pfb", "application/x-font"), ("gsf", "application/x-font"), ("pcf", "application/x-font"), ("pcf.Z", "application/x-font"), ("mm", "application/x-freemind"), ("spl", "application/x-futuresplash"), ("gnumeric", "application/x-gnumeric"), ("sgf", "application/x-go-sgf"), ("gcf", "application/x-graphing-calculator"), ("gtar", "application/x-gtar"), ("tgz", "application/x-gtar"), ("taz", "application/x-gtar"), ("hdf", "application/x-hdf"), ("phtml", "application/x-httpd-php"), ("pht", "application/x-httpd-php"), ("php", "application/x-httpd-php"), ("phps", "application/x-httpd-php-source"), ("php3", "application/x-httpd-php3"), ("php3p", "application/x-httpd-php3-preprocessed"), ("php4", "application/x-httpd-php4"), ("php5", "application/x-httpd-php5"), ("ica", "application/x-ica"), ("info", "application/x-info"), ("ins", "application/x-internet-signup"), ("isp", "application/x-internet-signup"), ("iii", "application/x-iphone"), ("iso", "application/x-iso9660-image"), ("jam", "application/x-jam"), ("jnlp", "application/x-java-jnlp-file"), ("jmz", "application/x-jmol"), ("chrt", "application/x-kchart"), ("kil", "application/x-killustrator"), ("skp", "application/x-koan"), ("skd", "application/x-koan"), ("skt", "application/x-koan"), ("skm", "application/x-koan"), ("kpr", "application/x-kpresenter"), ("kpt", "application/x-kpresenter"), ("ksp", "application/x-kspread"), ("kwd", "application/x-kword"), ("kwt", "application/x-kword"), ("latex", "application/x-latex"), ("lha", "application/x-lha"), ("lyx", "application/x-lyx"), ("lzh", "application/x-lzh"), ("lzx", "application/x-lzx"), ("frm", "application/x-maker"), ("maker", "application/x-maker"), ("frame", "application/x-maker"), ("fm", "application/x-maker"), ("fb", "application/x-maker"), ("book", "application/x-maker"), ("fbdoc", "application/x-maker"), ("mif", "application/x-mif"), ("wmd", "application/x-ms-wmd"), ("wmz", "application/x-ms-wmz"), ("com", "application/x-msdos-program"), ("exe", "application/x-msdos-program"), ("bat", "application/x-msdos-program"), ("dll", "application/x-msdos-program"), ("msi", "application/x-msi"), ("nc", "application/x-netcdf"), ("pac", "application/x-ns-proxy-autoconfig"), ("dat", "application/x-ns-proxy-autoconfig"), ("nwc", "application/x-nwc"), ("o", "application/x-object"), ("oza", "application/x-oz-application"), ("p7r", "application/x-pkcs7-certreqresp"), ("crl", "application/x-pkcs7-crl"), ("pyc", "application/x-python-code"), ("pyo", "application/x-python-code"), ("qgs", "application/x-qgis"), ("shp", "application/x-qgis"), ("shx", "application/x-qgis"), ("qtl", "application/x-quicktimeplayer"), ("rpm", "application/x-redhat-package-manager"), ("rb", "application/x-ruby"), ("sh", "application/x-sh"), ("shar", "application/x-shar"), ("swf", "application/x-shockwave-flash"), ("swfl", "application/x-shockwave-flash"), ("scr", "application/x-silverlight"), ("sit", "application/x-stuffit"), ("sitx", "application/x-stuffit"), ("sv4cpio", "application/x-sv4cpio"), ("sv4crc", "application/x-sv4crc"), ("tar", "application/x-tar"), ("tcl", "application/x-tcl"), ("gf", "application/x-tex-gf"), ("pk", "application/x-tex-pk"), ("texinfo", "application/x-texinfo"), ("texi", "application/x-texinfo"), ("~", "application/x-trash"), ("%", "application/x-trash"), ("bak", "application/x-trash"), ("old", "application/x-trash"), ("sik", "application/x-trash"), ("t", "application/x-troff"), ("tr", "application/x-troff"), ("roff", "application/x-troff"), ("man", "application/x-troff-man"), ("me", "application/x-troff-me"), ("ms", "application/x-troff-ms"), ("ustar", "application/x-ustar"), ("src", "application/x-wais-source"), ("wz", "application/x-wingz"), ("crt", "application/x-x509-ca-cert"), ("xcf", "application/x-xcf"), ("fig", "application/x-xfig"), ("xpi", "application/x-xpinstall"), ("amr", "audio/amr"), ("awb", "audio/amr-wb"), ("amr", "audio/amr"), ("awb", "audio/amr-wb"), ("axa", "audio/annodex"), ("au", "audio/basic"), ("snd", "audio/basic"), ("flac", "audio/flac"), ("mid", "audio/midi"), ("midi", "audio/midi"), ("kar", "audio/midi"), ("mpga", "audio/mpeg"), ("mpega", "audio/mpeg"), ("mp2", "audio/mpeg"), ("mp3", "audio/mpeg"), ("m4a", "audio/mpeg"), ("m3u", "audio/mpegurl"), ("oga", "audio/ogg"), ("ogg", "audio/ogg"), ("spx", "audio/ogg"), ("sid", "audio/prs.sid"), ("aif", "audio/x-aiff"), ("aiff", "audio/x-aiff"), ("aifc", "audio/x-aiff"), ("gsm", "audio/x-gsm"), ("m3u", "audio/x-mpegurl"), ("wma", "audio/x-ms-wma"), ("wax", "audio/x-ms-wax"), ("ra", "audio/x-pn-realaudio"), ("rm", "audio/x-pn-realaudio"), ("ram", "audio/x-pn-realaudio"), ("ra", "audio/x-realaudio"), ("pls", "audio/x-scpls"), ("sd2", "audio/x-sd2"), ("wav", "audio/x-wav"), ("alc", "chemical/x-alchemy"), ("cac", "chemical/x-cache"), ("cache", "chemical/x-cache"), ("csf", "chemical/x-cache-csf"), ("cbin", "chemical/x-cactvs-binary"), ("cascii", "chemical/x-cactvs-binary"), ("ctab", "chemical/x-cactvs-binary"), ("cdx", "chemical/x-cdx"), ("cer", "chemical/x-cerius"), ("c3d", "chemical/x-chem3d"), ("chm", "chemical/x-chemdraw"), ("cif", "chemical/x-cif"), ("cmdf", "chemical/x-cmdf"), ("cml", "chemical/x-cml"), ("cpa", "chemical/x-compass"), ("bsd", "chemical/x-crossfire"), ("csml", "chemical/x-csml"), ("csm", "chemical/x-csml"), ("ctx", "chemical/x-ctx"), ("cxf", "chemical/x-cxf"), ("cef", "chemical/x-cxf"), ("smi", "#chemical/x-daylight-smiles"), ("emb", "chemical/x-embl-dl-nucleotide"), ("embl", "chemical/x-embl-dl-nucleotide"), ("spc", "chemical/x-galactic-spc"), ("inp", "chemical/x-gamess-input"), ("gam", "chemical/x-gamess-input"), ("gamin", "chemical/x-gamess-input"), ("fch", "chemical/x-gaussian-checkpoint"), ("fchk", "chemical/x-gaussian-checkpoint"), ("cub", "chemical/x-gaussian-cube"), ("gau", "chemical/x-gaussian-input"), ("gjc", "chemical/x-gaussian-input"), ("gjf", "chemical/x-gaussian-input"), ("gal", "chemical/x-gaussian-log"), ("gcg", "chemical/x-gcg8-sequence"), ("gen", "chemical/x-genbank"), ("hin", "chemical/x-hin"), ("istr", "chemical/x-isostar"), ("ist", "chemical/x-isostar"), ("jdx", "chemical/x-jcamp-dx"), ("dx", "chemical/x-jcamp-dx"), ("kin", "chemical/x-kinemage"), ("mcm", "chemical/x-macmolecule"), ("mmd", "chemical/x-macromodel-input"), ("mmod", "chemical/x-macromodel-input"), ("mol", "chemical/x-mdl-molfile"), ("rd", "chemical/x-mdl-rdfile"), ("rxn", "chemical/x-mdl-rxnfile"), ("sd", "chemical/x-mdl-sdfile"), ("sdf", "chemical/x-mdl-sdfile"), ("tgf", "chemical/x-mdl-tgf"), ("mif", "#chemical/x-mif"), ("mcif", "chemical/x-mmcif"), ("mol2", "chemical/x-mol2"), ("b", "chemical/x-molconn-Z"), ("gpt", "chemical/x-mopac-graph"), ("mop", "chemical/x-mopac-input"), ("mopcrt", "chemical/x-mopac-input"), ("mpc", "chemical/x-mopac-input"), ("zmt", "chemical/x-mopac-input"), ("moo", "chemical/x-mopac-out"), ("mvb", "chemical/x-mopac-vib"), ("asn", "chemical/x-ncbi-asn1"), ("prt", "chemical/x-ncbi-asn1-ascii"), ("ent", "chemical/x-ncbi-asn1-ascii"), ("val", "chemical/x-ncbi-asn1-binary"), ("aso", "chemical/x-ncbi-asn1-binary"), ("asn", "chemical/x-ncbi-asn1-spec"), ("pdb", "chemical/x-pdb"), ("ent", "chemical/x-pdb"), ("ros", "chemical/x-rosdal"), ("sw", "chemical/x-swissprot"), ("vms", "chemical/x-vamas-iso14976"), ("vmd", "chemical/x-vmd"), ("xtel", "chemical/x-xtel"), ("xyz", "chemical/x-xyz"), ("gif", "image/gif"), ("ief", "image/ief"), ("jpeg", "image/jpeg"), ("jpg", "image/jpeg"), ("jpe", "image/jpeg"), ("pcx", "image/pcx"), ("png", "image/png"), ("svg", "image/svg+xml"), ("svgz", "image/svg+xml"), ("tiff", "image/tiff"), ("tif", "image/tiff"), ("djvu", "image/vnd.djvu"), ("djv", "image/vnd.djvu"), ("wbmp", "image/vnd.wap.wbmp"), ("cr2", "image/x-canon-cr2"), ("crw", "image/x-canon-crw"), ("ras", "image/x-cmu-raster"), ("cdr", "image/x-coreldraw"), ("pat", "image/x-coreldrawpattern"), ("cdt", "image/x-coreldrawtemplate"), ("cpt", "image/x-corelphotopaint"), ("erf", "image/x-epson-erf"), ("ico", "image/x-icon"), ("art", "image/x-jg"), ("jng", "image/x-jng"), ("bmp", "image/x-ms-bmp"), ("nef", "image/x-nikon-nef"), ("orf", "image/x-olympus-orf"), ("psd", "image/x-photoshop"), ("pnm", "image/x-portable-anymap"), ("pbm", "image/x-portable-bitmap"), ("pgm", "image/x-portable-graymap"), ("ppm", "image/x-portable-pixmap"), ("rgb", "image/x-rgb"), ("xbm", "image/x-xbitmap"), ("xpm", "image/x-xpixmap"), ("xwd", "image/x-xwindowdump"), ("eml", "message/rfc822"), ("igs", "model/iges"), ("iges", "model/iges"), ("msh", "model/mesh"), ("mesh", "model/mesh"), ("silo", "model/mesh"), ("wrl", "model/vrml"), ("vrml", "model/vrml"), ("x3dv", "model/x3d+vrml"), ("x3d", "model/x3d+xml"), ("x3db", "model/x3d+binary"), ("manifest", "text/cache-manifest"), ("ics", "text/calendar"), ("icz", "text/calendar"), ("css", "text/css"), ("csv", "text/csv"), ("323", "text/h323"), ("html", "text/html"), ("htm", "text/html"), ("shtml", "text/html"), ("uls", "text/iuls"), ("mml", "text/mathml"), ("asc", "text/plain"), ("txt", "text/plain"), ("text", "text/plain"), ("pot", "text/plain"), ("brf", "text/plain"), ("rtx", "text/richtext"), ("sct", "text/scriptlet"), ("wsc", "text/scriptlet"), ("tm", "text/texmacs"), ("ts", "text/texmacs"), ("tsv", "text/tab-separated-values"), ("jad", "text/vnd.sun.j2me.app-descriptor"), ("wml", "text/vnd.wap.wml"), ("wmls", "text/vnd.wap.wmlscript"), ("bib", "text/x-bibtex"), ("boo", "text/x-boo"), ("h++", "text/x-c++hdr"), ("hpp", "text/x-c++hdr"), ("hxx", "text/x-c++hdr"), ("hh", "text/x-c++hdr"), ("c++", "text/x-c++src"), ("cpp", "text/x-c++src"), ("cxx", "text/x-c++src"), ("cc", "text/x-c++src"), ("h", "text/x-chdr"), ("htc", "text/x-component"), ("csh", "text/x-csh"), ("c", "text/x-csrc"), ("d", "text/x-dsrc"), ("diff", "text/x-diff"), ("patch", "text/x-diff"), ("hs", "text/x-haskell"), ("java", "text/x-java"), ("lhs", "text/x-literate-haskell"), ("moc", "text/x-moc"), ("p", "text/x-pascal"), ("pas", "text/x-pascal"), ("gcd", "text/x-pcs-gcd"), ("pl", "text/x-perl"), ("pm", "text/x-perl"), ("py", "text/x-python"), ("scala", "text/x-scala"), ("etx", "text/x-setext"), ("sh", "text/x-sh"), ("tcl", "text/x-tcl"), ("tk", "text/x-tcl"), ("tex", "text/x-tex"), ("ltx", "text/x-tex"), ("sty", "text/x-tex"), ("cls", "text/x-tex"), ("vcs", "text/x-vcalendar"), ("vcf", "text/x-vcard"), ("3gp", "video/3gpp"), ("axv", "video/annodex"), ("dl", "video/dl"), ("dif", "video/dv"), ("dv", "video/dv"), ("fli", "video/fli"), ("gl", "video/gl"), ("mpeg", "video/mpeg"), ("mpg", "video/mpeg"), ("mpe", "video/mpeg"), ("mp4", "video/mp4"), ("qt", "video/quicktime"), ("mov", "video/quicktime"), ("ogv", "video/ogg"), ("mxu", "video/vnd.mpegurl"), ("flv", "video/x-flv"), ("lsf", "video/x-la-asf"), ("lsx", "video/x-la-asf"), ("mng", "video/x-mng"), ("asf", "video/x-ms-asf"), ("asx", "video/x-ms-asf"), ("wm", "video/x-ms-wm"), ("wmv", "video/x-ms-wmv"), ("wmx", "video/x-ms-wmx"), ("wvx", "video/x-ms-wvx"), ("avi", "video/x-msvideo"), ("movie", "video/x-sgi-movie"), ("mpv", "video/x-matroska"), ("mkv", "video/x-matroska"), ("ice", "x-conference/x-cooltalk"), ("sisx", "x-epoc/x-sisx-app"), ("vrm", "x-world/x-vrml"), ("vrml", "x-world/x-vrml"), ("wrl", "x-world/x-vrml")]
2022-11-11
css-flex
flex-grow属性 放大比例，默认为0，即如果存在剩余空间，也不放大。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。一、Flex 布局是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{  display: flex; }123行内元素也可以使用 Flex 布局。.box{  display: inline-flex; }123Webkit 内核的浏览器，必须加上-webkit前缀。.box{  display: -webkit-flex; /* Safari */  display: flex; }1234注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。二、基本概念采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。三、容器的属性以下6个属性设置在容器上。 -  flex-direction -  flex-wrap -  flex-flow -  justify-content -  align-items -  align-content1234563.1 flex-direction属性flex-direction属性决定主轴的方向（即项目的排列方向）。.box {  flex-direction: row | row-reverse | column | column-reverse; }123它可能有4个值。row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。3.2 flex-wrap属性默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。.box{  flex-wrap: nowrap | wrap | wrap-reverse; }123它可能取三个值。（1）nowrap（默认）：不换行。（2）wrap：换行，第一行在上方。（3）wrap-reverse：换行，第一行在下方。3.3 flex-flow.box {  flex-flow: <flex-direction> || <flex-wrap>; }1233.4 justify-content属性justify-content属性定义了项目在主轴上的对齐方式。.box {  justify-content: flex-start | flex-end | center | space-between | space-around; }123它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。flex-start（默认值）：左对齐flex-end：右对齐center： 居中space-between：两端对齐，项目之间的间隔都相等。space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。3.5 align-items属性align-items属性定义项目在交叉轴上如何对齐。.box {  align-items: flex-start | flex-end | center | baseline | stretch; }123它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。3.6 align-content属性align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。.box {  align-content: flex-start | flex-end | center | space-between | space-around | stretch; } 123该属性可能取6个值。flex-start：与交叉轴的起点对齐。flex-end：与交叉轴的终点对齐。center：与交叉轴的中点对齐。space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。stretch（默认值）：轴线占满整个交叉轴。四、项目的属性以下6个属性设置在项目上。orderflex-growflex-shrinkflex-basisflexalign-self4.1 order属性order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。.item {  order: <integer>; }1234.2 flex-grow属性flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。.item {  flex-grow: <number>; /* default 0 */ }123如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。4.3 flex-shrink属性flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。.item {  flex-shrink: <number>; /* default 1 */ }123如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。4.4 flex-basis属性flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。.item {  flex-basis: <length> | auto; /* default auto */ }123它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。4.5 flex属性flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。.item {  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }123该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。4.6 align-self属性align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。.item {  align-self: auto | flex-start | flex-end | center | baseline | stretch; }123该属性可能取6个值，除了auto，其他都与align-items属性完全一致
2022-08-08