随笔分类 - CSS
摘要：body{ -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ user-select: none;/*选中文字时避免出现蓝色背景*/ }
阅读全文
摘要：/* 移动端 */ @media all and (max-width: 768px) { } /* PC端 */ @media all and (min-width: 769px) { }
阅读全文
摘要：原理 ：利用 inline-block 将 导航 作为 文本 ， 被外层具有 text-align 属性的导航盒子包含 。从而实现居中效果 1. html 结构 <header> <div class="nav-wrap"> <nav>hello</nav> </div> </header> 2.
阅读全文
摘要：一，属性介绍 1. 浏览器支持 注释：Internet Explorer 8 以及更早的版本不支持 <figure> 标签。Internet Explorer 9, Firefox, Opera, Chrome 以及 Safari 支持 <figure> 标签。 2. 定义和用法 <figure>
阅读全文
摘要：上效果图 : 上代码 : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
阅读全文
摘要：1, index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
阅读全文
摘要：通过 github 搜索 object-fit ie , 借鉴大佬兼容 ie 的经验。 下载解压到文件夹 ， 打开测试目录 ， 查看 demo 使用 ie 打开demo ， 查看显示效果 ： 代码 ： <!DOCTYPE HTML> <html> <head> <meta charset="utf-
阅读全文
摘要：造成原因： 图片的 display 属性默认是 inline ，而这个属性的 vertical-align 的默认值是baseline。 解决办法1（ 建议使用block , 对 ie浏览器 比较友好 ）： 将 img 的 display 设置为 block img{ display : block
阅读全文
摘要：img{ max-width: 100%; height: auto; }
阅读全文
摘要：.checkbox-wrap{ position:relative } .checkbox-wrap::before{ content: ''; position: absolute; top: 31%; width: 16px; height: 16px; background: #fff; bo
阅读全文
摘要：对父级样式添加overflow样式 .parent{ overflow: hidden; } .child{ float:left; }
阅读全文
摘要：img { height: 100%; object-fit: cover; }
阅读全文
摘要：.clearfix:after{ content:""; /*设置内容为空*/ height:0; /*高度为0*/ line-height:0; /*行高为0*/ display:block; /*将文本转为块级元素*/ visibility:hidden; /*将元素隐藏*/ clear:bot
阅读全文
摘要：position:absolut; left:50%; top:50%; margin-left: -（自身一半宽度）; margin-top: -（自身一半高度）
阅读全文
摘要：一般我们做页面，肯定都会有设计图，移动端页面，一般情况下，UI出图都会定宽为640px，这也是移动端的标准尺寸；但是，我们也不能排除可能有其他特殊的情况可能需要做其他大小的设计图。所以，我们可以先定一个基准，然后来看看isux团队的整理出来的一个表格： 通过表格，我们能很清楚的看出各种分辨率下该如何
阅读全文
摘要：/* flex */ .flex{ display: flex; } .f1{ flex:1 } .flex-center{ align-items: center; justify-content: center; } .ai-center{ align-items: center; } .ai-
阅读全文
摘要：flex-direction定义伸缩项目放置在伸缩容器的排列方向，对应有四个值： （1）row：从左到右或从右到左 （2）row-reverse：与row属性相反 （3）column：从上到下排列 （4）column-reverse：从上到下排列，内容与column相反
阅读全文
摘要：一，单行 white-space:nowrap; overflow:hidden;text-overflow: ellipsis; 二，多行 display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orie
阅读全文
摘要：div{ display:flex; alian-items:center; //使垂直对齐 justify-content:center //使水平对齐 }
阅读全文
